javascript的this关键字详解

this 的定义

表示当前执行代码的环境对象

 因此可将 this 的剖析分为“全局环境” 和 “函数环境” 两种类型的环境对象

全局环境

console.log(this === window); // true var a = 10;console.log(this.a); // 10

函数环境

在函数内部，this 的取值取决于函数被调用时的运行环境。

这里涉及到内存里的数据结构相关的知识点，当我们定义以下字面量对象时会发生一系列的关联关系

var obj = { name: 'Tom' };

javascript 引擎会先在内存中生成 { name: 'Tom' } 对象，接着再把这个对象的内存地址赋值给 obj 变量，所以 obj 变量保存的只是一个内存地址而已，如果要获取 obj.name，javascript 引擎会先从 obj 变量中拿到内存地址，然后从该地址中获取原始对象，再返回 name 属性。

而属性值为函数时，该函数会被保存在内存中，然后将该内存地址赋值给该属性，因此该地址赋值给不同环境执行时它的作用域是不一样的，而 this 对象就是指向函数当前的执行环境对象，执行环境是会在 Event Loop（事件循环）过程中变化的，因此 this 在函数环境下是属于运行时的。

var name = 'Tom'; var obj = {  name: 'Iceberg',  say: function() {    console.log('my name is ' + this.name);  },  sub: {    say: function() {      console.log('my name is ' + this.name);    }  }}; obj.say(); // my name is Icebergobj.sub.say() // my name is undefined; var say = obj.say;say(); // my name is Tom;

上面的例子说明 obj.say() 执行环境为 obj 对象，而 obj.sub.say() 的执行环境却是 obj.sub 对象，而对于 obj.sub 来说并没有 name 属性，因此为 undefined；而 var say = obj.say; 则表示将 say 方法的内存地址赋值给全局变量，因此从全局变量 name 中取值。

运用场景

接下来从 this 在函数环境下的不同运用场景来剖析

事件回调函数

var handler = {	nickname: 'anonymous',	register: function() {	  console.log(this.nickname);	}	} $('#registerBtn').on('click', handler.register); // undefined

以上逻辑点击触发后输出的是 undefined，因为函数被当做事件触发的回调函数执行时，this 是指向该触发事件对应的元素，如要 this 仍然以 handler 对象为执行环境，则可使用函数的 bind 方法进行执行环境对象的绑定操作。

$('#registerBtn').on('click', handler.register.bind(handler)); // anonymous

在 react 中经常需要在回调函数中调用 this.state、this.props，按照上面的分析，将当前环境对象 bind 到回调函数中即可。

如果是使用的箭头函数定义回调函数即可无需 bind，因为箭头函数中 this 就是对应定义时所在的对象。