bind、call、apply的区别与实现原理

oliverhuang 发布于2019-08-23 12:23 / 2493人阅读

摘要：简单说一下的区别三者都是用于改变函数体内的指向，但是与和的最大的区别是不会立即调用，而是返回一个新函数，称为绑定函数，其内的指向为创建它时传入的第一个参数，而传入的第二个及以后的参数作为原函数的参数来调用原函数。原文链接的区别与实现原理

1、简单说一下bind、call、apply的区别

　　三者都是用于改变函数体内this的指向，但是bind与apply和call的最大的区别是：bind不会立即调用，而是返回一个新函数，称为绑定函数，其内的this指向为创建它时传入bind的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。

var obj = {};

function test() {
    console.log(this === obj);
}

test(); //false

var testObj = test.bind(obj);
testObj();  //true

　　apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）；apply和call的调用返回函数执行结果；

　　如果使用apply或call方法，那么this指向他们的第一个参数，apply的第二个参数是一个参数数组，call的第二个及其以后的参数都是数组里面的元素，就是说要全部列举出来；

以下是MDN文档：

bind语法：

func.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg 当绑定函数被调用时，该参数会作为原函数运行时的this指向。当使用new 操作符调用绑定函数时，该参数无效。
arg1, arg2, ... 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。

call语法：

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

apply语法：

fun.apply(thisArg, [argsArray])
thisArg： 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
argsArray: 一个数组或者类数组对象，其中的数组元素将作为多带带的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

区别总结：

当我们使用一个函数需要改变this指向的时候才会用到call,apply,bind
如果你要传递的参数不多，则可以使用fn.call(thisObj, arg1, arg2 ...)
如果你要传递的参数很多，则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 ...])
如果你想生成一个新的函数长期绑定某个函数给某个对象使用，则可以使用

const newFn = fn.bind(thisObj);
newFn(arg1, arg2...)

2、bind、call、apply的实现 myBind:

Function.prototype.myBind = function() {
    var _this = this;
    var context = [].shift.call(arguments);// 保存需要绑定的this上下文
    var args = [].slice.call(arguments); //剩下参数转为数组
    console.log(_this, context, args);
    return function() {
        return _this.apply(context, [].concat.call(args, [].slice.call(arguments)));
    }
};

myCall:

/**
 * 每个函数都可以调用call方法，来改变当前这个函数执行的this关键字，并且支持传入参数
 */
Function.prototype.myCall = function(context) {
    //第一个参数为调用call方法的函数中的this指向
    var context = context || global;
    //将this赋给context的fn属性
    context.fn = this;//此处this是指调用myCall的function

    var arr = [];
    for (var i=0,len=arguments.length;i
myApply:
/**
 * apply函数传入的是this指向和参数数组
 */
Function.prototype.myApply = function(context, arr) {
    var context = context || global;
    context.fn = this;
    var result;
    if (!arr) {
        result = context.fn(); //直接执行
    } else {
        var args = [];
        for (var i=0,len=arr.length;i
　　以上是bind、apply、和call的模拟实现
注意：绑定函数(bind函数返回的新函数)不可以再通过apply和call改变其this指向，即当绑定函数调用apply和call改变其this指向时，并不能达到预期效果。
var obj = {};

function test() {
    console.log(this === obj);
}

var testObj = test.bind(obj);
testObj();  //true

var objTest = {
    "作者": "chengbo"
};
/**
 * 预期返回false, 但是testObj是个绑定函数，所以不能改变其this指向
 */
testObj.apply(objTest); //true
testObj.call(objTest); //true
欢迎留言。
原文链接：《bind、call、apply的区别与实现原理》

云服务器海外云主机 apply与call的区别 JS中bind、call和apply的作回调的原理、实现与应用 js中的call和apply

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

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

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

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

duan199226 2019-08-23 14:27 评论0 收藏0
「干货」细说 call、apply 以及 bind 的区别和用法

摘要：的调用者，将会指向这个对象。此外，还可以扩展自己的其他方法。的使用最后来说说。不同的是，方法的返回值是函数，并且需要稍后调用，才会执行。而和则是立即调用。总结和的主要作用，是改变对象的执行上下文，并且是立即执行的。前言上一篇文章《「前端面试题系列4」this 的原理以及用法》中，提到了 call 和 apply。它们最主要的作用，是改变 this 的指向。在平时的工作中，除了...

GraphQuery 2019-08-26 13:28 评论0 收藏0
面试官:你能手写实现call,apply,bind方法吗?

摘要：前言实践系列主要是让我们通过实践去加深对一些原理的理解。求求三兄弟的作用都是为了改变函数运行时上下文指向而存在的。不会立即调用其他两个会立即调用。如果有帮助到你请给我一个就算是对我的感谢啦前言 [实践系列] 主要是让我们通过实践去加深对一些原理的理解。实践系列-前端路由实践系列-Babel原理实践系列-Promises/A+规范实践系列-浏览器缓存机制有兴...

Warren 2019-08-23 15:37 评论0 收藏0
前端基础问题整理-JavaScript相关

摘要：请解释事件代理事件代理也称为事件委托，利用了事件冒泡。同源指的是协议域名端口相同，同源策略是一种安全协议。目的同源策略保证了用户的信息安全，浏览器打开多个站点时，互相之间不能利用获取对方站点的敏感信息。请解释事件代理(event delegation) 事件代理也称为事件委托，利用了事件冒泡。例如： item1 item2 item3 当页面li增多时单...

刘东 2019-08-21 14:03 评论0 收藏0
call、apply、bind 原理、区别及原生js模拟。

摘要：的原型上存放着实例的一些共有方法。每个函数都可以调用方法，来改变当前这个函数执行的关键字，并且支持传入参数我们用原生模拟方法，来更加深刻了解它。和方法类似，作用都是改变当前函数执行的指向，并且将函数执行。 Function的prototype原型上存放着 Function实例的一些共有方法。A.Function的原型不像其他类(Array、Object...)的原型一样是个对象，Fu...

vpants 2019-08-22 15:36 评论0 收藏0