前端百题——js中的这些“this”指向都值得了解

待我称王封你为后i 2022-10-11 00:45 25阅读 0赞

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。用知识武装自己的头脑。

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

14.1 简介  
this是javascript中的一个关键字，其使用方法类似于一个变量，是执行上下文中一个重要组成部分。其作用是可以在函数体内部获取当前的运行环境。

14.2 指向  
每个函数的this是在调用的时候基于函数的执行环境绑定的，this的指向完全取决于函数的调用位置。(下面均是在浏览器环境下进行测试的结果)

在全局环境下，this 始终指向全局对象（window）, 无论是否严格模式；  
console.log(this); // window  
复制代码  
普通函数内部的this分两种情况，严格模式和非严格模式。  
 （1）非严格模式下，this 默认指向全局对象window

（2）严格模式下， this为undefined

function fun() \{  
console.log(this); // window  
\}  
复制代码  
对象内部方法的this指向调用这些方法的对象

（1）函数的定义位置不影响其this指向，this指向只和调用函数的对象有关；

（2）多层嵌套的对象，内部方法的this指向离被调用函数最近的对象（window也是对象，其内部对象调用方法的this指向内部对象， 而非window）。

const obj = \{  
a: 10,  
b: 20,  
add: function () \{  
return this.a + this.b;  
\}  
\};

console.log(obj.add()); // 30  
const add = obj.add;  
console.log(add()); // NaN  
复制代码  
原型链中的方法的this仍然指向调用它的对象  
const obj = \{  
a: 10,  
b: 20  
\};

const prototypeObj = \{  
add: function () \{  
return this.a + this.b;  
\}  
\};

Object.setPrototypeOf(obj, prototypeObj);

console.log(obj.add()); // 30  
复制代码  
构造函数中的this与被创建的新对象绑定。  
function Fun() \{  
this.a = 10;  
\}

const fun = new Fun();  
console.log(fun.a); // 10  
复制代码  
当函数通过Function对象的原型中继承的方法 call() 和 apply() 方法调用时， 其函数内部的this值可绑定到 call() & apply() 方法指定的第一个对象上， 如果第一个参数不是对象，JavaScript内部会尝试将其转换成对象然后指向它。(见后续代码)

通过bind方法绑定后， 函数将被永远绑定在其第一个参数对象上， 而无论其在什么情况下被调用。（见后续代码）

当函数被当做监听事件处理函数时， 其 this 指向触发该事件的元素（针对于addEventListener事件）

按钮

const btn = document.getElementById(‘testId’);  
btn.addEventListener(‘click’, function() \{  
console.log(this); // 按钮  
\});  
复制代码  
内联事件中的this指向分两种情况：

（1）当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素

按钮 // 输出该DOM节点  
复制代码  
（2）当代码被包括在函数内部执行时，其this指向等同于 函数直接调用的情况，即在非严格模式指向全局对象window， 在严格模式指向undefined

按钮

function clickFun() \{  
console.log(this); // window  
\}  
复制代码  
对于延时函数内部的回调函数的this指向全局对象window（当然可以通过bind方法改变其内部函数的this指向）

function Fun() \{  
this.a = 10;  
this.method = function() \{  
setTimeout(function() \{  
console.log(this); // window  
\}, 1000);  
\}  
\}

const fun = new Fun();  
fun.method();  
复制代码  
14.3 改变this指向  
除了隐式绑定this的方式，还能够通过显示绑定的方式，通过call、apply、bind方式改变this指向，对于这三者的区别后续将有专门的百题斩去阐述，本节主要进行一波简单使用。

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

function method(val1, val2) \{  
return this.a + this.b + val1 + val2;  
\}

const obj = \{  
a: 1,  
b: 2  
\};

console.log(method.call(obj, 3, 4)); // 10  
复制代码  
apply()  
apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

function method(val1, val2) \{  
return this.a + this.b + val1 + val2;  
\}

const obj = \{  
a: 1,  
b: 2  
\};

console.log(method.apply(obj, \[3, 4\])); // 10  
复制代码  
bind()  
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

function method(val1, val2) \{  
return this.a + this.b + val1 + val2;  
\}

const obj = \{  
a: 1,  
b: 2  
\};

const bindMethod = method.bind(obj, 3, 4);  
console.log(bindMethod); // \[Function: bound method\]  
console.log(bindMethod()); // 10  
复制代码  
扩展

call() 和 apply()的区别是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组；  
bind返回的是一个绑定函数，而call和apply返回的是运行结果；  
多次 bind() 是无效的，只会绑定到第一次调用的对象上；  
call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。  
1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star： [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu] 不胜感激 ！  
来自 “开源世界 ” ，链接：[https://ym.baisou.ltd/post/748.html][https_ym.baisou.ltd_post_748.html]，如需转载，请注明出处，否则将追究法律责任。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjIxNDM2_size_16_color_FFFFFF_t_70]: /images/20221005/7d5c705b23e74a1ea07da25b23255c70.png
[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu
[https_ym.baisou.ltd_post_748.html]: https://ym.baisou.ltd/post/748.html