apply()、call()、bind()

作者: 茕茕微凉 | 来源:发表于2019-01-12 09:47 被阅读0次

本文主要参考各个资料总结而来：

方法介绍

回顾一下 “this”

我们了解到，在面向对象的 JS 中，一切都是对象。因为一切都是对象，我们开始明白我们可以为函数设置并访问额外的属性。

通过原型给函数设置属性并且添加其他方法非常棒...但是我们如何访问它们？！？？？！
我们介绍过 this关键字并花了一些时间来熟悉 this 关键字，但是一旦我们这样做了，我们就开始意识到它是多么有用了。this 在函数内部使用，并且总是引用单个对象 — 这个对象会在使用 “this” 的地方调用函数。
但是生活肯定都不是完美的。有时候我们会失去 this 的引用。当这种情况发生时，我们最终使用了令人困惑的解决方法去保存我们对于 this 的引用。让我们通过 localSorage 练习来看看这个方法吧：

//Appending Delete Button if cart has products
if(this.isEmpty()){
  var deleteBtn = document.createElenent("button");
deleteBtn.innerHTML = "Empty Cart";
deleteBtn.className = "deleteBtn";

var myCart = this;
//when calling method on deleteBtn ,"this" becomes deleteBtn and we lose the context of myCart
//this is why we save a reference to myCart as "this"

deleteBtn.addEventListentener("click",function(){
  myCart .clearCart();
})
cartDOM.appendChild(deleteBtn);
}

那为什么我需要保存 this 引用呢？因为在 deleteBtn.addEventListener 中，this 指向了 deleteBtn 对象。这并不太好。有更好的解决方案吗？

call()、apply() 和 bind() — 一个新的希望

到目前为止，我们已将函数视为由名称（可选，也可以是匿名函数）及其在调用时执行的代码所组成的对象。但这并不是全部真相。作为一个热爱真理的人，我必须让你知道一个函数实际上看起来更接近下面的图像：

函数

bind()

官方文档说： bind() 方法创建一个新函数，在调用时，将其 this 关键字设置为所需的值。

它让我们在调用函数时明确定义 this 的值。我们来看看 cooooode：

var pokemon = {
    firstname: 'Pika',
    lastname: 'Chu ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function() {
    console.log(this.getPokeName() + 'I choose you!');
};

var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. 'this' of pokemon === pokemon now

logPokemon(); // 'Pika Chu I choose you!'

我们来逐个分析。当我们使用了 bind()方法：

JS 引擎创建了一个新的 pokemonName 的实例，并将 pokemon 绑定到 this 变量。重要的是要理解它复制了 pokemonName 函数。
在创建了 pokemonName 函数的副本之后，它可以调用 logPokemon() 方法，尽管它最初不在pokemon 对象上。它现在将识别其属性（Pika 和 Chu）及其方法。

很酷的是，在我们 bind() 一个值后，我们可以像使用任何其他正常函数一样使用该函数。我们甚至可以更新函数来接受参数，并像这样传递它们：

var pokemon = {
    firstname: 'Pika',
    lastname: 'Chu ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + 'I choose you!');
    console.log(this.getPokeName() + ' loves ' + snack + ' and ' + hobby);
};

var logPokemon = pokemonName.bind(pokemon); // creates new object and binds pokemon. 'this' of pokemon === pokemon now

logPokemon('sushi', 'algorithms'); // Pika Chu  loves sushi and algorithms

call(), apply()

call() 方法的官方文档说：call() 方法调用一个给定 this 值的函数，并单独提供参数。

这意味着，我们可以调用任何函数，并明确指定 this 应该在调用函数中引用的内容。真的类似于 bind() 方法！这绝对可以让我们免于编写 hacky 代码（即使我们仍然是 hackerzzz）。

bind() 和 call() 之间的主要区别在于 call() 方法：

支持接受其他参数
当它被调用的时候，立即执行函数。
call() 方法不会复制正在调用它的函数。

call() 和apply() 使用于完全相同的目的。 它们工作方式之间的唯一区别是 call() 期望所有参数都单独传递，而 apply() 需要所有参数的数组。例如：

var pokemon = {
    firstname: 'Pika',
    lastname: 'Chu ',
    getPokeName: function() {
        var fullname = this.firstname + ' ' + this.lastname;
        return fullname;
    }
};

var pokemonName = function(snack, hobby) {
    console.log(this.getPokeName() + ' loves ' + snack + ' and ' + hobby);
};

pokemonName.call(pokemon,'sushi', 'algorithms'); // Pika Chu  loves sushi and algorithms
pokemonName.apply(pokemon,['sushi', 'algorithms']); // Pika Chu  loves sushi and algorithms

注意，apply 接受数组，call 接受每个单独的参数。

apply（）

apply() 应用某一对象的一个方法，用另一个对象替换当前对象。即方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

注意：call()方法的作用和 apply() 方法类似，区别就是call()方法接受的是参数列表，而apply()方法接受的是一个参数数组。

语法

func.apply(thisArg, [argsArray])

