【JavaScript教程】this关键词指向讲解

所需工具：

JavaScript

聪明的大脑

勤劳的双手

注意：本站只提供教程，不提供任何成品+工具+软件链接，仅限用于学习和研究，禁止商业用途，未经允许禁止转载/分享等

教程如下

1、es5中的this的指向

this是javascript的一个关键字，他是函数执行过程中，自动生成的一个内部对象，指当前的对象，只在当前函数内部使用。
在es5中this的指向取决于函数运行时的环境。
没有直接挂载者(或称调用者)的函数中this，非严格模式下指向window，在use strict严格模式下，默认为undefined。以下都是在非严格模式下讨论

 	var name = 'hello window!';
 	var obj = {
 	     name: 'hello obj!',
 	     fn: function() {
 	     console.log(this.name);
 	     }
 	};
 	var fn = obj.fn;
 	fn(); // hello window!
 	obj.fn(); // hello obj!

obj.fn()在执行时，fn中的this指向的是当前的调用对象obj。fn()执行时，this指向的是window对象。

 	var fn = obj.fn; // 等价于 window.fn = obj.fn;
 	fn(); // 等价于 window.fn();

匿名函数的执行环境是全局的

 	var name = 'hello window!';
 	var obj = {
 	     name: 'hello obj!',
 	     fn: function() {
 	     console.log(this.name); // 'hello obj!'
 	     return function() {
 	         console.log(this.name); // 'hello window!'
 	     };
 	     }
 	};
 	obj.fn()();

2、es6中的this

es6箭头函数的特点

箭头函数没有自己的this
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，即外层代码的this引用。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
没有arguments对象。如果要用，可以用Rest参数代替。
不可以使用yield命令，因此箭头函数不能用作Generator函数

示例说明，修改上述示例代码中的函数为箭头函数：

 	// 示例代码1
 	var name = 'hello window!';
 	var obj = {
 	     name: 'hello obj!',
 	     fn: () => {
 	     console.log(this.name); // 这里的this指向的外层的this,即window对象，想当于上打印的是console.log(window.name);
 	     }
 	};
 	var fn = obj.fn;
 	fn(); // hello window!
 	obj.fn(); // hello window!
 	 
 	// 示例代码2
 	var name = 'hello window!';
 	var obj = {
 	     name: 'hello obj!',
 	     fn: function() {
 	     console.log(this.name); // hello obj!
 	     return () => {
 	         console.log(this.name); // hello obj! // this指向外层的this，即obj对象
 	     };
 	     }
 	};
 	obj.fn()();

总结：

es5中的this主要看运行的环境，指向的是调用它的对象。
箭头函数中的this是在一开始就固定的，并不受调用对象