事件绑定

类组件的事件绑定

<button onClick={()=>this.addN()}>n+1</button>

• 传一个函数给,onClick即可，注意c大写
• 思考一个问题，下面这样写可以吗？？ <button onClick={this.addN}>n+1</button>
• 有一点问题，这样会使得this,addN里的this变为window
• 还有一种写法<buttomn onClick={this.addN.bind(this)}>n+1</button>
• 这样写是可以的，因为它返回了一个绑定当前this的新函数
• 但是这样太麻烦了
• 可以把第一中修改一下 使用 this._addN = ()=>this.addN()
• 给箭头函数取个名字<button onClick = {this.addN}>n+1</button>
• 可以直接写为

costructor(){
this.addN = () =>this.setState({n: this.state.n+1})
render(){
return <button onClick={this.addN}>n+1<button>
}
}

类组件的事件绑定最终写法

class SOn extends React.Component{

addN = () =>this.setState({ n: this.state.n + 1});
render(){
return <button onClick={this.addN}>n+1</button>
}
}

• 这里的addN等价于上面constructor中的addN 例如：

class Son ectends React.Component{

addN = () => this.setState({ n: this.state.n + 1});//是对象本身的属性，这意味着每个Son组件都有自己的addN，如果有两个Son，就有两个addN
addN(){//这个是对象的共有属性(也就是原型上的属性)，这意味着所有的son共用一个addN
this.setState({n: this.state.n + 1})}
}//两个addN 有什么区？？？？

为什么this会变/不会变

• 所有函数的this都是参数，由调用决定，所以可变
• 唯独箭头函数的this不变，因为箭头函数不接受this

关于this调用的两个例子

var a = {name:'里面name',
sayName:function(){
console.log("this.name= "= this.name);
}
};
var name = "外面name";
function sayName(){
var sss = a.sayName;
sss();                                  //sss.call(undefined)
a.sayName();                            //a.sayName.call(a)
(a.sayName)();                          //(a.sayname).call(a)
(b = a.sayName)();                      //b.call(undefined)
}
sayName();

var length = 10;
function fn(){
console.log(this.length);

}
var obj = {

length:5,
method: function(fn){
fn();  //fn.call.(undifined)
arguments[0]();  arguments[0].call(arguments) 10
}
};
obj.method(fn ,1)    // obj.method.call(obj,fn,1) 2