call,apply,bind,new實現原理

在實際開發過程當中，對於函數封裝時，不肯定外部是誰調用的，調用函數內部方法時，有多是window調用這時就會報錯，常使用call，apply,bind來綁定this指向。

Function.prototype.call()

call() 方法調用一個函數, 其具備一個指定的this值和分別地提供的參數。

該方法和apply()相似，區別在於，call()能夠接收若干參數，而apply（）接收的是一個包含多個參數的數組。

語法：fun.call(thisArg, arg1, arg2, ...)

call 能夠繼承

經過父類的構造函數call方法實現繼承

function Product(name, price) {
    this.name = name;
    this.price = price;
  }
  function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
  }
  var cheese = new Food('feta', 5);
  console.log(cheese)
  // Food { name: 'feta', price: 5, category: 'food' }
複製代碼

實例都會擁有在Product構造函數中添加的name屬性和price屬性,但category屬性是在各自的構造函數中定義的。

call 方法調用匿名函數

var animals = [
    { species: 'Lion', name: 'King' },
    { species: 'Whale', name: 'Fail' }
  ];
  
  for (var i = 0; i < animals.length; i++) {
    (function(i) {
        console.log('#' + i + ' ' + this.species + ': ' + this.name) }
    ).call(animals[i], i);
  }
複製代碼

for循環體內，咱們建立了一個匿名函數，而後經過調用該函數的call方法，將每一個數組元素做爲指定的this值執行了那個匿名函數。

call方法指定上下文的this

function greet() {
  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}
var obj = {
  animal: 'cats', sleepDuration: '12 and 16 hours'
};
greet.call(obj);
// cats typically sleep between 12 and 16 hours
複製代碼

Call原理

Function.prototype.myCall = function(context) {
   context = context ? Object(context) : window
   context.fn = this
   let args = [...arguments].slice(1)
   let r = context.fn(args)
   delete context.fn
   return r
}
複製代碼

Function.prototype.apply()

apply()調用一個指定this值的函數, 接收做爲一個數組或者類數組對象提供的參數

語法： func.apply(thisArg, [argsArray])

apply 將數組添加到另外一個數組

var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]
複製代碼

apply 找出最大值和最小值

var numbers = [5, 6, 2, 3, 7];
var max = Math.max.apply(null, numbers)
var min = Math.min.apply(null, numbers);
複製代碼

若是參數組很是大，將參數數組切塊後，循環傳入目標方法：

function minOfArray(arr) {
    var min = Infinity;
    var QUANTUM = 32768;
  
    for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
      var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
      min = Math.min(submin, min);
    }
  
    return min;
  }
  
  var min = minOfArray([5, 6, 2, 3, 7]);
  console.log(min) // 2
複製代碼

apply原理

Function.prototype.myApply = function(context) {
  context = context ? Object(context) : window
    context.fn = this
    let args = [...arguments][1]
    if (!args) {
        return context.fn()
    }
    let r = context.fn(args)
    delete context.fn;
    return r
 }
複製代碼

Function.prototype.bind()

bind()方法建立一個新函數, 在調用時設置this關鍵字爲提供的值。

並在調用新函數時，將給定參數列表做爲原函數的參數序列的前若干項。 語法： function.bind(thisArg, [arg1[, arg2[, ...]]])

建立綁定函數

his.x = 9;    // 在瀏覽器中，this指向全局的 "window" 對象
var module = {
  x: 81,
  getX: function() { return this.x; }
};
module.getX(); // 81
var retrieveX = module.getX;
retrieveX(); // 返回9 - 由於函數是在全局做用域中調用的

var boundGetX = retrieveX.bind(module);  // 建立一個新函數，把 'this' 綁定到 module 對象
boundGetX(); // 81
複製代碼

偏函數

function list() {
  return Array.prototype.slice.call(arguments);
}

function addArguments(arg1, arg2) {
    return arg1 + arg2
}

var list1 = list(1, 2, 3); // [1, 2, 3]

