深入理解Js的This绑定 ( 无需死记硬背,尾部有总结和面试题解析 )-阿里云开发者社区

开发者社区> 行者武松> 正文

深入理解Js的This绑定 ( 无需死记硬背,尾部有总结和面试题解析 )

简介:
+关注继续查看

深入理解Js的This绑定

js 的 this 绑定问题,让多数新手懵逼,部分老手觉得恶心,这是因为this的绑定 ‘难以捉摸’,出错的时候还往往不知道为什么,相当反逻辑。

让我们考虑下面代码:


  1. var people = { 
  2.     name : "海洋饼干"
  3.     getName : function(){ 
  4.         console.log(this.name); 
  5.     } 
  6. }; 
  7. window.onload = function(){ 
  8.     xxx.onclick =  people.getName; 
  9. };  

在平时搬砖时比较常见的this绑定问题,大家可能也写给或者遇到过,当xxx.onclick触发时,输出什么呢 ?

为了方便测试,我将代码简化:


  1. var people = { 
  2.     Name"海洋饼干"
  3.     getName : function(){ 
  4.         console.log(this.Name); 
  5.     } 
  6. }; 
  7. var bar = people.getName; 
  8.  
  9. bar();    // undefined  

通过这个小例子带大家感受一下this恶心的地方,我最开始遇到这个问题的时候也是一脸懵逼,因为代码里的this在创建时指向非常明显啊,指向自己 people 对象,但是实际上指向 window 对象,这就是我马上要和大家说的 this 绑定规则。

1 . this

什么是this ?在讨论this绑定前,我们得先搞清楚this代表什么。

  1. this是JavaScript的关键字之一。它是 对象 自动生成的一个内部对象,只能在 对象 内部使用。随着函数使用场合的不同,this的值会发生变化。
  2. this指向什么,完全取决于 什么地方以什么方式调用,而不是 创建时。(比较多人误解的地方)(它非常语义化,this在英文中的含义就是 这,这个 ,但这其实起到了一定的误导作用,因为this并不是一成不变的,并不一定一直指向当前 这个)

2 . this 绑定规则

掌握了下面介绍的4种绑定的规则,那么你只要看到函数调用就可以判断 this 的指向了。

2 .1 默认绑定

