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

14.1 简介

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

成都地区优秀IDC服务器托管提供商(创新互联).为客户提供专业的温江服务器租用,四川各地服务器托管,温江服务器租用、多线服务器托管.托管咨询专线：18980820575

14.2 指向

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

在全局环境下，this 始终指向全局对象(window), 无论是否严格模式;

 
 
 
 
      
  
  
  
  1. console.log(this); // window 
    2.

普通函数内部的this分两种情况，严格模式和非严格模式。

(1)非严格模式下，this 默认指向全局对象window

(2)严格模式下， this为undefined

 
 
 
 
      
  
  
  
  1. function fun() { 
    2.   
  
  
  
  2.     console.log(this); // window 
    3.   
  
  
  
  3. } 
    4.

对象内部方法的this指向调用这些方法的对象

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

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

 
 
 
 
      
  
  
  
  1. const obj = { 
    2.   
  
  
  
  2.     a: 10, 
    3.   
  
  
  
  3.     b: 20, 
    4.   
  
  
  
  4.     add: function () { 
    5.   
  
  
  
  5.         return this.a + this.b; 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7. }; 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. console.log(obj.add()); // 30 
    10.   
  
  
  
  10. const add = obj.add; 
    11.   
  
  
  
  11. console.log(add()); // NaN 
    12.

原型链中的方法的this仍然指向调用它的对象

 
 
 
 
      
  
  
  
  1. const obj = { 
    2.   
  
  
  
  2.     a: 10, 
    3.   
  
  
  
  3.     b: 20 
    4.   
  
  
  
  4. }; 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. const prototypeObj = { 
    7.   
  
  
  
  7.     add: function () { 
    8.   
  
  
  
  8.         return this.a + this.b; 
    9.   
  
  
  
  9.     } 
    10.   
  
  
  
  10. }; 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. Object.setPrototypeOf(obj, prototypeObj); 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. console.log(obj.add()); // 30 
    15.

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

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

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

 
 
 
 
      
  
  
  
  1. 按钮 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. const btn = document.getElementById('testId'); 
    4.   
  
  
  
  4. btn.addEventListener('click', function() { 
    5.   
  
  
  
  5.  console.log(this); // 按钮 
    6.   
  
  
  
  6. }); 
    7.

内联事件中的this指向分两种情况：

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

 
 
 
 
      
  
  
  
  1. 按钮 // 输出该DOM节点 
    2.

(2)当代码被包括在函数内部执行时，其this指向等同于 函数直接调用的情况，即在非严格模式指向全局对象window， 在严格模式指向undefined

 
 
 
 
      
  
  
  
  1. 按钮 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. function clickFun() { 
    4.   
  
  
  
  4.  console.log(this); // window 
    5.   
  
  
  
  5. } 
    6.

对于延时函数内部的回调函数的this指向全局对象window(当然可以通过bind方法改变其内部函数的this指向)

 
 
 
 
      
  
  
  
  1. function Fun() { 
    2.   
  
  
  
  2.     this.a = 10; 
    3.   
  
  
  
  3.     this.method = function() { 
    4.   
  
  
  
  4.         setTimeout(function() { 
    5.   
  
  
  
  5.             console.log(this); // window 
    6.   
  
  
  
  6.         }, 1000); 
    7.   
  
  
  
  7.     } 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. const fun = new Fun(); 
    11.   
  
  
  
  11. fun.method(); 
    12.

由于箭头函数不绑定this， 它会捕获其所在(即定义的位置)上下文的this值， 作为自己的this值，所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。

 
 
 
 
      
  
  
  
  1. function Fun() { 
    2.   
  
  
  
  2.     this.a = 10; 
    3.   
  
  
  
  3.     this.method = function() { 
    4.   
  
  
  
  4.         setTimeout(() => { 
    5.   
  
  
  
  5.             console.log(this); // Fun {a: 10, method: ƒ} 
    6.   
  
  
  
  6.         }, 1000); 
    7.   
  
  
  
  7.     } 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. const fun = new Fun(); 
    11.   
  
  
  
  11. fun.method(); 
    12.

14.3 改变this指向

除了隐式绑定this的方式，还能够通过显示绑定的方式，通过call、apply、bind方式改变this指向，对于这三者的区别后续将有专门的百题斩去阐述，本节主要进行一波简单使用。

call()

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

 
 
 
 
      
  
  
  
  1. function method(val1, val2) { 
    2.   
  
  
  
  2.     return this.a + this.b + val1 + val2; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const obj = { 
    6.   
  
  
  
  6.     a: 1, 
    7.   
  
  
  
  7.     b: 2 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. console.log(method.call(obj, 3, 4)); // 10 
    11.

apply()

apply() 方法调用一个具有给定this值的函数，以及以一个数组(或类数组对象)的形式提供的参数。

 
 
 
 
      
  
  
  
  1. function method(val1, val2) { 
    2.   
  
  
  
  2.     return this.a + this.b + val1 + val2; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const obj = { 
    6.   
  
  
  
  6.     a: 1, 
    7.   
  
  
  
  7.     b: 2 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. console.log(method.apply(obj, [3, 4])); // 10 
    11.

bind()

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

 
 
 
 
      
  
  
  
  1. function method(val1, val2) { 
    2.   
  
  
  
  2.     return this.a + this.b + val1 + val2; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. const obj = { 
    6.   
  
  
  
  6.     a: 1, 
    7.   
  
  
  
  7.     b: 2 
    8.   
  
  
  
  8. }; 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. const bindMethod = method.bind(obj, 3, 4); 
    11.   
  
  
  
  11. console.log(bindMethod); // [Function: bound method] 
    12.   
  
  
  
  12. console.log(bindMethod()); // 10 
    13.

扩展

  • call() 和 apply()的区别是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组;
  • bind返回的是一个绑定函数，而call和apply返回的是运行结果;
  • 多次 bind() 是无效的，只会绑定到第一次调用的对象上;
  • call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。

本文转载自微信公众号「执鸢者」，可以通过以下二维码关注。转载本文请联系执鸢者公众号。

本文标题：前端百题斩——js中的这些“this”指向都值得了解
URL分享：http://www.shufengxianlan.com/qtweb/news29/396279.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App设计知识

分类信息网站

小谭网创广告　　 　橡塑保温板　　 　成都网站推广公司　　 　成都西信机房托管　　 　温江电信机房　　 　南充网站建设　　 　微信小程序　　 　定制网站建设　　 　新华建筑装饰　　 　广告吸塑字　　 　定制网站　　 　成都网站设计　　 　界面设计　　 　全网品牌营销　　 　成都app软件开发　　 　自贡电信机房　　 　品牌官网设计　　 　小程序开发　　 　成都做网站建设公司　　 　ssl数字证书