foo.call(obj): 第一层函数foo通过call将this指向obj，打印1；第二层函数为匿名函数，默认绑定，打印2。

对象中的call

使用new来构建函数，会执行如下四部操作：

1. 创建一个空的简单JavaScript对象（即{}）；
2. 为新创建的空对象添加属性__proto__，将该属性链接至构造函数的原型对象 ；
3. 为新创建的空对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。

首先从左往右看：new Foo属于不带参数列表的new(优先级19)，Foo.getName属于成员访问(优先级20)，getName()属于函数调用(优先级20)，同样优先级遵循从左往右执行。

• Foo.getName执行，获取到Foo上的getName属性
• 此时原表达式变为new (Foo.getName)()，new (Foo.getName)()为带参数列表(优先级20)，(Foo.getName)()属于函数调用(优先级20)，从左往右执行
• new (Foo.getName)()执行，打印2，并返回一个以Foo.getName()为构造函数的实例

这里有一个误区：很多人认为这里的new是没做任何操作的的，执行的是函数调用。那么如果执行的是Foo.getName()，调用返回值为undefined，new undefined会发生报错，并且我们可以验证一下该表达式的返回结果。

 

 可见在成员访问之后，执行的是带参数列表格式的new操作。

 

new Foo().getName()

• 同上一样分析，先执行new Foo()，返回一个以Foo为构造函数的实例
• Foo的实例对象上没有getName方法，沿原型链查找到Foo.prototype.getName方法，打印3

new new Foo().getName()

从左往右分析: 第一个new不带参数列表(优先级19)，new Foo()带参数列表(优先级20)，剩下的成员访问和函数调用优先级都是20

• new Foo()执行，返回一个以Foo为构造函数的实例
• 在执行成员访问，Foo实例对象在Foo.prototype查找到getName属性
• 执行new (new Foo().getName)()，返回一个以 Foo.prototype.getName()为构造函数的实例，打印3

 

 

箭头函数

箭头函数没有自己的this，它的this指向外层作用域的this，且指向函数定义时的this而非执行时。

1. this指向外层作用域的this: 箭头函数没有this绑定，但它可以通过作用域链查到外层作用域的this
2. 指向函数定义时的this而非执行时: JavaScript是静态作用域，就是函数定义之后，作用域就定死了，跟它执行时的地方无关。更详细的介绍见JavaScript之静态作用域与动态作用域。

对象方法使用箭头函数

 

 上文说到，箭头函数的this通过作用域链查到，intro函数的上层作用域为window。

 

箭头函数与普通函数比较

 

 

• obj.intro2()(): 不做赘述，打印My name is tom
• obj.intro()(): obj.intro()返回箭头函数，箭头函数的this取决于它的外层作用域，因此箭头函数的this指向obj，打印My name is zc

箭头函数与普通函数的嵌套

• obj1.intro()(): 类似题目7.2，打印obj1，obj1
• obj2.intro()(): obj2.intro()为箭头函数，this为外层作用域this，指向window。返回匿名函数为默认绑定。打印window，window
• obj3.intro()(): obj3.intro()与obj2.intro()相同，返回值为箭头函数，外层作用域intro的this指向window，打印window，window

new碰上箭头函数

• zc是new User实例，因此构造函数User的this指向zc
• zc.intro(): 打印My name is zc
• zc.howOld(): howOld为箭头函数，箭头函数this由外层作用域决定，且指向函数定义时的this，外层作用域为User，this指向zc，打印My age is 24

 

call碰上箭头函数

箭头函数由于没有this，不能通过call\apply\bind来修改this指向，但可以通过修改外层作用域的this来达成间接修改

• obj1.intro.call(obj2)(): 第一层函数为普通函数，通过call修改this为obj2，打印obj2。第二层函数为箭头函数，它的this与外层this相同，同样打印obj2。
• obj1.intro().call(obj2): 第一层函数打印obj1，第二次函数为箭头函数，call无效，它的this与外层this相同，打印obj1
• obj1.intro2.call(obj2)(): 第一层为箭头函数，call无效，外层作用域为window，打印window；第二次为普通匿名函数，默认绑定，打印window
• obj1.intro2().call(obj2): 与上同，打印window；第二层为匿名函数，call修改this为obj2，打印obj2

箭头函数扩展

总结

