首页 > js教程 > 正文

javascript函数如何定义?js函数常见用法

转载 2018-10-13 15:02:25 0 882
赞助会员专享特权
本篇文章给大家带来的内容是关于javascript函数如何定义?js函数常见用法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

我们知道,js函数有多种写法,函数声明 ,函数表达式,Function式构造函数,自执行函数,包括Es6的箭头函数,Class类写法,高阶函数,函数节流/函数防抖,下面我就开始讲关于上面几种类型的最基本用法。

函数声明式写法

这种写法是最基本的写法 ,使用关键字 function 定义函数,函数声明后不会立即执行,会在我们需要的时候调用到。这种函数是全局的,如果有两个同名的声明式函数存在,那么第二个会覆盖第一个。

   function   Test(){
    } 

有个面试题如下,问输出:

function  test1(){
 alert('test1')  
} ;
test1() ;  
function  test1(){
 alert('test2')  
} ;

答案是:'test2'

函数表达式写法

定义一个变量,指向一个函数,其实可以看做是一个匿名函数。这种函数在声明之后才能调用,在声明之前调用会报错。

      var   test=function(){
     }

有个面试题如下,问输出:

var test=function(){ alert('test1')  } ;
test() ; 
var test=function(){ alert('test2')  } ;

答案是:test1

Function式构造函数

通过 JavaScript 函数构造器(Function())实例化来定义函数,前面定义各种变量,最后定义函数的返回值或者是输出,这种函数不太常用。

var test= new Function("a", "b", "return a * b");
test();

自执行函数

这种函数没有名称,只有声明体,实际上是一个 匿名自我调用的函数。这种函数的好处是保持变量独立,不被外部变量污染,形成一个封闭的函数执行环境。

写法如下:

(function(){

})();
这种写法比较常见,比如Jquery框架里面就用到这种写法:
‘use strict’;

;(function(context,win){
})(Jquery||undefined,window)

还有像闭包的写法,经常会遇到像下面类似的面试题的写法:

var ps=tr.getElementsByTagName("p");
for(var  i=0;i<ps.length;i++){
     (function(p){
      p.onclick=function(){
      alert(this.innerHTML);
      }
})(ps[i])
}

箭头函数

这种声明方式是Es6引入的写法,箭头函数是简写形式的函数表达式,并且它的内部的this指向的不是自己,指向的是当前执行环境的顶级对象(如window,react组件中指向的是当前组件的class父级组件),箭头函数总是匿名的。写法如下:

const   test=()=>{
}

比如下面的函数中的this指向的是window

const  test={
       array:[1,2],
       show:()=>{
            console.log(this. array)
      }
}
test.show();//undefined

而下面react组件的onSearch中的this指向的是Test这个组件,通过this可以找到Test组件下面定义的函数或者state,props。注意constructor中注释的代码是为了将onSearch的this指向Test组件,和箭头函数是两个不同写法,但是有同等效果。

		import  {Button}  from 'antd'
			class Test extends Component {
				constructor(props) {
					super(props);
                  //this.onSearch = this.onSearch.bind(this)
				}
				//onSearch(){
						console.log(this);
				//}
				onSearch=()=>{
					console.log(this);
				}
				render() {
					return ( < p >
						<Button onClick={this.onSearch}>测试</Button>
						< /p>
					)
				}
			}

Class类写法

Js之前是没有类的概念的,之前都是将一些属性挂载在函数的实例上或者通过原型来实现基于函数的类的概念。就比如下面的写法

function  Test (){

this.name=’’;

//this.show=function(){

//}

}

Test.prototype.show=function(){

   Console.log(this.name)

}

new Test().show();

ES6引入了Class(类)这个概念,作为对象的模板,通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法.

基本写法:

class   test {
//第一种
Show() {
alert('show');
}
//第二种
//Show=()=>{
//}
}
var test1 = new test();
var  test2= new test();

注意这个类中的这两种方法的写法是有区别的

第一种声明的方法会指向test的原型prototype上

test1. Show=== test2.Show//true

第二种声明的方法会指向test的实例,每次实例化都会生成一个Show方法。

test1. Show=== test2.Show//false

继承写法如下,这样newTest 就会继承test中的Show

