this的指向

this的指向

this就是一个指针，指向调用函数的对象。函数的this在调用时绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。

思维导图

本节精华：

• this 总是（非严格模式下）指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境；

• 除了不常用的with和eval的情况，具体到实际应用中，this指向大概可以分为四种：

  • 作为对象的方法调用；
  • 作为普通函数调用；
  • 构造器调用；
  • call 或 apply调用；
  • 箭头函数中，this指向函数上层作用域的this；

• 构造器和普通函数的区别在于被调用的方式；

• A,call(B) => 可以理解成在B的作用域内调用了A方法；

1.作为对象的方法调用

当函数作为对象的方法被调用时，this指向该对象（谁调用指向谁）

 var obj = {
     a: 'yuguang',
     getName: function(){
         console.log(this === obj);
         console.log(this.a);
     }
 };
 ​
 obj.getName(); // true yuguang

2.作为普通函数调用

当函数不作为对象的属性被调用，而是以普通函数的方式，this总是指向全局对象（在浏览器中，通常是Window对象）

 window.name = 'yuguang';
 ​
 var getName = function(){
     console.log(this.name);
 };
 ​
 getName(); // yuguang

 window.name = '老王'
 var obj = {
     name: 'yuguang',
     getName: function(){
         console.log(this.name);
     }
 };
 ​
 var getNew = obj.getName;
 getNew(); // 老王
 ————————————————
 版权声明：本文为CSDN博主「余光、」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
 原文链接：https://blog.csdn.net/jbj6568839z/article/details/106479511

而在ES5的严格模式下，this被规定为不会指向全局对象，而是undefined

3.构造器调用（new）

除了一些内置函数，大部分JS中的函数都可以成为构造器，它们与普通函数没什么不同

构造器和普通函数的区别在于被调用的方式： 当new运算符调用函数时，总是返回一个对象，this通常也指向这个对象

 var MyClass = function(){
     this.name = 'yuguang';
 }
 var obj = new MyClass();
 obj.name; // yuguang

但是，如果显式的返回了一个object对象，那么此次运算结果最终会返回这个对象。

 var MyClass = function () {
     this.name = 1;
     return {
         name: 2
     }
 }
 var myClass = new MyClass(); 
 console.log('myClass:', myClass); // { name: 2}

只要构造器不显示的返回任何数据，或者返回非对象类型的数据，就不会造成上述问题。

4.call或apply调用

跟普通的函数调用相比，用call和apply可以动态的改变函数的this

 var obj1 = {
     name: 1,
     getName: function (num = '') {
         return this.name + num;
     }
 };
 ​
 var obj2 = {
     name: 2,
 };
 // 可以理解成在 obj2的作用域下调用了 obj1.getName()函数
 console.log(obj1.getName()); // 1
 console.log(obj1.getName.call(obj2, 2)); // 2 + 2 = 4
 console.log(obj1.getName.apply(obj2, [2])); // 2 + 2 = 4

5.箭头函数

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。

因此，在下面的代码中，传递给getVal函数内的this并不是调用者自身，而是外部的this～

 this.val = 2;
 var obj = {
     val: 1,
     getVal: () => {
         console.log(this.val);
     }
 }
 ​
 obj.getVal(); // 2

总结：

1. new 调用：绑定到新创建的对象，注意：显示return函数或对象，返回值不是新创建的对象，而是显式返回的函数或对象。
2. call 或者 apply（ 或者 bind） 调用：严格模式下，绑定到指定的第一个参数。非严格模式下，null和undefined，指向全局对象（浏览器中是window），其余值指向被new Object()包装的对象。
3. 对象上的函数调用：绑定到那个对象。
4. 普通函数调用： 在严格模式下绑定到 undefined，否则绑定到全局对象。

ES6 中的箭头函数：不会使用上文的四条标准的绑定规则， 而是根据当前的词法作用域来决定this， 具体来说， 箭头函数会继承外层函数，调用的 this 绑定（ 无论 this 绑定到什么），没有外层函数，则是绑定到全局对象（浏览器中是window）。 这其实和 ES6 之前代码中的 self = this 机制一样。

DOM事件函数：一般指向绑定事件的DOM元素，但有些情况绑定到全局对象（比如IE6~IE8的attachEvent）。