• 箭头函数没有this，它的this是通过作用域链查到外层作用域的this，且指向函数定义时的this而非执行时。
• 不可以用作构造函数，不能使用new命令，否则会报错
• 箭头函数没有arguments对象，如果要用，使用rest参数代替
• 不可以使用yield命令，因此箭头函数不能用作Generator函数。
• 不能用call/apply/bind修改this指向，但可以通过修改外层作用域的this来间接修改。
• 箭头函数没有prototype属性。

避免使用场景

箭头函数定义对象方法

 

箭头函数不能作为构造函数

 

综合题

对象综合体

 

 

隐式绑定丢失

• foo.bar(): 隐式绑定，打印20
• (foo.bar)(): 上面提到过运算符优先级的知识，成员访问与函数调用优先级相同，默认从左到右，因此括号可有可无，隐式绑定，打印20
• (foo.bar = foo.bar)()：隐式绑定丢失，给foo.bar起别名，虽然名字没变，但是foo.bar上已经跟foo无关了，默认绑定，打印10
• (foo.bar, foo.bar)(): 隐式绑定丢失，起函数别名，将逗号表达式的值(第二个foo.bar)赋值给新变量，之后执行新变量所指向的函数，默认绑定，打印10。

上面那说法有可能有几分难理解，隐式绑定有个定性条件，就是要满足XXX.fn()格式，如果破坏了这种格式，一般隐式绑定都会丢失。

arguments

这个题要注意一下，有坑。

• fn(): 默认绑定，打印10

• arguments[0](): 这种执行方式看起来就怪怪的，咱们把它展开来看看：

  1. arguments是一个类数组，arguments展开，应该是下面这样：

  arguments: {
      0: fn,
      1: 1,
      length: 2
  }
  
  

  1. arguments[0]: 这是访问对象的属性0？0不好理解，咱们把它稍微一换，方便一下理解：

  arguments: {
      fn: fn,
      1: 1,
      length: 2
  }
  
  

  3. 到这里大家应该就懂了，隐式绑定，fn函数this指向arguments，打印2

压轴题

fn.call(null) 或者 fn.call(undefined) 都相当于fn()

1. obj.fn为立即执行函数: 默认绑定，this指向window

   我们来一句一句的分析：

   • var number: 立即执行函数的AO中添加number属性，值为undefined
   • this.number *= 2: window.number = 10
   • number = number * 2: 立即执行函数AO中number值为undefined，赋值后为NaN
   • number = 3: AO中number值由NaN修改为3
   • 返回匿名函数，形成闭包

   此时的obj可以类似的看成以下代码(注意存在闭包):

   obj = {
      number: 3,
      fn: function () {
           var num = this.number;
           this.number *= 2;
           console.log(num);
           number *= 3;
           console.log(number);
       }
   }
   复制代码

2. myFun.call(null): 相当于myFun()，隐式绑定丢失，myFun的this指向window。

   依旧一句一句的分析：

   • var num = this.number: this指向window，num = window.num = 10
   • this.number *= 2: window.number = 20
   • console.log(num): 打印10
   • number *= 3: 当前AO中没有number属性，沿作用域链可在立即执行函数的AO中查到number属性，修改其值为9
   • console.log(number): 打印立即执行函数AO中的number，打印9

3. obj.fn(): 隐式绑定，fn的this指向obj

   继续一步一步的分析：

   • var num = this.number: this->obj，num = obj.num = 3
   • this.number *= 2: obj.number *= 2 = 6
   • console.log(num): 打印num值，打印3
   • number *= 3: 当前AO中不存在number，继续修改立即执行函数AO中的number，number *= 3 = 27
   • console.log(number): 打印27

4. console.log(window.number): 打印20

这里解释一下，为什么myFun.call(null)执行时，找不到number变量，是去找立即执行函数AO中的number，而不是找window.number: JavaScript采用的静态作用域，当定义函数后，作用域链就已经定死。(更详细的解释文章最开始的推荐中有)

总结

• 默认绑定: 非严格模式下this指向全局对象，严格模式下this会绑定到undefined
• 隐式绑定: 满足XXX.fn()格式，fn的this指向XXX。如果存在链式调用，this永远指向最后调用它的那个对象
• 隐式绑定丢失：起函数别名，通过别名运行；函数作为参数会造成隐式绑定丢失。
• 显示绑定: 通过call/apply/bind修改this指向
• new绑定: 通过new来调用构造函数，会生成一个新对象，并且把这个新对象绑定为调用函数的this。
• 箭头函数绑定: 箭头函数没有this，它的this是通过作用域链查到外层作用域的this，且指向函数定义时的this而非执行时

 

转载于https://juejin.cn/post/7019470820057546766