函数调用中的参数太多_JS 中 this 在各个场景下的指向

作者：Dmitri Pavlutin
译者：前端小智
来源：dmitripavlutin.

原文的篇幅非常长，不过内容太过于吸引我，还是忍不住要翻译出来。我将原文分为上下两部分

---

1. this 的奥秘

很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。this 的功能很强大，但需要一定付出才能慢慢理解它。

对Java、PHP或其他标准语言来看，this 表示类方法中当前对象的实例。大多数情况下，this 不能在方法之外使用，这样就比较不会造成混淆。

在JS中情况就有所不同: this表示函数的当前执行上下文，JS 中函数调用主要有以下几种方式：

• 函数调用: alert('Hello World!')

• 方法调用: console.log('Hello World!')

• 构造函数: new RegExp('\\d')

• 隐式调用:  alert.call(undefined, 'Hello World!')

每种调用类型以自己的方式定义上下文，所以就很容易产生混淆。

此外，严格模式也会影响执行上下文。

理解this关键是要清楚的知道函数调用及其如何影响上下文。

本文主要说明函数的调用方式及如何影响 this，并且说明执行上下文的常见陷阱。

在开始之前，先知道几个术语：

调用函数正在执行创建函数体的代码，或者只是调用函数。例如，parseInt函数调用是parseInt('15')。

• 函数调用：执行构成函数主体的代码：例如，parseInt函数调用是parseInt('15')。

• 调用的上下文：指 this 在函数体内的值。例如，map.set('key', 'value')的调用上下文是 map。

• 函数的作用域：是在函数体中可访问的变量、对象和函数的集合。

2.函数调用

当一个表达式为函数接着一个(，一些用逗号分隔的参数以及一个)时，函数调用被执行，例如parseInt('18')。

函数调用表达式不能是属性方式的调用，如 obj.myFunc()，这种是创建一个方法调用。再如 [1,5].join(',')不是函数调用，而是方法调用，这种区别需要记住哈，很重要滴。

函数调用的一个简单示例：

function hello(name) {
  return 'Hello ' + name + '!';
}
// 函数调用
const message = hello('World');
console.log(message); // => 'Hello World!'

hello('World')是函数调用: hello表达式等价于一个函数，跟在它后面的是一对括号以及'World'参数。

一个更高级的例子是IIFE(立即调用的函数表达式)

const message = (function(name) {
   return 'Hello ' + name + '!';
})('World');
console.log(message) // => 'Hello World!'

IIFE也是一个函数调用:第一对圆括号(function(name) {...})是一个表达式，它的计算结果是一个函数对象，后面跟着一对圆括号，圆括号的参数是“World”。

2.1. 在函数调用中的this

this 在函数调用中是一个全局对象

局对象由执行环境决定。在浏览器中，this是 window 对象。

在函数调用中，执行上下文是全局对象。

再来看看下面函数中的上下文又是什么鬼：

function sum(a, b) {
   console.log(this === window); // => true
   this.myNumber = 20; // 将'myNumber'属性添加到全局对象
   return a + b;
}
// sum() is invoked as a function
// sum() 中的 `this` 是一个全局对象(window)
sum(15, 16);     // => 31
window.myNumber; // => 20

在调用sum(15,16)时，JS 自动将this设置为全局对象，在浏览器中该对象是window。

当this在任何函数作用域(最顶层作用域:全局执行上下文)之外使用，this 表示 window 对象

console.log(this === window); // => true
this.myString = 'Hello World!';
console.log(window.myString); // => 'Hello World!'


<script type="text/javascript">console.log(this === window); // => truescript>

2.2 严格模式下的函数调用 this 又是什么样的

this 在严格模式下的函数调用中为 undefined

严格模式是在 ECMAScript 5.1中引入的，它提供了更好的安全性和更强的错误检查。

要启用严格模式，函数头部写入use strict 即可。

启用后，严格模式会影响执行上下文，this 在常规函数调用中值为undefined。与上述情况2.1相反，执行上下文不再是全局对象。

严格模式函数调用示例：

function multiply(a, b) {
  'use strict'; // 启用严格模式
  console.log(this === undefined); // => true
  return a * b;
}
multiply(2, 5); // => 10

当multiply(2,5)作为函数调用时，this是undefined。

严格模式不仅在当前作用域中有效，在内部作用域中也是有效的(对于在内部声明的所有函数):

