JavaScript中的call()、apply()、bind()用法以及原理实现（面试篇）

面试题热点话题，this指向、如何改变this指向、call() apply() bind()区别，还有手写call() apply()以及bind()。

一、 this指向问题，这个问题主要是分一些情况来去理解的，整体而言可以理解成this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象，不过具体的特殊情况还需要特殊对待。更多关于this指向问题可以参考文章 《彻底理解js中this的指向》。

二、 call() apply()和bind()的区别

相同点：

都可以改变函数的this指向 第一个参数都是this要指向的对象。

不同点：

call()和apply()接收参数不同：
call()接收多个参数，第一个参数为this要指向的对象，第二个参数为调用调用call方法的函数的第一个参数，第三个参数为该函数的第二个参数，依次类推。
apply()接收两个参数，第一个参数为this要指向的对象，第二个参数为一个数组，数组的第一项为调用 apply方法的第一个参数，数组第二项为该函数的第二个参数，依次类推。
bind()第一个参数是this要指向的对象，第二个参数为调用调用bind方法的函数的第一个参数，第三个参数为该函数的第二个参数，依次类推。

call() apply() 和bind()执行时机不同：
call() apply()在被函数调用后立即执行，而bind()方法则是返回一个新的函数（未执行）。

三、 call()、apply()、bind()语法

call()语法：

var obj = {
    name:"lucy"
}
function FunCall(a,b,c){
    console.log(this.name); //lucy 
    console.log("参数",a,b,c) // a b c
}
FunCall.call(obj,'a','b','c')

apply()语法：

var obj = {
    name:"lucy"
}
function FunApply(a,b,c){
    console.log(this.name); //lucy 
    console.log("参数",a,b,c) // a b c
}
Funapply.Apply(obj,["a","b","c"])

bind()语法：

var obj = {
    name:"lucy"
}
function FunBind(a,b,c){
    console.log(this.name); //lucy
    console.log(a,b,c); // a b c
}

var funbind = FunBind.bind(obj,'a','b','c')

funbind();

注意：bind()方法还可以这样传参

var obj = {
    name:"lucy"
}
function FunBind(a,b,c){
    console.log(this.name); //lucy
    console.log(a,b,c); // a b c
}

var funbind = FunBind.bind(obj)

funbind('a','b','c');

bind()除了this还接收其他参数，bind()返回的函数也接收参数。

以上是对call() ,apply(),bind()的异同以及语法使用，需要了解更多call() ,apply(),bind()的信息，可以参考 MDN 对这几个方法更详细的的说明。

四、 手写call()、apply()、bind()方法。

  1. 手写call():
    在写之前思考一下，call()方法实际上做的事情就是改变了this的指向，那如何改变一个函数的this指向呢？就是改变函数的调用者。
    按照这个思路来看下面代码。
Function.prototype.mycall = function (thisArg,...args){
//先明白我们的参数 都带代表什么，thisArg代表this当前需要指向的对象，args表示该函数接收的参数。
//我们参照call 方法理解 foo.call(obj,"a","b") , 此时thisArg就代表obj,...args 就代表参数啊 a,b
    var fn = Symbol("fn"); 
//创建一个变量，使用Symbol是因为保证它的唯一性，不和thisArg其他相同fn属性冲突
    var thisArg = thisArg || window; 
// 当thisArg不存在时也就是调用call()没传第一个参数时，默认为window。
    thisArg[fn] = this; 
//这里的这个this代表的是调用call方法的函数，比如foo.call() this代表foo函数，通过赋值操作，此时对象thisArg下面的fn属性就是一个方法
    var result = thisArg[fn](...args);
//这一步是核心，调用对象thisArg下的fn方法，在这一步函数foo的this已改变为thisArg
    delete thisArg[fn];
//当函数调用完成之后销毁掉
    return  result;
}

var obj = {
    name:"lucy"
}

function foo(a,b){
    console.log(this.name); //lucy
    console.log(a,b); //a b
}

foo.mycall(obj,'a','b');

如果上述逻辑不是很清楚，就先去看一下《彻底理解js中this的指向》。再看看this指向再回来思考这段代码。

  1. 手写apply():
    apply()跟call()其实很相似，按照上面代码的注释理解一下下面的代码
Function.prototype.myapply = function(thisArgs,args){
    var fn = Symbol("fn");
    var thisArgs = thisArgs || window;
    thisArgs[fn] = this;
    var result = thisArgs[fn](...args);
    delete thisArgs[fn];
    return result;
}

var obj = {
    name:"zhangsan"
}

function foo (a,b,c){
    console.log(this.name); //zhangsan
    console.log(a,b,c);// a b c
}
foo.myapply(obj,['a','b','c']);
  1. 手写bind()
    bind()需要思考到的地方比较多，先一点点来。
    第一步借助实现bind()基本功能改变this指向。
Function.prototype.mybind = function(thisArgs){
    var args = Array.prototype.slice.call(arguments,1);
    var _this = this;
    return function(){
        _this.apply(thisArgs,[...args]) //this指向被改变到thisArgs
    }
}
var obj = {
    name:"lili"
}
function foo(a,b,c){
    console.log(this.name); // lili
    console.log(a,b,c); // a b c
}

var ffff = foo.mybind(obj,'a',"b","c")
ffff();

由代码可知bind()的改变this功能实现了

这里会有个问题
看下面代码

Function.prototype.mybind = function(thisArgs){
    var args = Array.prototype.slice.call(arguments,1);
    var _this = this;
    return function(){
        _this.apply(thisArgs,[...args]) //this指向被改变到thisArgs
    }
}
var obj = {
    name:"lili"
}
function foo(a,b,c){
    console.log(this.name); // lili
    console.log(a,b,c); //  undefined undefined undefined
}
var ffff = foo.mybind(obj)
ffff("a","b","c");//当把参数放到这里时会发生什么？
//看上面输出，参数没传递进去，但是人家原生bind是可以在绑定this之后再传参的,不信可以试试。

