JavaScript中this指向的五种调用模式与箭头函数解析

JavaScript中的this作用域问题

通常遵循“谁调用指向谁”的原则，但JavaScript与其他面向对象语言存在差异。尽管这一原则有助于判断this指向，却无法覆盖所有情况，因此建议从函数调用的五种具体方式展开分析。

• 1. 函数式调用
• 2. 方法调用模式
• 3. 构造函数调用模式（this指向实例）
• 4. call、apply、bind
• 5. 特殊情况——箭头函数

函数式调用

var age = 10
var person = {
  age:12,
  say(){
    function f(){
      console.log(this.age)
    }
    f()
  }
}
person.say()// 10

以该模式调用函数时，this被绑定到全局对象。这被视为语言设计上的一个缺陷。若设计正确，内部函数调用时this应仍绑定到外部函数的this变量。这一设计缺陷导致方法无法利用内部函数辅助工作，因为内部函数的this被错误地绑定到了全局对象，从而无法共享该方法对对象的访问权。

这种情况不遵循“谁调用指向谁”的原则。

解决方法是在内部函数外部使用一个变量保存this。

var age = 10
var person = {
  age:12,
  say(){
    var that = this
    function f(){
      console.log(that.age)
    }
    f()
  }
}
person.say()// 12

方法调用模式

当一个函数被保存为对象的一个属性时，我们称其为方法。当调用对象的方法时，this被绑定到调用该方法的对象。

var age = 10
var person = {
  age:12,
  say(){
    console.log(this.age)
  }
}
person.say()// 12

这符合所谓的“谁调用指向谁”原则。

在数组中的特例

var arr=[
  function(){
    console.log(this)
  },
  1,
  2,
]
arr[0]()
//输出结果
[f, 1, 2]

数组本质上也是对象。虽然这种调用方式在写法上接近函数调用模式，但从打印结果来看，这显然属于方法调用模式，类似于arr.0()。

反过来思考，方法调用模式也可以写成对象属性访问的形式。

person['say']()

构造器调用模式

如果在函数前加上new关键字调用，后台会创建一个连接到该函数prototype成员的新对象，同时this会被绑定到那个新对象上。

function foo(){
  console.log('this is' + this)
}
new foo()
// this is [object]

new前缀也会改变return语句的行为：如果return的值是对象，则返回该对象；否则返回默认创建的新对象。

function foo(){
  console.log('this is ' + this.a)
  const obj = {
    a:1
  }
  return obj
}
const f1 = new foo()
console.log(f1.a) 
// this is undefied
// 1

新知识点，买一送一

这里可以看到，虽然返回的实例中确实有属性a，但在代码执行上仍然存在先后顺序。

call、apply、bind

主要作用是更改作用域。

特殊情况——箭头函数

箭头函数作为函数式调用设计失误的解决方案而提出（例a如下）。

var age = 10
var person = {
  age:12,
  say(){
    var f=()=>{
      console.log(this.age)
    }
    f()
  }
}
person.say()// 12

箭头函数的特点之一是函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

因此，call、apply、bind对箭头函数不起作用。

var age = 10
var person = {
  age:12,
  say(){
    var f=()=>{
      console.log(this.age)
    }
    f.call({age:9})
  }
}
person.say()// 12

再看下面的例子。

var age = 10
var person = {
  age:12,
  say:()=>{
    console.log(this.age)
  }
}
person.say()// 10

这是因为对象不构成单独的作用域，导致say箭头函数定义时的作用域就是全局作用域。阮一峰的es6教程中也有相关内容。

最后一个例子。

var age = 10
var person = {
  age:12,
  say:()=>{
    console.log(this.age)
  }
}
var person1 = {
  age:13,
  say(){
    var f=person.say
    f()
  }
}
person1.say()// 10

这个例子看起来和例a很像，内层函数f是一个箭头函数，虽然是person的一个属性，那么结果是不是13呢，然而并不是，还是紧扣箭头函数特征：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

该例中，person.say定义时在person内，对象不构成单独作用域，所以person.say定义时的作用域是全局作用域，所以f被调用时打印的结果为全局变量age=10

综合例题

var length = 10;
function fn(){
  console.log(this.length)
}
var obj = {
  length: 5,
  method: function(fn){
    fn()
    arguments[0]()
  }
}
obj.method(fn, 1)
// 输出结果
// 10
// 2
// 如果注释掉第一行代码 输出结果
// 0
// 2

（1）首先如果不注释第一行代码，obj调用自己的method方法，传了两个参数，第一个是在全局定义的函数fn，第二个参数是number类型的常量

进入method，立即调用fn，因为fn是一个函数式调用，所以this指向全局，也就是window，打印结果是10

再看接下来执行的arguments[0]()，arguments是一个数组，表示函数的实参列表，也就是说这个数组中包含两个元素，第一个是传进去的fn，第二个是传进去的常量1，然后它调用了第0个元素表示的函数，所以这里是方法调用模式中的特例，作为数组元素被调用，this指向数组本身，我们经常会忽略数组中其实默认是有length属性的，即使在写for循环的时候经常会用，数组长度为2，所以打印结果是2

（2）如果注释了第一行代码，不在全局定义length属性，正常分析，length未定义，返回undefined，那么答案就错了，事实上，全局window是有length属性的，默认值为0

这就是这道题隐藏最深的点了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。