function execute() {
   'use strict'; // 开启严格模式  
   function concat(str1, str2) {
     // 严格模式仍然有效  
     console.log(this === undefined); // => true
     return str1 + str2;
   }
   // concat() 在严格模式下作为函数调用
   // this in concat() is undefined
   concat('Hello', ' World!'); // => "Hello World!"
}
execute();

'use strict'被插入到执行体的顶部，在其作用域内启用严格模式。因为函数concat是在执行的作用域中声明的，所以它继承了严格模式。

单个JS文件可能包含严格和非严格模式。因此，对于相同的调用类型，可以在单个脚本中具有不同的上下文行为：

function nonStrictSum(a, b) {
  // 非严格模式
  console.log(this === window); // => true
  return a + b;
}
function strictSum(a, b) {
  'use strict';
  // 启用严格模式
  console.log(this === undefined); // => true
  return a + b;
}

nonStrictSum(5, 6); // => 11
strictSum(8, 12); // => 20

2.3 陷阱:`this` 在内部函数中的时候

函数调用的一个常见陷阱是，认为this在内部函数中的情况与外部函数中的情况相同。

正确地说，内部函数的上下文只依赖于它的调用类型，而不依赖于外部函数的上下文。

要将 this 设置为所需的值，可以通过 .call()或.apply()修改内部函数的上下文或使用.bind()创建绑定函数。

下面的例子是计算两个数的和：

const numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       console.log(this === numbers); // => false
       return this.numberA + this.numberB;
     }
     return calculate();
   }
};
numbers.sum(); // => NaN 

sum()是对象上的方法调用，所以sum中的上下文是numbers对象。calculate函数是在sum中定义的，你可能希望在calculate()中this也表示number对象。

calculate()是一个函数调用(不是方法调用)，它将this作为全局对象window(非严格模下)。即使外部函数sum将上下文作为number对象，它在calculate里面没有影响。

sum()的调用结果是NaN，不是预期的结果5 + 10 = 15，这都是因为没有正确调用calculate。

为了解决这个问题，calculate函数中上下文应该与 sum 中的一样，以便可以访问numberA和numberB属性。

一种解决方案是通过调用calculator.call(this)手动将calculate上下文更改为所需的上下文。

const numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       console.log(this === numbers); // => true
       return this.numberA + this.numberB;
     }
     // 使用 .call() 方法修改上下文
     return calculate.call(this);
   }
};
numbers.sum(); // => 15

call(this)像往常一样执行calculate函数，但 call 会把上下文修改为指定为第一个参数的值。

现在this.numberA + this.numberB相当于numbers.numberA + numbers.numberB。该函数返回预期结果5 + 10 = 15。

另一种就是使用箭头函数

const numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     const calculate = () => {
       console.log(this === numbers); // => true
       return this.numberA + this.numberB;
     }
     return calculate();
   }
};
numbers.sum(); // => 15

3.方法调用

方法是存储在对象属性中的函数。例如

const myObject = {
  // helloFunction 是一个方法
  helloFunction: function() {
    return 'Hello World!';
  }
};
const message = myObject.helloFunction();

helloFunction是myObject的一个方法，要调用该方法，可以这样子调用 :myObject.helloFunction。

当一个表达式以属性访问的形式执行时，执行的是方法调用，它相当于以个函数接着(，一组用逗号分隔的参数以及)。

利用前面的例子，myObject.helloFunction()是对象myObject上的一个helloFunction的方法调用。[1, 2].join(',') 或/\s/.test('beautiful world')也被认为是方法调用。

区分函数调用和方法调用非常重要，因为它们是不同的类型。主要区别在于方法调用需要一个属性访问器形式来调用函数(obj.myFunc()或obj['myFunc']())，而函数调用不需要(myFunc())。

['Hello', 'World'].join(', '); // 方法调用
({ ten: function() { return 10; } }).ten(); // 方法调用
const obj = {};
obj.myFunction = function() {
  return new Date().toString();
};
obj.myFunction(); // 方法调用

const otherFunction = obj.myFunction;
otherFunction();     // 函数调用
parseFloat('16.60'); // 函数调用
isNaN(0);            // 函数调用

理解函数调用和方法调用之间的区别有助于正确识别上下文。

3.1 方法调用中 this 是肿么样

在方法调用中，this是拥有这个方法的对象

当调用对象上的方法时，this就变成了对象本身。

创建一个对象，该对象有一个递增数字的方法

