看了好幾遍的bind函式，一定講的明明白白

織雪紗奈發表於2018-05-23
函式
  • 手寫bind函式 Polyfill

實現效果一

function foo(){
	this.b = 100;
	console.log(this.a)
	return this.a
}
var func = foo.bind({a:"1"})

func();  #  1 
new func(); #  undefined
複製程式碼

實現效果二

# 函式科裡化
function add(a, b, c) {
    var i = a+b+c;
    console.log(i);
    return i;
}

var func = add.bind(undefined, 100);//給add()傳了第一個引數a
func(1, 2);# 103，繼續傳入b和c

var func2 = func.bind(undefined, 200);
# 給func2傳入第一個引數，也就是b，此前func已有引數a=100
func2(10); # 310,繼續傳入c，100+200+10

複製程式碼

官網Polyfill

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
   # 這個最簡單this必須是函式，不是就throw Error
    if (typeof this !== 'function') {
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }
    
    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype; 
    fBound.prototype = new fNOP();

    return fBound;
  };
}
複製程式碼

第一步

 #  先清楚this是指誰
 foo.bind({a:'1'})
 Function.prototype.bind = function(oThis) {
     fToBind = this
 }
 # 這裡 fToBind是指的呼叫bind的函式也就是foo
 #  othis指的是bind傳入的物件也可以是函式物件這是指的是{a:'1'}

複製程式碼

第二步

var aArgs = Array.prototype.slice.call(arguments, 1)
# 首先要明白arguments沒有slice方法 要呼叫array原型上的slice才可以
# 這裡截的是從第二個引數開始 也就是陣列下標為1到最後
var func = add.bind(undefined, 100);
#  此時 aArgs= [100]
同理類推 var func = add.bind(undefined, 100，200); 
# 此時 aArgs= [100，200]
複製程式碼

第三步

    fToBind =this;
    fNOP= function() {},
    fBound  = function() {
      return fToBind.apply(省略);
    };

    fNOP.prototype = this.prototype; 
    fBound.prototype = new fNOP();
    
    foo.bind({a:'1'})
    # 先清楚原型關係
    # fNOP是一個函式，fToBind是foo
    fNOP.prototype = this.prototype; 
    # foo的原型賦值給fNOP的原型
    # 也就是說foo函式原型上的方法全都給了fNOP
    # fNOP能都呼叫foo函式原型上的方法和屬性
    # fNOP在 foo.prototype的這條原型鏈上
    var dd = new fNOP() 
    dd.__proto__ == fNOP.prototype 成立
    dd.__proto__ == foo.prototype 成立
    dd instanceof fNOP 成立
    dd instanceof foo 成立
    # 但是 dd 獲取不到foo本身的方法和屬性
    
    fBound.prototype = new fNOP();
    fBound.prototype就是上面例子中的dd
    
    fBound又在fNOP的這條鏈上
    var ff = new fBound()
    ff.__proto__ == fBound.prototype 成立
    ff.__proto__.__proto__ == fNOP.prototype 成立
    ff instanceof fBound 成立
    fBound.prototype instanceof fNOP 成立
    ff instanceof fNOP 成立 
    # 注意 fBound instanceof fNOP 不成立
    
複製程式碼

第四步 最後

fBound  = function() {
    return fToBind.apply(this instanceof fNOP? this: oThis,
        aArgs.concat(Array.prototype.slice.call(arguments)));
};
return fBound;
# 上面說了 fToBind 就是 foo 
# foo 呼叫了 apply
# 這裡有必要解釋一下apply
        # apply的作用和指向
        function Animal(name){
			this.name = 'Animal';
        }
        function Cat(name){
        	this.name = 'Tom';
        	Animal.apply(this);	
        }
        var cat = new Cat()
        console.log(cat.name) //Animal
        Animal.apply(this);	
        # 這裡在Cat裡的apply就是cat呼叫了Animal的屬性和方法
        # this全部指向Cat
        # 如果把上下位置互換就會被重寫
        
        
        function Cat(name){
        	Animal.apply(this);	
        	this.name = 'Tom';
        }
        #  其實這句話就相當於
        function Cat(name){
        	this.name = 'Animal';
        	this.name = 'Tom';
        }
        
        # 引數傳遞
        function add(a,b,c){
        	console.log(a)
        	console.log(b)
        	console.log(c)
        }
        function test(){
			add.apply(this,[10,1])
        }
        test();
        列印出  
        10 1 undefined
        # 從呼叫的第二個起往引數傳值
        # 相當於解構賦值
        [a,b,c] = [10,1]
        a =10 
        b =1
        c = undefined
        # call就是單個，apply是陣列 
        add.call(this,10,1)
        # apply和call呼叫的時候只是返回add裡面的return
        # 如果add裡面沒有return就什麼也不返回
        # 這個被面試官給坑了，說理解的不深（理解的不深
        # 就被面試官忽悠了，他說apply返回啥，我說返回物件不對不對函式。。。題外話）
# 理解了apply 回到正題
fBound  = function() {
    return fToBind.apply(this instanceof fNOP? this: oThis,
        aArgs.concat(Array.prototype.slice.call(arguments)));
};
# 我少抄了一句話就是這句直接
# fBound  = fToBind.apply(this instanceof fNOP? this: oThis,
# aArgs.concat(Array.prototype.slice.call(arguments)));

return fBound;

# 為什麼是返回 return 因為
function foo(){
	this.b = 100;
	console.log(this.a)
	return this.a
}
var func = foo.bind({a:"1"})
func();  # 1  
cc = func() 
console.log(cc) # 1


# 只有 return fToBind.apply()  cc才會取得 this.a
fToBind.apply(this instanceof fNOP? this: oThis,
        aArgs.concat(Array.prototype.slice.call(arguments)));

# 回到最初
function foo(){
	this.b = 100;
	console.log(this.a)
	return this.a
}
var func = foo.bind({a:"1"})

func();  // 1 
new func(); // undefined
#上面說過
fBound又在fNOP的這條鏈上
var ff = new fBound()
ff.__proto__ == fBound.prototype 成立
ff.__proto__.__proto__ == fNOP.prototype 成立
ff instanceof fBound 成立
fBound.prototype instanceof fNOP 成立
ff instanceof fNOP 成立 
ff就是new func()的結果
# bind最後返回了 fBound
#如果單純得呼叫func(); 那麼this就是window
window instanceof fNOP 不成立 apply 把this 指向了oThis也就是{a:"1"}
#所以this.a 返回的是1 
#如果new func(); this就是指得這個物件 此時this 就是上面例子中的ff 那麼this instanceof fNOP成立 

this指得是 new fBound()的this
fBound  = function() {
  return fToBind.apply(this instanceof fNOP
         ? this
         : oThis,
         aArgs.concat(Array.prototype.slice.call(arguments)));
};
#就是指得是 fBound裡面的this

#在這裡可以看作是apply繼承
#fBound 把foo裡面所有的屬性名和方法都繼承了
#所以（new func()).b 能夠訪問到
#至於最後
aArgs.concat(Array.prototype.slice.call(arguments))
#new func()可以傳參
#把bind第二個引數後面的和new func()傳進來的引數打包成一個陣列
複製程式碼

以上，若有不足不嚴謹不正確之處，歡迎指正

如果沒有面試被問的問題，也不會有這篇文章，最後感謝面試官小哥哥?最近剛剛情緒好些來整體問題

相關文章