参数
thisArg
可选的。在 func 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
argsArray
可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

参数

调用有指定this值和参数的函数的结果。

描述

如果 argsArray不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argsArray和 thisArg任何一个参数，那么 Global 对象将被用作 thisObj，并且无法被传递任何参数。
在调用一个存在的函数时，你可以为其指定一个 this 对象。 this 指当前对象，也就是正在调用这个函数的对象。使用 apply，你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。

apply 与 call() 非常相似，不同之处在于提供参数的方式。apply 使用参数数组而不是一组参数列表。apply 可以使用数组字面量（array literal），如 fun.apply(this, ['eat', 'bananas'])，或数组对象，如 fun.apply(this, new Array('eat', 'bananas'))。

你也可以使用 arguments对象作为 argsArray 参数。 arguments 是一个函数的局部变量。它可以被用作被调用对象的所有未指定的参数。这样，你在使用apply函数的时候就不需要知道被调用对象的所有参数。你可以使用arguments来把所有的参数传递给被调用对象。被调用对象接下来就负责处理这些参数。

从 ECMAScript 第5版开始，可以使用任何种类的类数组对象，就是说只要有一个 length 属性和(0..length-1)范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似 {'length': 2, '0': 'eat', '1': 'bananas'} 形式的对象。

需要注意：Chrome 14 以及 Internet Explorer 9 仍然不接受类数组对象。如果传入类数组对象，它们会抛出异常。

示例

用 apply 将数组添加到另一个数组
我们可以使用push将元素追加到数组中。并且，因为push接受可变数量的参数，我们也可以一次推送多个元素。但是，如果我们传递一个数组来推送，它实际上会将该数组作为单个元素添加，而不是单独添加元素，因此我们最终得到一个数组内的数组。如果那不是我们想要的怎么办？在这种情况下，concat确实具有我们想要的行为，但它实际上并不附加到现有数组，而是创建并返回一个新数组。但是我们想要附加到我们现有的阵列......那么现在呢？写一个循环？当然不是吗？

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]

使用apply和内置函数
聪明的apply用法允许你在某些本来需要写成遍历数组变量的任务中使用内建的函数。在接下里的例子中我们会使用Math.max/Math.min来找出一个数组中的最大/最小值。

/* 找出数组中最大/小的数字 */
var numbers = [5, 6, 2, 3, 7];

/* 应用(apply) Math.min/Math.max 内置函数完成 */
var max = Math.max.apply(null, numbers); /* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);

/* 代码对比： 用简单循环完成 */
max = -Infinity, min = +Infinity;

for (var i = 0; i < numbers.length; i++) {
  if (numbers[i] > max)
    max = numbers[i];
  if (numbers[i] < min) 
    min = numbers[i];
}

但是当心：如果用上面的方式调用apply，会有超出JavaScript引擎的参数长度限制的风险。当你对一个方法传入非常多的参数（比如一万个）时，就非常有可能会导致越界问题, 这个临界值是根据不同的 JavaScript 引擎而定的（JavaScript 核心中已经做了硬编码参数个数限制在65536），因为这个限制（实际上也是任何用到超大栈空间的行为的自然表现）是未指定的. 有些引擎会抛出异常。更糟糕的是其他引擎会直接限制传入到方法的参数个数，导致参数丢失。举个例子：如果某个引擎限制了方法参数最多为4个（实际真正的参数个数限制当然要高得多了, 这里只是打个比方）, 上面的代码中, 真正通过 apply传到目标方法中的参数为 5, 6, 2, 3 而不是完整的数组。

如果你的参数数组可能非常大，那么推荐使用下面这种策略来处理：将参数数组切块后循环传入目标方法：

function minOfArray(arr) {
  var min = Infinity;
  var QUANTUM = 32768;

  for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
    var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
    min = Math.min(submin, min);
  }

  return min;
}

var min = minOfArray([5, 6, 2, 3, 7]);

使用apply来链接构造器
你可以使用apply来链接一个对象构造器，类似于Java。在接下来的例子中我们会创建一个全局Function 对象的construct方法，来使你能够在构造器中使用一个类数组对象而非参数列表。

Function.prototype.construct = function (aArgs) {
  var oNew = Object.create(this.prototype);
  this.apply(oNew, aArgs);
  return oNew;
};

注意: 上面使用的Object.create()方法相对来说比较新。另一种可选的方法，请考虑如下替代方法：

Using Object.__proto__:

Function.prototype.construct = function (aArgs) {
  var oNew = {};
  oNew.__proto__ = this.prototype;
  this.apply(oNew, aArgs);
  return oNew;
};

使用闭包：

Function.prototype.construct = function(aArgs) {
  var fConstructor = this, fNewConstr = function() {
    fConstructor.apply(this, aArgs);
  };
  fNewConstr.prototype = fConstructor.prototype;
  return new fNewConstr();
};

使用 Function 构造器：

Function.prototype.construct = function (aArgs) {
  var fNewConstr = new Function("");
  fNewConstr.prototype = this.prototype;
  var oNew = new fNewConstr();
  this.apply(oNew, aArgs);
  return oNew;
};

