javascript中call(),apply().bind()方法的作用和异同

Near_Li 发布于2019-08-21 17:04 / 3376人阅读

摘要：原文章发表在的个人博客一细节中函数存在定义时上下文，运行时上下文上下文是可变的为改变某个函数运行时的上下文而存在的，换句话说，是为了改变函数内部的指向没有方法，但是有呀所以可以去把方法的运行时上下文也就是运行时的的指向，指向这个时候低啊用

原文章发表在 Klay-Clam的个人博客

一、细节

javascript 中函数存在“定义时上下文”，“运行时上下文”

上下文是可变的

1. call()

call(),为改变某个函数运行时的上下文(context)而存在的，换句话说，是为了改变函数内部的this指向.

// demo1
var sayKlay = {
    name :"Klay",
    say : function(){
        console.log(this.name);
    }
}
var sayClam = {
    name : "Clam" 
}
/* 
sayClam()没有say方法，但是sayKlay()有呀
所以可以去把sayKlay.say()方法的运行时上下文
也就是运行时的this的指向，指向sayClam()
这个时候低啊用say()方法就可以sayClam了。
*/
sayKlay.say.call(sayClam); // Clam

// demo2
function a(xx) {         
    this.b = xx; 
} 
var o = {}; 
a.call(o, 5); 
console.log(a.b);    // undefined 
console.log(o.b);    // 5

参考：MDN call()方法

2.apply()

apply()与call()作用没有区别，用法与call()方法稍有区别，就是call()的第二个参数(调用函数使用的参数)，是一个一个传入的；

而apply()的第二个参数的值是使用数组的形式传入的

function add(a,b) {         
    this.sum = a + b; 
} 
var o = {}; 
add.call(o, 5,5);
console.log(o.sum);    // 10
add.apply(o,[3,5]);
console.log(o.sum);    // 8

参考 MDN apply()方法

3.bind()

bind()的作用其实与call()以及apply()都是一样的，都是为了改变函数运行时的上下文，bind()与后面两者的区别是，call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时的上下文的之后，返回一个新的函数，在我们需要调用的地方去调用他。

// bind()方法并不会直接调用，只是改变了函数的上下文，并成为一个副本
var button = document.getElementById("button"),
    text = document.getElementById("text");
button.onclick = function() {
    alert(this.id); // 弹出text
}.bind(text);
// ie6-ie8不支持bind()方法，所以要用下面的方法去模拟bind()
if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
        var self = this
            , args = Array.prototype.slice.call(arguments);
            
        return function() {
            return self.apply(context, args.slice(1));    
        }
    };
}

参考MDN bind()方法

二、总结

利用上面的call(),apply()和bind()方法，可以在代码复用减少代码的冗余上面有很大的帮助，以前编码的过程中，的确是没有很好的利用，希望在今后的编码的过程中自己可以努力的去尝试，去试错。

enjoy~

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

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

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

可能遇到假的面试题：不用call和apply方法模拟实现ES5的bind方法

摘要：来自朋友去某信用卡管家的做的一道面试题，用原生模拟的方法，不准用和方法。他们的用途相同，都是在特定的作用域中调用函数。不同之处在于，方法传递给调用函数的参数是逐个列出的，而则是要写在数组中。本文首发我的个人博客：前端小密圈，评论交流送1024邀请码，嘿嘿嘿?。来自朋友去某信用卡管家的做的一道面试题，用原生JavaScript模拟ES5的bind方法，不准用call和bind方法。 ...

李世赞 2019-08-29 12:31 评论0 收藏0
可能遇到假的面试题：不用call和apply方法模拟实现ES5的bind方法

摘要：来自朋友去某信用卡管家的做的一道面试题，用原生模拟的方法，不准用和方法。他们的用途相同，都是在特定的作用域中调用函数。不同之处在于，方法传递给调用函数的参数是逐个列出的，而则是要写在数组中。本文首发我的个人博客：前端小密圈，评论交流送1024邀请码，嘿嘿嘿?。来自朋友去某信用卡管家的做的一道面试题，用原生JavaScript模拟ES5的bind方法，不准用call和bind方法。 ...

ConardLi 2019-08-22 11:03 评论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