理解JavaScript中的call,apply和bind方法

chaosx110 发布于2019-08-26 12:23 / 951人阅读

摘要：输出的作用与和一样，都是可以改变函数运行时上下文，区别是和在调用函数之后会立即执行，而方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

前言

js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法很好地体现了js函数式语言特性，在js中几乎每一次编写函数式语言风格的代码，都离不开call和apply，能够熟练运用它们，是真正成为一名jser程序员的重要一步。

apply()

使用 apply，你可以继承其他对象的方法：

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 输出5

注意这里apply()的第一个参数是null，在非严格模式下，第一个参数为null或者undefined时会自动替换为指向全局对象，
apply()的第二个参数为数组或类数组。

call()

call()是apply()的一颗语法糖，作用和 apply() 一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。

var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 输出5

bind()

bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

var person = {
  name: "person",
  getName: function() {
    return this.name;
  }
}
var boy = {
   name: "twy"
}
// bind()返回一个新函数，供以后调
var getName = person.getName.bind(boy);

// 现在调用
console.log(getName());    // 输出wy

用apply()模拟实现bind()：

Function.prototype.bind = function(context) {
  // 保存调用函数的引用，这里是getName()
  var self = this;
  // 返回一个新函数
  return function(){
    return self.apply(context, arguments);
  }
}
var person = {
  name: "twy"
}
var getName = function(){
  console.info(this.name);
}.bind(person);
// 执行bind()方法内返回的新函数
getName();

在返回的新函数内部，self.apply(context, arguments)才是执行原来的getName函数，相当于执行getName.apply(person);

如何选用

如果不需要关心具体有多少参数被传入函数，选用apply()；

如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用call()；

如果我们想要将来再调用方法，不需立即得到函数返回结果，则使用bind();

总结

call()、apply()和bind()都是用来改变函数执行时的上下文，可借助它们实现继承；

call()和apply()唯一区别是参数不一样，call()是apply()的语法糖；

bind()是返回一个新函数，供以后调用，而apply()和call()是立即调用。

专线服务混合云 JS中bind、call和apply的作 js中的call和apply apply与call的区别 apply()方法

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

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

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

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

duan199226 2019-08-23 14:27 评论0 收藏0
ES5 call,apply,bind方法总结（包括理解this的指向问题）

总结call,apply,bind方法的理解使用和区别。 call,apply,bind这三个方法在JavaScript中是用来改变函数调用的this指向。那么改变函数this指向有什么用呢？我们先来看一段代码 var a= { name:harden, fn:function () { console.log(this.name); } } var b =...

nanchen2251 2019-08-23 18:15 评论0 收藏0
深入理解JavaScript（三）：获取数组中的最大值方法（this,apply）

摘要：三个方法的作用，都是改变的指向，只是用法稍微有些区别什么是既不指向函数自身，也不指函数的词法作用域。它在函数定义的时候是确定不了的在函数被调用时才发生的绑定，也就是说具体指向什么，取决于你是怎么调用的函数。 1.排序法思路：给数组先排序(由大到小排序),第一项就是最大值 let arr = [1,5,6,7,9,20,40,2,3]; let max1 = arr.sort(func...

canopus4u 2019-08-26 10:42 评论0 收藏0
理解javascript中apply( ), call( ), bind( )

摘要：，，和都是用来改变函数执行时的上下文也就是说改变的指向问题，是的方法，引入是因为没有将设置成行参。一般都是库里面用不推荐自己使用和。和唯一区别是参数不一样，是的语法糖是返回一个新函数供以后调用，相比其他两个比较常用。而和是立即调用。 apply()，call()，和bind()都是用来改变函数执行时的上下文也就是说改变this的指向问题，是prototype的方法，引入是因为js没有将...

LiveVideoStack 2019-08-26 10:27 评论0 收藏0
复习javascript中call,apply,bind的用法

摘要：绑定函数被调用时，也接受预设的参数提供给原函数。一个绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。一直很难理解js中的call apply bind，在w3schools,mdn阅读了，也看了很多相关的文章，今天我来写下我理解的call apply bind 首先创建一个函数 function man(){} man.prototype = { name: ...

darryrzhong 2019-08-26 11:30 评论0 收藏0