使用示例

function MyConstructor () {
    for (var nProp = 0; nProp < arguments.length; nProp++) {
        this["property" + nProp] = arguments[nProp];
    }
}

var myArray = [4, "Hello world!", false];
var myInstance = MyConstructor.construct(myArray);

console.log(myInstance.property1);                // logs "Hello world!"
console.log(myInstance instanceof MyConstructor); // logs "true"
console.log(myInstance.constructor);              // logs "MyConstructor"

注意： 这个非native的Function.construct方法无法和一些native构造器（例如Date）一起使用。在这种情况下你必须使用Function.bind方法（例如，想象有如下一个数组要用在Date构造器中： [2012, 11, 4]；这时你需要这样写： new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))() – -无论如何这不是最好的实现方式并且也许不该用在任何生产环境中).

apply()兼容性

call()

call() 调用一个对象的一个方法，以另一个对象替换当前对象。

注意：该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

语法

fun.call(thisArg, arg1, arg2, ...)

参数
thisArg
在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于non-strict mode，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。
arg1, arg2, ...
指定的参数列表。

返回值

使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined。

描述

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg指定的新对象。

如果没有提供 thisArg参数，那么 Global 对象被用作 thisArg。

call()允许为不同的对象分配和调用属于一个对象的函数/方法。

call()提供新的this 值给当前调用的函数/方法。你可以使用call来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

示例

使用call方法调用父构造函数
在一个子构造函数中，你可以通过调用父构造函数的call方法来实现继承，类似于Java中的写法。下例中，使用Food和Toy构造函数创建的对象实例都会拥有在Product构造函数中添加的name属性和price属性,但category属性是在各自的构造函数中定义的。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

使用call方法调用匿名函数
在下例中的for循环体内，我们创建了一个匿名函数，然后通过调用该函数的call方法，将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法，这个print方法可以打印出各元素在数组中的正确索引号。当然，这里不是必须得让数组元素作为this值传入那个匿名函数（普通参数就可以），目的是为了演示call的用法。

var animals = [
  { species: 'Lion', name: 'King' },
  { species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
  (function(i) {
    this.print = function() {
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}

使用call方法调用函数并且指定上下文的'this'
在下面的例子中，当调用greet方法的时候，该方法的this值会绑定到obj对象。

function greet() {
  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

var obj = {
  animal: 'cats', sleepDuration: '12 and 16 hours'
};

greet.call(obj);  // cats typically sleep between 12 and 16 hours

使用call方法调用函数并且没有确定第一个参数（argument）
在下面的例子中，我们调用了display方法，但并没有传递它的第一个参数。如果没有传递第一个参数，this的值将会被绑定为全局对象。

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

注意：在严格模式下this的值将会是undefined。见下文。

'use strict';

var sData = 'Wisen';

function display() {
  console.log('sData value is %s ', this.sData);
}

display.call(); // Cannot read the property of 'sData' of undefined

call()兼容性.png

bind

略

常见用法

调用函数

function foo() {
    console.log(this === window);
}

foo();  // true
foo.call(); //  true
foo.apply();    // true
// 在非严格模式下当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window
foo.call(null); // true
foo.call(undefined);    // true

将类数组对象转换成数组对象

function person(name, age, high) {
    console.log(arguments);    //  { '0': 'xiaoming', '1': 12, '2': '1.6m' }

    var arr = [].slice.apply(arguments);
    console.log(arr);    // ["xiaoming", 12, "1.6m"]
}

person("xiaoming", 12, "1.6m");

借用别人的方法

// 借用Math对象的max方法寻找数组中的最大值
var arr = [1, 2, 3, 4, 5, 6],
    max;

max = Math.max.apply(Math, arr);
console.log(max);    // 6

绑定this指向

var foo = {
    name: "foo",
    showName: function() {
        console.log(this.name);
    }
}

var bar = {
    name: "bar"
}

foo.showName.apply(bar);    // bar

继承

// 定义父类构造函数
var Father = function(name, age) {
    this.name = name;
    this.age = age;
};

// 定义子类构造函数
var Student = function(name, age, high) {
    // 继承父类
    Father.call(this, name, age);
    this.high = high;
};

Student.prototype.message = function() {
    console.log("name: " +　this.name + ",age: " + this.age + ",high: " + this.high);
}

new Student("xiaoming", 12, "1.6m").message();    // name: xiaoming,age: 12,high: 1.6m

[译] Javascript: call()、apply() 和 bind()

原文地址：Javascript: call(), apply() and bind()

原文作者：Omer Goldberg

译文出自：掘金翻译计划* 本文永久链接：github.com/xitu/gold-m…

译者：YueYong* 校对者：Guangping, sun

apply()、call()、bind()

方法介绍

回顾一下 “this”

call()、apply() 和 bind() — 一个新的希望

bind()

call(), apply()

apply（）

语法

参数

描述

示例

call()

语法

返回值

描述

示例

bind

常见用法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读