class    newTest  extends   test{
   Show() {
       super. Show();
       alert('newshow');
   }
}
 var  test=new  newTest  ();
 test. Show()

如果newTest 中没有声明Show方法,就会调用父类test中的Show方法,如果申明了就会调用newTest 的Show方法。子级调用父级的方法用super关键字访问如

super. Show();

  • 高阶函数

高阶函数英文叫Higher-order function。JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。简单的说法就是“高阶函数就是可以把函数作为参数,或者是将函数作为返回值的函数。”,其实最典型的应用就是回调函数了。

高阶函数大致有下面几个场景

1.函数回调

$.get(‘’,{},function(data){

})

var   test=function(callback){
        callback.apply(this,arguments)

}

2函数柯里化

在一个函数中首先填充几个参数(然后再返回一个新函数)的技术称为柯里化(Currying),这个定义可能有点难理解,先看下一个简单的函数柯里化的实现:

      var currency=function(fn){                      
      var self=this;                      
      var arr=[];                      
      return function(){                            
      if(arguments.length==0){                                  
      return  fn.apply(this,arr  );
   }else{
[].push.apply(arr,arguments);                                  
return arguments.callee;
}   
}
}

然后再看一下调用:

var  sum=function(){
                      var total=0;
                       var  argArr=arguments;
                       for (var i = 0; i < argArr.length; i++) {
                                  total+=argArr[i];
                       }   
                        return  total;
 }       
var test=  currency(sum);           
test(100,200);
test(300)
alert(test());

其实简单的解释就是currency函数里面定义一个局部变量arr数组,然后返回一个函数,返回的函数体里对变量arr进行了赋值,每次当函数传入参数的时候都会将参数push到arr里面,然后返回函数体,形成了一个闭包。当没有参数传入的时候就直接执行传入的sum函数,然后执行函数sum传入的的参数就是arr.

3.函数扩展

函数扩展一般是通过原型来扩展,传入一个回调函数,比如给Array扩展一个函数Filter代码如下:

Array.prototype.Filter=function(callback){
    …..
}

做过react 开发的都知道有高阶组件的概念,其实高阶组件是通过高阶函数演变的,只不过传入的参数是组件,然后返回值是一个组件,来看下面的一段代码  

export default simpleHoc(Usual);
import React, { Component } from 'react';
 
const simpleHoc = WrappedComponent => {
  console.log('simpleHoc');
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}
export default simpleHoc;

函数节流/函数防抖

一般做前端时间比较长的人对这个概念比较熟了,但是刚接触的人估计会有点懵逼。

这两个概念都是优化高频率执行js代码的一种手段,来看下他们的基本概念

函数节流:函数在设定的时间间隔内最多执行一次

应用场景:高频率点击事件

var  isEnable=true;

document.getElementById("testSubmit").onclick=function(){  
if(!isEnable){           
return;
  }
  isEnable=false;
  setTimeout(function(){
        console.log("函数节流测试");
        isEnable = true;
  }, 500);
}

函数防抖:函数在一段时间内不再被调用的时候执行

应用场景:onresize onscroll事件,oninput事件

Var  timer=null;
Window. onscroll=function(){
     clearTimeout(timer);
     timer = setTimeout(function(){
     console.log("函数防抖测试");
    }, 500);
}

从上面两个事件可以看出来区别:

函数节流在第一次操作之后的500毫秒内再次点击就只执行一次,不会重置定时器,不会重新计时

函数防抖是在持续触发onscroll事件的时候会重置重置定时器,重新计时,直到不触发事件的500毫秒之后执行一次

以上就是javascript函数如何定义?js函数常见用法的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript函数
  • 本文转载于:博客园,如有侵犯,请联系删除
  • 相关文章


  • JavaScript函数柯里化详解
  • javascript函数重载解决方案分享_基础知识
  • String.prototype实现的一些javascript函数介绍_javascript技巧
  • JAVASCRIPT函数作用域和提前声明 分享_基础知识
  • 详解JavaScript函数绑定_基础知识
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • 弹指间学会JavaScript 教程 弹指间学会JavaScript 教程
  • Javascript 基础教程 Javascript 基础教程
  • javascript初级教程 javascript初级教程
  • JavaScript中文参考手册 JavaScript中文参考手册
  • JavaScript教程 JavaScript教程
  • 相关视频章节