手动完成es5中的bind要领

媒介

this的指向在javascript中一直是个谜一样的存在,然则许多处所又会用到this,所以明白和运用this非常重要,关于this的明白这篇文章不做引见,由于这篇的目标是转变this的指向。

转变this的指向有三种要领,call,apply,bind。下面先引见下这三种要领

转变this指向

call

var a = {
    name:"aaa",
    say(type){
        console.log(type,this.name);
    }
}
a.say("at");//at aaa
var tn = {name:"ttt"};
a.say.call(tn,"tt")//tt ttt

可以看到经由过程call,say要领中的this指向了tn,传参的体式格局的枚举

apply

var a = {
    name:"aaa",
    say(type){
        console.log(type,this.name);
    }
}
a.say("at");
var tn = {name:"ttt"};
a.say.apply(tn,["tt"])

可以看到经由过程apply,say要领中的this指向了tn,传参的体式格局是数组

bind

bind也能转变this的指向,不过和call,apply差别的处所在于,bind只转变this,不会指向函数

var a = {
    name:"aaa",
    say(type){
        console.log(type,this.name);
    }
}
var tn = {name:"ttt"};
var b = a.say.bind(tn);
b();//ttt

bind 转变this,也是可以继续原型链的,看下下面的代码

var to = {name:"to",color:"red"};
function Animal(){
    console.log(`name:${this.name}...color:${this.color}`);
}
Animal.prototype.say = function(){
    console.log(`say..name:${this.name}...color:${this.color}`);
}
var Cat = Animal.bind(to);
Cat();//name:to...color:red
var cat = new Cat();// name:undefined...color:undefined
cat.say();//say..name:undefined...color:undefined

由于cat是Cat的实例,Cat是转变了this的Animal,所以cat也是Animal的实例,然则this是指向cat的,所以this.name是undefined

完成bind

Function.prototype.bind = function(obj){
    const args = Array.prototype.slice.call(arguments,1);//保存bind时的参数
    const that = this;
    const bound =  function(){
        const inArgs = Array.prototype.slice.call(arguments);//实行bind的函数时的参数
        const newArgs = args.concat(inArgs);//组装参数
        that.apply(obj,newArgs);//实行bind的函数
    }
    //继续prototype--寄生组合式继续
    function F(){};
    F.prototype = that.prototype;
    bound.prototype = new F();
    return bound;
}

然后实行上面的代码

Cat();//name:to...color:red
var cat = new Cat();//name:to...color:red
cat.say();//say..name:undefined...color:undefined

不过第二行和原生的bind照样有点区分的,这里照样记住了之前的bind的对象,原生的不知道为啥是undefined

面试题

完成es5中的bind要领,使得下面的代码输出success

function Animal(name,color){
    this.name = name;
    this.color = color;
}
Animal.prototype.say = function(){
    return `i am a ${this.color} ${this.name}`
}
const Cat = Animal.bind(null,"cat");
const cat = new Cat("white");
if(cat.say() === 'i am a white cat' && cat instanceof Cat && cat instanceof Animal){
    console.log("success")
}

加上上面的bind完成,咦??没有涌现success??为何?
剖析一下代码,bind的第一个参数是null??null的时刻应当默以为this,修正代码以下

Function.prototype.bind = function(obj){
    const args = Array.prototype.slice.call(arguments,1);//保存bind时的参数
    const that = this;
    const bound =  function(){
        const inArgs = Array.prototype.slice.call(arguments);//实行bind的函数时的参数
        const newArgs = args.concat(inArgs);//组装参数
        const bo = obj || this;
        that.apply(bo,newArgs);//实行bind的函数
    }
    //继续prototype--寄生组合式继续
    function F(){};
    F.prototype = that.prototype;
    bound.prototype = new F();
    return bound;
}

输出success
圆满~~~
撒花~~~

    原文作者:juan26
    原文地址: https://segmentfault.com/a/1190000017286233
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