1.函数的声明与函数表达式
一般的函数定义方法有两种:
函数的声明:
function handleClick(x,y){
retrun x+y;
}
关于函数声明,它最重要的一个特征就是函数声明提升,即执行代码之前先读取函数声明。这意味着可以把函数声明放在调用它的语句之后。如下代码可以正确执行:
handleClick(2,3); //5
function handleClick(x,y){
retrun x+y;
}
函数表达式:
handleClick=function (x,y){
retrun x+y;
}
它的调用方法为:
handleClick=function (x,y){
retrun x+y;
}
handleClick(2,3); //5
其实,这可以看作将一个匿名函数赋值给一个变量handleClick,所以必须在赋值之后才可以调用这个函数,否则会报undefined的错误。
总结来说,由于解析器在向执行环境中加载数据时,解析器会率先读取函数声明,所以函数的声明在执行任何代码前都可以调用;至于函数表达式,则必须等到解析器执行到它的所在的的代码行,才会真正的被解析,所以,它必须在定义之后才可以调用。
2.自执行函数
顾名思义,即是指创建了一个匿名的函数后立即执行的函数。常见的自执行函数如下:
(function(){return 1;}()) //立即执行
var handleClick=function(){return 1;}();// 立即执行
由上可以看出,在匿名函数后加一个圆括号即代表自执行函数。
3. onClick={() => this.handleClick(i)}、onClick={this.handleClick(i)}与onClick={this.handleClick}
现在,我们可以回归标题。
onClick={这里是一个匿名函数或者函数引用}
因此:
onClick={this.handleClick(i)}
这里包裹的函数其实是一个自执行函数,当解析器执行到这里的时候,handleClick函数会立即执行,并不需要点击才能触发。
onClick={() => this.handleClick(i)},onClick={this.handleClick}
这两个函数都不是自执行函数,所以会在点击的时候才触发。这两者的区别又在于,点击时,前者会执行一个匿名函数(箭头函数),在这个函数里调用传参函数(this.handleClick(i)
),后者直接调用了this.handleClick
,因此this.handleClick(i),this.handleClick
都是函数引用。