考虑下面代码:


  1. function foo(){ 
  2.     var a = 1 ; 
  3.     console.log(this.a);    // 10 
  4. var a = 10; 
  5. foo();  

这种就是典型的默认绑定,我们看看foo调用的位置,”光杆司令“,像 这种直接使用而不带任何修饰的函数调用 ,就 默认且只能 应用 默认绑定。

那默认绑定到哪呢,一般是window上,严格模式下 是undefined。

2 .2 隐性绑定

代码说话:


  1. function foo(){ 
  2.     console.log(this.a); 
  3. var obj = { 
  4.     a : 10, 
  5.     foo : foo 
  6. foo();                // ? 
  7.  
  8. obj.foo();            // ?  

答案 : undefined 10

foo()的这个写法熟悉吗,就是我们刚刚写的默认绑定,等价于打印window.a,故输出undefined ,

下面obj.foo()这种大家应该经常写,这其实就是我们马上要讨论的 隐性绑定 。

函数foo执行的时候有了上下文对象,即 obj。这种情况下,函数里的this默认绑定为上下文对象,等价于打印obj.a,故输出10 。

如果是链性的关系,比如 xx.yy.obj.foo();, 上下文取函数的直接上级,即紧挨着的那个,或者说对象链的最后一个。

2 .3 显性绑定

2 .3 .1 隐性绑定的限制

在我们刚刚的 隐性绑定中有一个致命的限制,就是上下文必须包含我们的函数 ,例:var obj = { foo : foo },如果上下文不包含我们的函数用隐性绑定明显是要出错的,不可能每个对象都要加这个函数 ,那样的话扩展,维护性太差了,我们接下来聊的就是直接 给函数强制性绑定this。

2 .3 .2 call apply bind

这里我们就要用到 js 给我们提供的函数 call 和 apply,它们的作用都是改变函数的this指向,第一个参数都是 设置this对象。

两个函数的区别:

  1. call从第二个参数开始所有的参数都是 原函数的参数。
  2. apply只接受两个参数,且第二个参数必须是数组,这个数组代表原函数的参数列表。

例如:


  1. function foo(a,b){ 
  2.     console.log(a+b); 
  3. foo.call(null,'海洋','饼干');        // 海洋饼干  这里this指向不重要就写null了 
  4. foo.apply(null, ['海洋','饼干'] );     // 海洋饼干  

除了 call,apply函数以外,还有一个改变this的函数 bind ,它和call,apply都不同。

bind只有一个函数,且不会立刻执行,只是将一个值绑定到函数的this上,并将绑定好的函数返回。例:


  1. function foo(){ 
  2.     console.log(this.a); 
  3. var obj = { a : 10 }; 
  4.  
  5. foo = foo.bind(obj); 
  6. foo();                    // 10  

(bind函数非常特别,下次和大家一起讨论它的源码)

2 .3 .2 显性绑定

开始正题,上代码,就用上面隐性绑定的例子 :


  1. function foo(){ 
  2.     console.log(this.a); 
  3. var obj = { 
  4.     a : 10            //去掉里面的foo 
  5. foo.call(obj);        // 10  

我们将隐性绑定例子中的 上下文对象 里的函数去掉了,显然现在不能用 上下文.函数 这种形式来调用函数,大家看代码里的显性绑定代码foo.call(obj),看起来很怪,和我们之前所了解的函数调用不一样。

其实call 是 foo 上的一个函数,在改变this指向的同时执行这个函数。

(想要深入理解 [call apply bind this硬绑定,软绑定,箭头函数绑定 ] 等更多黑科技 的小伙伴欢迎关注我或本文的评论,最近我会单独做一期放到一起写一篇文章)(不想看的小伙伴不用担心,不影响对本文的理解)

2 .4 new 绑定

2 .4 .1 什么是 new

学过面向对象的小伙伴对new肯定不陌生,js的new和传统的面向对象语言的new的作用都是创建一个新的对象,但是他们的机制完全不同。

创建一个新对象少不了一个概念,那就是构造函数,传统的面向对象 构造函数 是类里的一种特殊函数,要创建对象时使用new 类名()的形式去调用类中的构造函数,而js中就不一样了。

js中的只要用new修饰的 函数就是'构造函数',准确来说是 函数的构造调用,因为在js中并不存在所谓的'构造函数'。

那么用new 做到函数的构造调用后,js帮我们做了什么工作呢:

  1. 创建一个新对象。
  2. 把这个新对象的__proto__属性指向 原函数的prototype属性。(即继承原函数的原型)
  3. 将这个新对象绑定到 此函数的this上 。
  4. 返回新对象,如果这个函数没有返回其他对象。

第三条就是我们下面要聊的new绑定

2 .4 .2 new 绑定

不哔哔,看代码:


  1. function foo(){ 
  2.     this.a = 10; 
  3.     console.log(this); 
  4. foo();                    // window对象 
  5. console.log(window.a);    // 10   默认绑定 
  6.  
  7. var obj = new foo();      // foo{ a : 10 }  创建的新对象的默认名为函数名 
  8.                           // 然后等价于 foo { a : 10 };  var obj = foo; 
  9. console.log(obj.a);       // 10    new绑定  

使用new调用函数后,函数会 以自己的名字 命名 和 创建 一个新的对象,并返回。

特别注意 : 如果原函数返回一个对象类型,那么将无法返回新对象,你将丢失绑定this的新对象,例:


  1. function foo(){ 
  2.     this.a = 10; 
  3.     return new String("捣蛋鬼"); 
  4. var obj = new foo(); 
  5. console.log(obj.a);       // undefined 
  6. console.log(obj);         // "捣蛋鬼"  

2 .5 this绑定优先级

过程是些无聊的代码测试,我直接写出优先级了(想看测试过程可以私信,我帮你写一份详细的测试代码)

new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定

3 . 总结

    1.如果函数被new 修饰

this绑定的是新创建的对象,例:var bar = new foo(); 函数 foo 中的 this 就是一个叫foo的新创建的对象 , 然后将这个对象赋给bar , 这样的绑定方式叫 new绑定 .

    2.如果函数是使用call,apply,bind来调用的

this绑定的是 call,apply,bind 的第一个参数.例: foo.call(obj); , foo 中的 this 就是 obj , 这样的绑定方式叫 显性绑定 .

    3.如果函数是在某个 上下文对象 下被调用

this绑定的是那个上下文对象,例 : var obj = { foo : foo }; obj.foo(); foo 中的 this 就是 obj . 这样的绑定方式叫 隐性绑定 .

    4.如果都不是,即使用默认绑定

例:function foo(){...} foo() ,foo 中的 this 就是 window.(严格模式下默认绑定到undefined).

这样的绑定方式叫 默认绑定 .

4 . 面试题解析

1.


  1. var x = 10; 
  2. var obj = { 
  3.     x: 20, 
  4.     f: function(){ 
  5.         console.log(this.x);        // ? 
  6.         var foo = function(){  
  7.             console.log(this.x);     
  8.             } 
  9.         foo();                      // ? 
  10.     } 
  11. }; 
  12. obj.f();  

-----------------------答案---------------------

答案 : 20 10

解析 :考点 1. this默认绑定 2. this隐性绑定


  1. var x = 10; 
  2. var obj = { 
  3.     x: 20, 
  4.     f: function(){ 
  5.         console.log(this.x);    // 20 
  6.                                 // 典型的隐性绑定,这里 f 的this指向上下文 obj ,即输出 20 
  7.         function foo(){  
  8.             console.log(this.x);  
  9.             } 
  10.         foo();       // 10 
  11.                      //有些人在这个地方就想当然的觉得 foo 在函数 f 里,也在 f 里执行, 
  12.                      //那 this 肯定是指向obj 啊 , 仔细看看我们说的this绑定规则 , 对应一下很容易 
  13.                      //发现这种'光杆司令',是我们一开始就示范的默认绑定,这里this绑定的是window 
  14.     } 
  15. }; 
  16. obj.f();      

2.


  1. function foo(arg){ 
  2.     this.a = arg; 
  3.     return this 
  4. }; 
  5.  
  6. var a = foo(1); 
  7. var b = foo(10); 
  8.  
  9. console.log(a.a);    // ? 
  10. console.log(b.a);    // ?  

-----------------------答案---------------------

答案 : undefined 10

解析 :考点 1. 全局污染 2. this默认绑定

这道题很有意思,问题基本上都集中在第一undefined上,这其实是题目的小陷阱,但是追栈的过程绝对精彩

让我们一步步分析这里发生了什么:

  1. foo(1)执行,应该不难看出是默认绑定吧 , this指向了window,函数里等价于 window.a = 1,return window;
  2. var a = foo(1) 等价于 window.a = window , 很多人都忽略了var a 就是window.a ,将刚刚赋值的 1 替换掉了。
  3. 所以这里的 a 的值是 window , a.a 也是window , 即window.a = window ; window.a.a = window;
  4. foo(10) 和第一次一样,都是默认绑定,这个时候,将window.a 赋值成 10 ,注意这里是关键,原来window.a = window ,现在被赋值成了10,变成了值类型,所以现在 a.a = undefined。(验证这一点只需要将var b = foo(10);删掉,这里的 a.a 还是window)
  5. var b = foo(10); 等价于 window.b = window;

本题中所有变量的值,a = window.a = 10 , a.a = undefined , b = window , b.a = window.a = 10;

3.


  1. var x = 10; 
  2. var obj = { 
  3.     x: 20, 
  4.     f: function(){ console.log(this.x); } 
  5. }; 
  6. var bar = obj.f; 
  7. var obj2 = { 
  8.     x: 30, 
  9.     f: obj.f 
  10. obj.f(); 
  11. bar(); 
  12. obj2.f();  

-----------------------答案---------------------

答案:20 10 30

解析:传说中的送分题,考点,辨别this绑定


  1. var x = 10; 
  2. var obj = { 
  3.     x: 20, 
  4.     f: function(){ console.log(this.x); } 
  5. }; 
  6. var bar = obj.f; 
  7. var obj2 = { 
  8.     x: 30, 
  9.     f: obj.f 
  10. obj.f();    // 20 
  11.             //有上下文,this为obj,隐性绑定 
  12. bar();      // 10 
  13.             //'光杆司令' 默认绑定  ( obj.f 只是普通的赋值操作 ) 
  14. obj2.f();   //30 
  15.             //不管 f 函数怎么折腾,this只和 执行位置和方式有关,即我们所说的绑定规则        

4. 压轴题了


  1. function foo() { 
  2.     getName = function () { console.log (1); }; 
  3.     return this; 
  4. foo.getName = function () { console.log(2);}; 
  5. foo.prototype.getName = function () { console.log(3);}; 
  6. var getName = function () { console.log(4);}; 
  7. function getName () { console.log(5);} 
  8.   
  9. foo.getName ();                // ? 
  10. getName ();                    // ? 
  11. foo().getName ();              // ? 
  12. getName ();                    // ? 
  13. new foo.getName ();            // ? 
  14. new foo().getName ();          // ? 
  15. new new foo().getName ();      // ?  

-----------------------答案---------------------

答案:2 4 1 1 2 3 3

解析:考点 1. new绑定 2.隐性绑定 3. 默认绑定 4.变量污染(用词不一定准确)


  1. function foo() { 
  2.     getName = function () { console.log (1); };  
  3.             //这里的getName 将创建到全局window上 
  4.     return this; 
  5. foo.getName = function () { console.log(2);};    
  6.         //这个getName和上面的不同,是直接添加到foo上的 
  7. foo.prototype.getName = function () { console.log(3);};  
  8.         // 这个getName直接添加到foo的原型上,在用new创建新对象时将直接添加到新对象上  
  9. var getName = function () { console.log(4);};  
  10.         // 和foo函数里的getName一样, 将创建到全局window上 
  11. function getName () { console.log(5);}     
  12.         // 同上,但是这个函数不会被使用,因为函数声明的提升优先级最高,所以上面的函数表达式将永远替换 
  13.         // 这个同名函数,除非在函数表达式赋值前去调用getName(),但是在本题中,函数调用都在函数表达式 
  14.         // 之后,所以这个函数可以忽略了 
  15.          
  16.         // 通过上面对 getName的分析基本上答案已经出来了 
  17.  
  18. foo.getName ();                // 2 
  19.                                // 下面为了方便,我就使用输出值来简称每个getName函数 
  20.                                // 这里有小伙伴疑惑是在 2 和 3 之间,觉得应该是3 , 但其实直接设置 
  21.                                // foo.prototype上的属性,对当前这个对象的属性是没有影响的,如果要使 
  22.                                // 用的话,可以foo.prototype.getName() 这样调用 ,这里需要知道的是 
  23.                                // 3 并不会覆盖 2,两者不冲突 ( 当你使用new 创建对象时,这里的 
  24.                                // Prototype 将自动绑定到新对象上,即用new 构造调用的第二个作用) 
  25.                                 
  26. getName ();                    // 4  
  27.                                // 这里涉及到函数提升的问题,不知道的小伙伴只需要知道 5 会被 4 覆盖, 
  28.                                // 虽然 5 在 4 的下面,其实 js 并不是完全的自上而下,想要深入了解的 
  29.                                // 小伙伴可以看文章最后的链接 
  30.                                 
  31. foo().getName ();              // 1  
  32.                                // 这里的foo函数执行完成了两件事, 1. 将window.getName设置为1, 
  33.                                // 2. 返回window , 故等价于 window.getName(); 输出 1 
  34. getName ();                    // 1 
  35.                                // 刚刚上面的函数刚把window.getName设置为1,故同上 输出 1 
  36.                                 
  37. new foo.getName ();            // 2 
  38.                                // new 对一个函数进行构造调用 , 即 foo.getName ,构造调用也是调用啊 
  39.                                // 该执行还是执行,然后返回一个新对象,输出 2 (虽然这里没有接收新 
  40.                                // 创建的对象但是我们可以猜到,是一个函数名为 foo.getName 的对象 
  41.                                // 且__proto__属性里有一个getName函数,是上面设置的 3 函数) 
  42.                                 
  43. new foo().getName ();          // 3 
  44.                                // 这里特别的地方就来了,new 是对一个函数进行构造调用,它直接找到了离它 
  45.                                // 最近的函数,foo(),并返回了应该新对象,等价于 var obj = new foo(); 
  46.                                // obj.getName(); 这样就很清晰了,输出的是之前绑定到prototype上的 
  47.                                // 那个getName  3 ,因为使用new后会将函数的prototype继承给 新对象 
  48.                                 
  49. new new foo().getName ();      // 3 
  50.                                // 哈哈,这个看上去很吓人,让我们来分解一下: 
  51.                                // var obj = new foo(); 
  52.                                // var obj1 = new obj.getName(); 
  53.                                // 好了,仔细看看, 这不就是上两题的合体吗,obj 有getName 3, 即输出3 
  54.                                // obj 是一个函数名为 foo的对象,obj1是一个函数名为obj.getName的对象  

5 . 箭头函数的this绑定 (2017.9.18更新)

箭头函数,一种特殊的函数,不使用function关键字,而是使用=>,学名 胖箭头(2333),它和普通函数的区别:

  1. 箭头函数不使用我们上面介绍的四种绑定,而是完全根据外部作用域来决定this。(它的父级是使用我们的规则的哦)
  2. 箭头函数的this绑定无法被修改 (这个特性非常爽(滑稽))

先看个代码巩固一下:


  1. function foo(){ 
  2.     return ()=>{ 
  3.         console.log(this.a); 
  4.     } 
  5. foo.a = 10; 
  6.  
  7. // 1. 箭头函数关联父级作用域this 
  8.  
  9. var bar = foo();            // foo默认绑定 
  10. bar();                      // undefined 哈哈,是不是有小伙伴想当然了 
  11.  
  12. var baz = foo.call(foo);    // foo 显性绑定 
  13. baz();                      // 10  
  14.  
  15. // 2. 箭头函数this不可修改 
  16. //这里我们使用上面的已经绑定了foo 的 baz 
  17. var obj = { 
  18.     a : 999 
  19. baz.call(obj);              // 10  

来来来,实战一下,还记得我们之前第一个例子吗,将它改成箭头函数的形式(可以彻底解决恶心的this绑定问题):


  1. var people = { 
  2.     Name"海洋饼干"
  3.     getName : function(){ 
  4.         console.log(this.Name); 
  5.     } 
  6. }; 
  7. var bar = people.getName; 
  8.  
  9. bar();    // undefined  

====================修改后====================


  1. var people = { 
  2.     Name"海洋饼干"
  3.     getName : function(){ 
  4.         return ()=>{ 
  5.             console.log(this.Name); 
  6.         } 
  7.     } 
  8. }; 
  9. var bar = people.getName(); //获得一个永远指向people的函数,不用想this了,岂不是美滋滋? 
  10.  
  11. bar();    // 海洋饼干   

可能会有人不解为什么在箭头函数外面再套一层,直接写不就行了吗,搞这么麻烦干嘛,其实这也是箭头函数很多人用不好的地方,来来来,饼干带你飞(可把我nb坏了,插会腰):


  1. var obj= { 
  2.     that : this, 
  3.     bar : function(){ 
  4.         return ()=>{ 
  5.             console.log(this); 
  6.         } 
  7.     }, 
  8.     baz : ()=>{ 
  9.         console.log(this); 
  10.     } 
  11. console.log(obj.that);  // window 
  12. obj.bar()();            // obj 
  13. obj.baz();              // window  
  1. 我们先要搞清楚一点,obj的当前作用域是window,如 obj.that === window。
  2. 如果不用function(function有自己的函数作用域)将其包裹起来,那么默认绑定的父级作用域就是window。
  3. 用function包裹的目的就是将箭头函数绑定到当前的对象上。函数的作用域是当前这个对象,然后箭头函数会自动绑定函数所在作用域的this,即obj。

美滋滋,溜了溜了


本文作者:海洋饼干

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java中this和super的用法总结
this this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针。 this的用法在java中大体可以分为3种: 1.普通的直接引用 这种就不用讲了,this相当于是指向当前对象本身。
850 0
最新天猫面试题(含总结):线程池+并发编程+分布式设计+中间件
一面: HashMap实现原理,ConcurrentHashMap实现原理 红黑树,为什么允许局部不平衡 TCP,UDP区别,为什么可靠和不可靠 一次HTTP请求的全过程,包括域名解析、定位主机等 TCP三次握手 MySQL事务是什么?四大特性,四大隔离级别 Concurr...
1264 0
history命令解析_学习笔记
时间:2017.11.13 作者:李强 参考:man,info,magedu讲义 声明:以下英文纯属个人翻译,英文B级,欢迎纠正,盗版不纠,才能有限,希望不误人子弟为好。 1、使用目的与场景     实现快速操作命令的一种方式 2、官方说明     Display or manipulate the history list. 3、写在前面     首先这里有两个概念history list和history file。
758 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(十四)
Spring Cloud微服务架构设计与开发实战课时2.3—开发Spring Cloud微服务并注册到注册中心 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
80 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(四)
Spring Cloud微服务架构设计与开发实战课时1.4—微服务架构的典型应用场景 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
108 0
Python静态类型解析工具简介和实践
Python是一门强类型的动态类型语言,开发者可以给对象动态指定类型,但类型不匹配的操作是不被允许的。动态类型帮助开发者写代码轻松愉快,然而,俗话说:动态一时爽,重构火葬场。动态类型也带来了许多麻烦,如果动态语言能加入静态类型标记的话,会有什么好处呢?本文将主要介绍Python对静态类型的支持、社区发展的现状、类型检查工具介绍与对比,以及类型解析的实战。
3502 0
+关注
行者武松
杀人者,打虎武松也。
17142
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载