在實際開發過程中，對於函式封裝時，不確定外部是誰呼叫的，呼叫函式內部方法時，有可能是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
複製程式碼