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

WrBug 发布于2019-08-30 15:54 / 1749人阅读

摘要：在面向对象的中，我们了解到在中，一切都是对象。到目前为止，我们已将函数视为由名称可选，也可以是匿名函数组成的对象及其在调用时执行的代码。这意味着，我们可以调用任何函数，并在调用函数中明确指定。和用于完全相同的目的。

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（）方法时：

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

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

bind（）和call（）之间的主要区别在于call（）方法：

1、接受其他参数

2、执行它立即调用的函数。

3、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函数中都非常有用。即使你最终没有在日常编程中使用它们，你仍然会在阅读其他人的代码时经常遇到它们。

GPU云服务器云服务器 JS中bind、call和apply的作 js中的call和apply apply与call的区别 javascript call

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117096.html

理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0
JavaScript函数的call，apply和bind

摘要：它们有明确的和成员函数的定义，只有的实例才能调用这个的成员函数。用和调用函数里用和来指定函数调用的，即指针的指向。同样，对于一个后的函数使用或者，也无法改变它的执行，原理和上面是一样的。函数里的this指针要理解call，apply和bind，那得先知道JavaScript里的this指针。JavaScript里任何函数的执行都有一个上下文（context），也就是JavaScri...

alighters 2019-08-22 14:48 评论0 收藏0
理解JavaScript中的call,apply和bind方法

摘要：输出的作用与和一样，都是可以改变函数运行时上下文，区别是和在调用函数之后会立即执行，而方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法...

chaosx110 2019-08-26 12:23 评论0 收藏0
JS中的call、apply、bind方法详解

摘要：不能应用下的等方法。首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

zombieda 2019-08-23 15:27 评论0 收藏0
JS基础篇--call、apply、bind方法详解

摘要：首先我们可以通过给目标函数指定作用域来简单实现方法保存，即调用方法的目标函数考虑到函数柯里化的情况，我们可以构建一个更加健壮的这次的方法可以绑定对象，也支持在绑定的时候传参。原因是，在中，多次是无效的。而则会立即执行函数。 bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。 apply、call 在 javascript 中，call 和 apply 都是...

lastSeries 2019-08-21 12:10 评论0 收藏0
javascript关于this 以及this的显示设置(apply、call、bind)

摘要：如果连续呢结果会是什么结果还是第一个原因是，在中，多次是无效的。更深层次的原因，的实现，相当于使用函数在内部包了一个，第二次相当于再包住第一次故第二次以后的是无法生效的。 this 1.其实js中的this没那么难理解，当找不到this时记住一句话：谁调我，我就指谁！new 谁指谁 function text1(){ console.log(this); //指wind...

LiveVideoStack 2019-08-21 11:20 评论0 收藏0