JavaScript之深入理解this

 定义

创新互联主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务宁蒗,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

this是函数运行时自动生成的内部对象，即调用函数的那个对象。（不一定很准确的定义，但还算通俗易懂） 在大多数情况下，this的值由函数调用方式决定，它不能在执行期间赋值来设置，它在每次执行下可能都有不同的值。

全局执行环境（outside function）

在全局执行环境中，this一直指向全局对象（global object），不管是在严格模式还是在非严格模式中。

代码1 

 
 
 
    
  
  
  
  1. console.log(this.document === document);   //true  
    2. 
  
  
  
  2. // 在浏览器中，window对象也就是全局对象（global object）  
    3. 
  
  
  
  3. console.log(this === window);   //true  
    4. 
  
  
  
  4. this.a  = 37;  
    5. 
  
  
  
  5. console.log(window.a);   //37 
    6.

函数执行环境（inside function）

在函数执行环境中，this的值取决于函数的调用方式。

而函数的调用方式主要有4种：

  •  函数直接调用
  •  对象方法调用
  •  构造函数调用
  •  call / apply / bind
  •  箭头函数（ES6）

函数直接调用

下面的代码在非严格模式执行时，this的值会指向全局对象；而在严格模式中，this的值将会默认为undefined。

代码2 

 
 
 
    
  
  
  
  1. /* 非严格模式 */  
    2. 
  
  
  
  2. function f1 () {  
    3. 
  
  
  
  3.   return this;  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. console.log(f1() === window);   //true  
    6. 
  
  
  
  6. // in node;  
    7. 
  
  
  
  7. console.log(f1() === global);   //true  
    8. 
  
  
  
  8. /* 严格模式 */  
    9. 
  
  
  
  9. function f2 () {  
    10. 
  
  
  
  10.   'use strict'  
    11. 
  
  
  
  11.   return this;  
    12. 
  
  
  
  12. } 
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14. console.log(f1() === undefined);   //true 
    15.

call / apply / bind 改变this的指向

call / apply

call和apply的用法很像，只是后面参数的传入形式不同。

代码3 

 
 
 
    
  
  
  
  1. function add(c, d) {  
    2. 
  
  
  
  2.   return this.a + this.b + c + d;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. var o = {a: 1, b: 3};  
    5. 
  
  
  
  5. // call的第一个参数 是对象，也就是this的指向对象。后面的参数就是函数arguments对象的成员  
    6. 
  
  
  
  6. add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16  
    7. 
  
  
  
  7. // call的第一个参数 是对象，也就是this的指向对象。后面的参数是数组，数组里的成员也就是函数arguments对象成员  
    8. 
  
  
  
  8. add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 
    9.

使用call和apply时需要注意的是，当传入的第一个参数的值不是对象时，JavaScript会尝试使用ToObject 操作将其转化为对象。

代码4 

 
 
 
    
  
  
  
  1. function bar() {  
    2. 
  
  
  
  2.   console.log(Object.prototype.toString.call(this));  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. bar.call(7); // [object Number] 
    5.

bind 方法

ECMAScript 5 引入了 Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

代码5 

 
 
 
    
  
  
  
  1. function f() {  
    2. 
  
  
  
  2.   return this.a;  
    3. 
  
  
  
  3. }  
    4. 
  
  
  
  4. var g = f.bind({a: 'azerty'}); //生成一个绑定函数g  
    5. 
  
  
  
  5. console.log(g()); // azerty  
    6. 
  
  
  
  6. var o = {a: 10, f: f, g: g};  
    7. 
  
  
  
  7. console.log(o.f(), o.g());   //10, azerty  
    8. 
  
  
  
  8. //需要注意的是，绑定函数不可以再bind  
    9. 
  
  
  
  9. var h = g.bind({a: 'foo'});  
    10. 
  
  
  
  10. console.log(h());  //azerty，不会变成foo 
    11.

对象方法调用

当以对象里的方法的方式调用函数时，它们的 this 是调用该函数的对象.

下面的例子中，当 o.f() 被调用时，函数内的this将绑定到o对象。 

 
 
 
    
  
  
  
  1. var prop = 36;  
    2. 
  
  
  
  2. var o = {  
    3. 
  
  
  
  3.   prop: 37,  
    4. 
  
  
  
  4.   bar: function() {  
    5. 
  
  
  
  5.     return this.prop;  
    6. 
  
  
  
  6.   }  
    7. 
  
  
  
  7. };  
    8. 
  
  
  
  8. console.log(o.bar());  //37 
    9.

构造函数调用

代码6 

 
 
 
    
  
  
  
  1. function Person(name, age) {  
    2. 
  
  
  
  2.   this.name = name;  
    3. 
  
  
  
  3.   this.age = age;  
    4. 
  
  
  
  4.   this.introduce = function () {  
    5. 
  
  
  
  5.     console.log('My name is ' + this.name + ', I\'m ' + this.age);  
    6. 
  
  
  
  6.   };  
    7. 
  
  
  
  7. }  
    8. 
  
  
  
  8. var Joseph = new Person('Joseph', 19);  
    9. 
  
  
  
  9. Joseph.introduce();  // "My name is Joseph, I'm 19" 
    10.

由上述代码可以清晰的看到this与被新创建的对象绑定了。

注意：当构造器返回的默认值是一个this引用的对象时，可以手动设置返回其他的对象，如果返回值不是一个对象，返回this。（这句话看起来比较难理解，我们看下一个例子）。

代码7 

 
 
 
    
  
  
  
  1. function Fn2() {  
    2. 
  
  
  
  2.   this.a = 9;  // dead code  
    3. 
  
  
  
  3.   return {a: 10};  
    4. 
  
  
  
  4. }  
    5. 
  
  
  
  5. var o = new Fn2(); 
    6. 
  
  
  
  6. console.log(o.a);  // 10 
    7.

这个例子说明了当构造函数返回的是一个对象的话，此时this的值会变成此时返回的对象。‘this.a = 9’成了僵尸代码。

箭头函数

在箭头函数（ Arrow functions）中，this的值是封闭执行环境决定的。在全局环境中，那么被赋值为全局对象。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 

 
 
 
    
  
  
  
  1. var globalObject = this;  
    2. 
  
  
  
  2. var foo = (() => this);  
    3. 
  
  
  
  3. console.log(foo() === globalObject); // true 
    4.

更重要的是它与其他情况不同的是，不管函数如何调用，上面this的值一直都是全局对象。call / bind 也不能改变它的值。

代码8 

 
 
 
    
  
  
  
  1. // 作为对象方法被调用  
    2. 
  
  
  
  2. var obj = {foo: foo};  
    3. 
  
  
  
  3. console.log(obj.foo() === globalObject); // true  
    4. 
  
  
  
  4. // 尝试用 call 改变this的值  
    5. 
  
  
  
  5. console.log(foo.call(obj) === globalObject); // true //this的值并未变成obj  
    6. 
  
  
  
  6. // 尝试用 bind 改变this的值  
    7. 
  
  
  
  7. foofoo = foo.bind(obj);  
    8. 
  
  
  
  8. console.log(foo() === globalObject); // true 
    9.

案例

本文知识点都看完了。让我们看几个案例，检查自己的掌握情况。

例1 

 
 
 
    
  
  
  
  1. var prop = 36;  
    2. 
  
  
  
  2. var o = {  
    3. 
  
  
  
  3.   prop: 37,  
    4. 
  
  
  
  4.   bar1: function() {  
    5. 
  
  
  
  5.     function foo1() {  
    6. 
  
  
  
  6.       return this.prop;  
    7. 
  
  
  
  7.     }  
    8. 
  
  
  
  8.     return foo1;  
    9. 
  
  
  
  9.   },  
    10. 
  
  
  
  10.   bar2: function() {  
    11. 
  
  
  
  11.     var foo2  = (() => this.prop); //ES6箭头函数  
    12. 
  
  
  
  12.     return foo2;  
    13. 
  
  
  
  13.   } 
    14. 
  
  
  
  14. };  
    15. 
  
  
  
  15. console.log('result1:'+o.bar1()()); // result1 ?  
    16. 
  
  
  
  16. console.log('result2:'+o.bar2()()); // result2 ?  
    17. 
  
  
  
  17. var fn2 = o.bar2;  
    18. 
  
  
  
  18. console.log('result3:'+fn2()()); // result3 ? 
    19.

先揭晓答案：例1 result1 = 36，result2 = 37，result3 = 36。我的理解是，在result1中，o.bar1()执行导致foo函数return到了全局环境中，然后执行就变成了在全局中执行，所以得到的是全局中36的值。result2呢？因为this在箭头函数中。它的值不会改变。所以this仍指向o。那为什么result3又重新变了呢？因为此时‘var fn2 = o.bar2’相当于重新定义了一个函数，而this的值当然也就变为了全局对象。 

 
 
 
    
  
  
  
  1. // 相当于这样  
    2. 
  
  
  
  2. var fn2 = function() {  
    3. 
  
  
  
  3.     function foo1() {  
    4. 
  
  
  
  4.       return this.prop;  
    5. 
  
  
  
  5.     }  
    6. 
  
  
  
  6.     return foo1;  
    7. 
  
  
  
  7.   }  
    8. 
  
  
  
  8. fn2()(); 
    9.

例2 

 
 
 
    
  
  
  
  1. function sum(a,b) {  
    2. 
  
  
  
  2.  return a+b;  
    3. 
  
  
  
  3. };  
    4. 
  
  
  
  4. var o = { 
    5. 
  
  
  
  5.   num: 1,  
    6. 
  
  
  
  6.   fn: function() {  
    7. 
  
  
  
  7.         function handle() {  
    8. 
  
  
  
  8.           return this.num = sum(this.num, this.num);  
    9. 
  
  
  
  9.         }  
    10. 
  
  
  
  10.     handle();  
    11. 
  
  
  
  11.   }  
    12. 
  
  
  
  12. };  
    13. 
  
  
  
  13. console.log('result:'+o.fn());  // result ? 
    14.

同样先揭晓答案：result = undefined，用控制台可以看到此时this指向window，而不是o。这是个比较容易掉进去的坑（一般认为是当初的语言设计错误，被人诟病不少）。看似函数是由对象方法调用的，其实细心的话，我们可以看到。handle函数的执行，前面的没有对象的。这种情况下，this指向全局对象。解决办法也很简单。 

 
 
 
    
  
  
  
  1. // 1、取消 handle函数的定义，直接在对象的方法中使用this  
    2. 
  
  
  
  2. fn2: function() {  
    3. 
  
  
  
  3.     this.value = sum(this.value, this.value);  //2  
    4. 
  
  
  
  4. },  
    5. 
  
  
  
  5. ///2、使用变量保存外部函数的this。  
    6. 
  
  
  
  6. fn3: function() {  
    7. 
  
  
  
  7.     var that = this;   // that == o  
    8. 
  
  
  
  8.     function handle() {  
    9. 
  
  
  
  9.         that.value = add(that.value, that.value);  
    10. 
  
  
  
  10.     }  
    11. 
  
  
  
  11.     handle();  
    12. 
  
  
  
  12. }  
    13.

名称栏目：JavaScript之深入理解this
链接分享：http://www.gawzjz.com/qtweb2/news9/3259.html

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

广告

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

猜你还喜欢下面的内容

网站建设知识

分类信息网

四川雕琢时光　　 　腾讯云香港空间　　 　微信小程序开发　　 　四川主机托管　　 　重庆托管服务器　　 　主动防护网　　 　卖友情链接　　 　香港云主机　　 　B2C电商系统　　 　宜宾网站设计　　 　清舞人间　　 　成都电商解决方案　　 　SSL证书　　 　华泰海航　　 　成都主机租用　　 　网站优化排名　　 　网站排名优化　　 　成都画册快印　　 　成都定制网站建设　　 　成都铺面装修