var result1 = addArguments(1, 2); // 3

// 建立一個函數，它擁有預設參數列表。
var leadingThirtysevenList = list.bind(null, 37);

// 建立一個函數，它擁有預設的第一個參數
var addThirtySeven = addArguments.bind(null, 37); 

var list2 = leadingThirtysevenList(); 
// [37]

var list3 = leadingThirtysevenList(1, 2, 3); 
// [37, 1, 2, 3]

var result2 = addThirtySeven(5); 
// 37 + 5 = 42 

var result3 = addThirtySeven(5, 10);
// 37 + 5 = 42 ，第二個參數被忽略
複製代碼

當 fn1.myCall(fn2)時，綁定當前this 須要context.fn = this等價於context.fn = fn1 調用的時候 context.fn() 等價於 fn2.fn()此時this是fn2 並執行fn1。

當fn1.myCall.myCall(fn2)是此時都是執行myCall函數, this爲window, 並執行fn2函數。

bind原理

let obj = {
    name: 'joker'
}

function fn() {
    console.log(this.name)
}
Function.prototype.bind = function(context) {

}
let bindFn = fn.bind(obj)
bindFn()
// joker
複製代碼

從上面例子能夠看出

1. bind能夠綁定this執行爲傳入的對象
2. bind方法返回一個函數（高階函數） 實現一個簡易的bind方法

Function.prototype.bind = function(context) {
   let _me = this
    return function() {
        return _me.apply(context)
    }
}
複製代碼

---

bind 還能夠屢次傳參 用法：

let obj = {
    name: 'joker'
}

function fn(name, age) {
    console.log(this.name + '今年' + name + age + '歲了')
}
let bindFn = fn.bind(obj, '大概')
bindFn(10)
// joker今年大概10歲了
複製代碼

綁定this的時候傳遞了一個值, 執行bindFn又傳了一個參數，所以以前的函數須要改造

Function.prototype.bind = function(context) {
    let _me = this
    let bindArgs = [].slice.call(arguments, 1) // 獲取bind方法傳入的參數
    return function() {
        let fnArgs = [].slice.call(arguments) // 獲取函數執行傳入的參數
        return _me.apply(context, bindArgs.concat(fnArgs))
    }
}
複製代碼

---

若是當前綁定的函數被new了，當定函數中的this 是當前函數的實例，用法

let obj = {
    name: 'joker'
}
function fn(name, age) {
    console.log(this)  //  this是fn
}
let bindFn = fn.bind(obj)
let instance = new bindFn()
複製代碼

那麼這個方法還須要改造一下, 若是當前函數執行中的this是fBound的實例，說明是new執行的，那麼當前 this就是函數的實例，不然是context

Function.prototype.bind = function(context) {
    let _me = this
    let bindArgs = [].slice.call(arguments, 1)
    function Fn() {}
    let fBound = function() {
        let fnArgs = [].slice.call(arguments)
        return _me.apply(this instanceof fBound ? this : context, bindArgs.concat(fnArgs))
    }
    Fn.prototype = this.prototype
    fBound.prototype = new Fn();
    return fBound
}
複製代碼

new的原理

想了解new的原理先要了解js的原型機制，先來看張圖

let f1 = new Foo()
複製代碼

1. f1 是構造函數 Foo 的實例, __proto__指向構造函數的原型Foo.prototype
2. Foo.prototype.constructor指向構造函數Foo, Foo的prototype指向它的原型
3. Foo的原型的__proto__最終指向Object

new的實現

function Animal(type) {
    this.type = type;
}
Animal.prototype.say = function() {
    console.log('say')
}

function mockNew() {
    let Constructor = [].shift.call(arguments); // 取出構造函數
    
    let obj = {}   // new 執行會建立一個新對象
    
    obj.__proto__ = Constructor.prototype 
    
    Constructor.apply(obj, arguments)
    return obj
}
let animal = mockNew(Animal, 'dog')
    
console.log(animal.type) // dog
animal.say() // say
複製代碼