this指向问题（私人版）

川长思鸟来 2022-10-15 11:54 195阅读 0赞

# 开局一张图，装备全靠打  #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]

**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

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

**3、构造器调用**

除了一些内置函数，大部分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。

因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

6.Function.prototype.call()

`call()` 方法使用一个指定的 `this` 值和单独给出的一个或多个参数来调用一个函数。

**注意：**该方法的语法和作用与 [`apply()`][apply] 方法类似，只有一个区别，就是 `call()` 方法接受的是**一个参数列表**，

而 `apply()` 方法接受的是**一个包含多个参数的数组**。

[查看更多][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2piajY1Njg4Mzl6_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/399b9b2a557142d1901924c823792353.png
[apply]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
[Link 1]: https://blog.csdn.net/jbj6568839z/article/details/106479511?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162189920116780269862788%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162189920116780269862788&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~hot_rank-3-106479511.first_rank_v2_pc_rank_v29&utm_term=this%E6%8C%87%E5%90%91%E6%9C%89%E5%87%A0%E7%A7%8D&spm=1018.2226.3001.4187