const calc = {
  num: 0,
  increment: function() {
    console.log(this === calc); // => true
    this.num += 1;
    return this.num;
  }
};
// method invocation. this is calc
calc.increment(); // => 1
calc.increment(); // => 2

调用calc.increment()使increment函数的上下文成为calc对象。所以使用this.num来增加num属性是有效的。

再来看看另一个例子。JS对象从原型继承一个方法，当在对象上调用继承的方法时，调用的上下文仍然是对象本身

const myDog = Object.create({
  sayName: function() {
     console.log(this === myDog); // => true
     return this.name;
  }
});
myDog.name = 'Milo';
// 方法调用 this 指向 myDog
myDog.sayName(); // => 'Milo'

Object.create()创建一个新对象myDog，并根据第一个参数设置其原型。myDog对象继承sayName方法。

执行myDog. sayname()时，myDog是调用的上下文。

在EC6 class 语法中，方法调用上下文也是实例本身

class Planet {
  constructor(name) {
    this.name = name;    
  }
  getName() {
    console.log(this === earth); // => true
    return this.name;
  }
}
var earth = new Planet('Earth');
// method invocation. the context is earth
earth.getName(); // => 'Earth'

3.2 陷阱:将方法与其对象分离

方法可以从对象中提取到一个单独的变量const alone = myObj.myMethod。当方法单独调用时，与原始对象alone()分离，你可能认为当前的this就是定义方法的对象myObject。

如果方法在没有对象的情况下调用，那么函数调用就会发生，此时的this指向全局对象window严格模式下是undefined。

下面的示例定义了Animal构造函数并创建了它的一个实例:myCat。然后setTimout()在1秒后打印myCat对象信息

function Animal(type, legs) {
  this.type = type;
  this.legs = legs;  
  this.logInfo = function() {
    console.log(this === myCat); // => false
    console.log('The ' + this.type + ' has ' + this.legs + ' legs');
  }
}
const myCat = new Animal('Cat', 4);
// The undefined has undefined legs 
setTimeout(myCat.logInfo, 1000); 

你可能认为setTimout调用myCat.loginfo()时，它应该打印关于myCat对象的信息。

不幸的是，方法在作为参数传递时与对象是分离，setTimout(myCat.logInfo)以下情况是等效的：

setTimout(myCat.logInfo);
// 等价于
const extractedLogInfo = myCat.logInfo;
setTimout(extractedLogInfo);

将分离的logInfo作为函数调用时，this是全局 window,所以对象信息没有正确地打印。

函数可以使用.bind()方法与对象绑定,就可以解决 this 指向的问题。

function Animal(type, legs) {
  this.type = type;
  this.legs = legs;  
  this.logInfo = function() {
    console.log(this === myCat); // => true
    console.log('The ' + this.type + ' has ' + this.legs + ' legs');
  };
}
const myCat = new Animal('Cat', 4);
// logs "The Cat has 4 legs"
setTimeout(myCat.logInfo.bind(myCat), 1000);

myCat.logInfo.bind(myCat)返回一个新函数，它的执行方式与logInfo完全相同，但是此时的 this 指向 myCat，即使在函数调用中也是如此。

另一种解决方案是将logInfo()方法定义为一个箭头函数：

function Animal(type, legs) {
  this.type = type;
  this.legs = legs;  
  this.logInfo = () => {
    console.log(this === myCat); // => true
    console.log('The ' + this.type + ' has ' + this.legs + ' legs');
  };
}
const myCat = new Animal('Cat', 4);
// logs "The Cat has 4 legs"
setTimeout(myCat.logInfo, 1000);

4. 构造函数调用

当new关键词紧接着函数对象,(,一组逗号分隔的参数以及)时被调用，执行的是构造函数调用如new RegExp('\\d')。

声明了一个Country函数，并且将它作为一个构造函数调用：

function Country(name, traveled) {
   this.name = name ? name : 'United Kingdom';
   this.traveled = Boolean(traveled); 
}
Country.prototype.travel = function() {
  this.traveled = true;
};
// 构造函数调用
const france = new Country('France', false);
// 构造函数调用
const unitedKingdom = new Country;

france.travel(); // Travel to France

new Country('France', false)是Country函数的构造函数调用。它的执行结果是一个name属性为'France'的新的对象。如果这个构造函数调用时不需要参数，那么括号可以省略：new Country。

从ES6开始，JS 允许用class关键词来定义构造函数

