Javascript：call（），apply（）和bind（）

What' s “this”

在面向对象的JS中，咱们了解到在JS中，一切都是对象。由于一切都是对象，咱们开始明白咱们能够为函数设置和访问其余属性。而this提供了一种更优雅的方式隐式“传递”一个对象的引用。
关于this，咱们常见的误区：

• 认为this指向函数自己

function f1() {
    console.log(this)
}
f1() // window

• 认为this指向函数做用域

关于这两个误区，其实在官方文档中有很明确的说明。

函数的调用方式决定了this的值。

那么this并非指向函数自己，也不是指向函数的做用域，而是在运行时进行绑定的，并非在编写时绑定，它的上下文也取决于函数调用时的各类条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

它指向什么彻底取决于函数在哪里被调用，也就是说，谁调用，谁负责

而bind（）、apply（）、call（）则是能够更改this指向的方法

（这部分并非翻译的原文，由于原文关于this讲的不是很细致，而我以为理解了this，才能了解bind（）、apply（）、call（）有什么用处。因此这块是我根据《你不知道的JavaScript 上卷》this的部分，粗略的介绍了部分，有兴趣的话能够看看那本书，关于this讲的很细致。）

call(), apply() and bind()

到目前为止，咱们已将函数视为由名称（可选，也能够是匿名函数）组成的对象及其在调用时执行的代码。但这不是所有真相，实际上函数看起来更接近下面的图像：

如今，我将经过示例介绍每一个函数中出现的这3种相似方法。

bind()

官方文档说： bind（）方法建立一个新函数，当调用时，将其关键字设置为提供的值。

这很是强大。它让咱们在调用函数时明肯定义它的值。咱们来看看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（）方法时：

1. JS引擎正在建立一个新的pokemonName实例，并将pokemon绑定为此变量。重要的是要理解它复制了pokemonName函数。
2. 在建立了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（）方法调用具备给定此值的函数和单独提供的参数。

这意味着，咱们能够调用任何函数，并在调用函数中明确指定what_ this _should reference_。真的相似于bind（）方法！这绝对可让咱们免于编写hacky代码。

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

这些内置的方法存在于每一个JS函数中都很是有用。即便你最终没有在平常编程中使用它们，你仍然会在阅读其余人的代码时常常遇到它们。