这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

this指向

这个要从this的指向说起.

this指向与定义的时候无关,仅与调用时相关. 箭头函数没有自己的this. 非严格模式下默认指向window，严格模式下传null指向null，不传或者传undefined都指向undefined。

下面给大家举几个例子说明一下:** **

//普通函数：
function a() {
   console.log(this)
}
a()//this指向window,等价于window.a()
let obj={};
obj.a=a;
obj.a()//this指向obj

//箭头函数:
const x = ()=>{
   console.log(this)
}
x()//this指向window
let obj={};
obj.x=x;
obj.x()//this指向window

这个例子可以看到,通过window.a()调用,this便指向window. 若把a赋给obj,再通过obj.a()调用,this便指向obj.

//结合作用域链:
window.name='张三';
function say(){
    console.log(name)
    console.log(this.name)
}
let obj = (function a() {
    let name='李四';
    return {
        name:'王五',
        say(){
           console.log(name);
           console.log(this.name);
        }
    };
})();
say();//张三,张三
obj.say(); //李四,王五
obj.say=say
obj.say(); //张三,王五

相信大家已经对this的指向有了自己的理解,那问题来了,为什么react的项目在class组件中自定义函数需要bind(this)才能让这个函数里的this指向这个组件呢?react自带的生命周期函数为什么不需要这么做呢? 这又涉及到严格模式的一个规定.

//非严格模式：
(function a() {
   console.log(this)//window
})()

//----------
 //严格模式：
 "use strict";
(function a() {
    console.log(this)//undefined
})()

对于处于严格模式的代码中,this默认将不再指向window,而是undefined. 而通过查阅了ECMAScript 2015的规范后发现,规范中定义了class中总是使用严格模式,故自己定义的函数里this会指向undefined,react生命周期里的this,框架已帮我们完成了绑定.

NOTE   A ClassBody is always strict code.

React的class组件中自定义函数为什么要bind(this)?JS中this到底指向哪?

this指向