接着来完善

Function.prototype.mybind = function(thisArgs){
    var args = Array.prototype.slice.call(arguments,1);
    var _this = this;
    return function(){
        _this.apply(thisArgs,[...args,...arguments]) //这里与上面代码不同的地方，这里获取到当前函数的参数，并一并传递给函数执行。
    }
}
var obj = {
    name:"lili"
}
function foo(a,b,c){
    console.log(this.name); // lili
    console.log(a,b,c); //  a b c
}
var ffff = foo.mybind(obj)
ffff("a","b","c");//此时在这里传参

再接着完善：
我们知道对一个函数使用new操作符，会生成一个对象，该对象称为当前函数的实例。该函数可以称为构造函数，构造函数里的this指向当前的实例化对象。

function Person(name){
  this.name = "sss"
}
var person = new Person()
console.log(person) // { name:"sss" }

如果 ffff函数被当做构造函数使用new操作符产生一个实例化对象，按照道理来说this应该指向实例化对象，但是我们使用bind()方法函数foo的this指向了对象obj,因此我们需要处理一下当ffff函数被使用new操作符生成实例化对象时，改变this指向，让它指向当前实例化对象而非obj。

Function.prototype.mybind = function(thisArgs){
    if(typeof this !== "function"){
        return new Error('not a function') 
    }
    var args = Array.prototype.slice.call(arguments,1);
    var _this = this;

    var result = function (){ //稍微做了改变将函数赋值给result变量
        _this.apply(thisArgs,[...args,...arguments])
    }

    return result;
}

var obj = {
    name:"lucy"
}

function foo(name){
    this.name = name;
}

var ffff= foo.mybind(obj);
var instance = new ffff("jack"); //实例化被bind()方法绑定this之后返回的函数

console.log(obj) //{name:"jack"}  //理想输出应该是 {name:"lucy"}
console.log(instance); // {}  //理想输出应该是 { name:"jack" }

此时可以使用原生bind()方法观察比较

var obj = {
    name:"lucy"
}

function foo(name){
    this.name = name;
}

var ffff= foo.bind(obj); //用原生bind()方法
var instance = new ffff("jack"); //实例化被bind()方法绑定this之后返回的函数

console.log(obj) //{ name:"lucy" } 
console.log(instance); // { name:"jack" }

这下很直观的能观察到我们的mybind方法有问题，问题就在当ffff函数被使用new操作符生成实例化对象时，没有改变this指向到实例化对象，而还是指向mybind()的第一个参数obj。

如何改变this呢?看一下代码

Function.prototype.mybind = function(thisArgs){
    if(typeof this !== "function"){
        return new Error('not a function') 
    }
    var args = Array.prototype.slice.call(arguments,1);
    var _this = this;

    var result = function (){
        var thisArgs = this instanceof result ? this : thisArgs;
        /*
        在这里对即将传入apply的第一个参数进行判断，
        判断当前this是否是result函数的实例，
        如果是那就将当前的this传递进去，
        如果不是那就还是使用传递进来的第一个参数。
        */
        _this.apply(thisArgs,[...args,...arguments])
    }
    return result;
}
var obj = {
    name:"lucy"
}
function foo(name){
    this.name = name;
}
foo.prototype.age = 18;  // 第26行
var ffff = foo.mybind(obj);
var instance = new ffff("jack");

console.log(obj) //{name:"lucy"}
console.log(instance); // { name:"jack" }

console.log(instance.age);// undefined(先不用看这个) // 第33行

我们在第9行加了一个判断，判断这里的this是不是指向当前函数的实例，如果是，那么我们就需要改变传入apply的第一个参数了。

最终实现：
看上面代码26行我们给foo函数原型对象上写入了一个属性age,理论上我们通过instance.age就能访问到，但是通过第33行代码我们发现，instance的原型链上没有age属性。
再看一下代码：

Function.prototype.mybind = function(thisArgs){
    if(typeof this !== "function"){
        return new Error('not a function') 
    }
    var args = Array.prototype.slice.call(arguments,1);
    var _this = this;

    var result = function (){
        console.log(this);//result{}
        var alignThis = _this instanceof result ? _this : thisArgs;
        _this.apply(alignThis,[...args,...arguments])
    }

    //将调用mybind方法的函数的原型对象利用原型继承的方式将该函数的原型继承到result的原型对象上。
    var FUN = function(){} //第15行
    FUN.prototype = _this.prototype;
    result.prototype = new FUN() //第17行

    return result;
}


var obj = {
    name:"lucy"
}

function foo(name){
    this.name = name;
}
foo.prototype.age = 18;
var ffff = foo.mybind(obj);
var instance = new ffff("jack");

console.log(obj)//{name:"lucy"}
console.log(instance);//{name:"jack"}
console.log(instance.age); // 18

通过15-17行，完成原型对象的继承，这样就完成了手写bind()。
到此为止，call() apply() bind()方法的手写实现也完成了。

写的有些啰嗦，但是边写边怕自己写不清楚，又怕写错了，只能慢慢一步步来，希望看到此文的伙伴有疑惑或者发现错误请不吝赐教。谢谢。

写在最后：文中内容大多为自己平时从各种途径学习总结，文中参考文章大多收录在我的个人博客里，欢迎阅览http://www.tianleilei.cn

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,451评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,172评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,782评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,709评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,733评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,578评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,320评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,241评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,686评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,715评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,336评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2赞 355