最近在做项目中遇到一个问题:
onclick = {a.b} 会导致找不到a.b方法的内部的this丢失
1.导致我们在onclick里面找不到this
JavaScript自身特性说明:
如果传递一个函数名给一个变量,之后通过函数名()的方式进行调用,在方法内部如果使用this则this的指向会丢失。
从最开始bind(this) 到stage2的箭头函数
class Foo extends React.Component {
constructor (super) {
//this.a = this.a.bind(this) // 老写法
}
a() {
console.log(1);
}
b = () => {
console.log(1);
}
render(){
<div>
<div onClick={this.a.bind(this)}></div> // 老写法
<div onClick={this.b}></div> // 新写法
</div>
}
}
React中的bind同上方原理一致,在JSX中传递的事件不是一个字符串,而是一个函数,onClick即是中间变量,所以处理函数中的this指向会丢失。
箭头函数除了代码少。与普通函数最大的不同就是。this是由声明该函数时候定义的。一般是隐性定义为声明该函数时的作用域this。
阮一峰ES6--箭头函数有几个使用注意点。
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
为什么箭头函数不能作构造函数,不能使用new?
构造函数之所以叫“构造函数”,就是说这个函数的目的,就是操作一个空对象(即this对象),将其“构造”为需要的样子,
因为箭头函数没有this,而new的过程如下
// 1.构造一个空对象
// 2.把空对象的原型指向构造函数的原型对象
// 3.把空对象赋值给this
// 4.进行this初始化
// 5.返回this
function Function(name,age){
let obj={};
obj.__proto__=Function.prototype;
this=obj;
this.name=name;
this.age=age;
return this;
}
所以 箭头函数不能被当做构造函数使用