class City {
  constructor(name, traveled) {
    this.name = name;
    this.traveled = false;
  }
  travel() {
    this.traveled = true;
  }
}
// Constructor invocation
const paris = new City('Paris', false);
paris.travel();

new City('Paris')是构造函数调用。这个对象的初始化由这个类中一个特殊的方法constructor来处理。其中，this指向新创建的对象。

构造函数创建了一个新的空的对象，它从构造函数的原型继承了属性。构造函数的作用就是去初始化这个对象。可能你已经知道了，在这种类型的调用中，上下文指向新创建的实例。

当属性访问myObject.myFunction前面有一个new关键词时，JS会执行构造函数调用而不是原来的方法调用。

例如new myObject.myFunction()：它相当于先用属性访问把方法提取出来extractedFunction = myObject.myFunction，然后利用把它作为构造函数创建一个新的对象：new extractedFunction()。

4.1. 构造函数中的 this

在构造函数调用中 this 指向新创建的对象

构造函数调用的上下文是新创建的对象。它利用构造函数的参数初始化新的对象，设定属性的初始值，添加事件处理函数等等。

来看看下面示例中的上下文

function Foo () {
  console.log(this instanceof Foo); // => true
  this.property = 'Default Value';
}
// Constructor invocation
const fooInstance = new Foo();
fooInstance.property; // => 'Default Value'

new Foo() 正在进行构造函数调用，其中上下文是fooInstance。在Foo内部初始化对象：this.property被赋值为默认值。

同样的情况在用class语法(从ES6起)时也会发生，唯一的区别是初始化在constructor方法中进行:

class Bar {
  constructor() {
    console.log(this instanceof Bar); // => true
    this.property = 'Default Value';
  }
}
// Constructor invocation
const barInstance = new Bar();
barInstance.property; // => 'Default Value'

4.2. 陷阱: 忘了使用 new

有些JS函数不是只在作为构造函数调用的时候才创建新的对象，作为函数调用时也会，例如RegExp：

var reg1 = new RegExp('\\w+');
var reg2 = RegExp('\\w+');

reg1 instanceof RegExp;      // => true
reg2 instanceof RegExp;      // => true
reg1.source === reg2.source; // => true

当执行的 new RegExp('\\w+')和RegExp('\\w+')时，JS 会创建等价的正则表达式对象。

使用函数调用来创建对象存在一个潜在的问题(不包括工厂模式)，因为一些构造函数可能会忽略在缺少new关键字时初始化对象的逻辑。

下面的例子说明了这个问题：

function Vehicle(type, wheelsCount) {
  this.type = type;
  this.wheelsCount = wheelsCount;
  return this;
}
// 忘记使用 new 
const car = Vehicle('Car', 4);
car.type;       // => 'Car'
car.wheelsCount // => 4
car === window  // => true

Vehicle是一个在上下文对象上设置type和wheelsCount属性的函数。

当执行Vehicle('Car'， 4)时，返回一个对象Car，它具有正确的属性:Car.type 为 Car和Car.wheelsCount 为4，你可能认为它很适合创建和初始化新对象。

然而，在函数调用中，this是window对象 ，因此 Vehicle('Car'，4)在 window 对象上设置属性。显然这是错误，它并没有创建新对象。

当你希望调用构造函数时，确保你使用了new操作符：

function Vehicle(type, wheelsCount) {
  if (!(this instanceof Vehicle)) {
    throw Error('Error: Incorrect invocation');
  }
  this.type = type;
  this.wheelsCount = wheelsCount;
  return this;
}
// Constructor invocation
const car = new Vehicle('Car', 4);
car.type               // => 'Car'
car.wheelsCount        // => 4
car instanceof Vehicle // => true

// Function invocation. Throws an error.
const brokenCar = Vehicle('Broken Car', 3);

new Vehicle('Car'，4) 运行正常：创建并初始化一个新对象，因为构造函数调用中时使用了new关键字。

在构造函数里添加了一个验证this instanceof Vehicle来确保执行的上下文是正确的对象类型。如果this不是Vehicle，那么就会报错。这样，如果执行Vehicle('Broken Car', 3)(没有new)，我们会得到一个异常：Error: Incorrect invocation。

原文：https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/

交流

我是小智，公众号「大迁世界」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，即可看到福利，你懂的。

延伸阅读

JS中函数式编程基本原理简介

JS中轻松遍历对象属性的几种方式

什么时候不使用箭头函数