1. call()

• this

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

call方法的參數(shù)，應(yīng)該是一個(gè)對(duì)象。
如果參數(shù)為空、null和undefined，正常模式下默認(rèn)傳入全局對(duì)象（window），嚴(yán)格模式下為undefined。
call方法可以改變this的指向，指定this指向?qū)ο髈bj。

var f = function () {
  return this;
};

f.call(5)    //Number {[[PrimitiveValue]]: 5}

若call方法的參數(shù)是一個(gè)原始值，那么這個(gè)原始值會(huì)轉(zhuǎn)成對(duì)應(yīng)的對(duì)象

• arguments

function add(a, b) {
  console.log(arguments[0]);
  console.log(arguments[1]);
}

add.call(this, 1, 2) // 1，2，第一個(gè)參數(shù)傳給this，后面的都存入arguments對(duì)象

arguments是偽數(shù)組

2. apply()

apply方法的第一個(gè)參數(shù)用法和call一樣，不同的是第二個(gè)參數(shù)必須是一個(gè)數(shù)組

function f(x, y){
  console.log(x + y);
}
f.apply(null, [1, 1]) // 2

所以利用這一點(diǎn)
（1）找出數(shù)組最大元素
JavaScript 不提供找出數(shù)組最大元素的函數(shù)。結(jié)合使用apply方法和Math.max方法，就可以返回?cái)?shù)組的最大元素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

(2)將數(shù)組的空元素變?yōu)閡ndefined
通過apply方法，利用Array構(gòu)造函數(shù)將數(shù)組的空元素變成undefined。

Array.apply(null, ['a', ,'b'])  
// [ 'a', undefined, 'b' ]

數(shù)組的forEach方法會(huì)跳過空元素，但是不會(huì)跳過undefined。

3. bind()

bind可以綁定this值

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object

這樣會(huì)報(bào)錯(cuò)，可以像下面這樣,將getTime內(nèi)部的this綁定為d對(duì)象

var print = d.getTime.bind(d);
print() // 1481869925657

下面這樣也是，將inc方法內(nèi)部的this綁定到counter

var counter = {
   count: 0,
   inc: function () {
     this.count++;
   }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1

還可以綁定其他對(duì)象

var counter = {
   count: 0,
   inc: function () {
      this.count++;
   }
};

var obj = {
   count: 100
};
var func = counter.inc.bind(obj);
func();
obj.count // 101

bind還可以綁定原函數(shù)的參數(shù)

var add = function (x, y) {
   return x * this.m + y * this.n;
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5);  //5相當(dāng)于綁定了add函數(shù)里的x
newAdd(5) // 20，這個(gè)5相當(dāng)于add函數(shù)里y

若bind第一個(gè)對(duì)象為null，等于將this綁定到全局對(duì)象（window）

call和apply的用途

(javascript設(shè)計(jì)模式與開發(fā)實(shí)踐)

1.改變this的指向

call和apply最常見的用途就是改變函數(shù)內(nèi)部的this指向，我們來看個(gè)例子：

var obj1 = {
    name: 'sven'
}
var obj2 = {
    name: 'anne'
}

window.name = 'window';

var getName = function () {
    alert(this.name);
}
getName(); //輸出： window
getName.call(obj1) //輸出： sven
getName.call(obj2) //輸出： anne

當(dāng)執(zhí)行g(shù)etName.call(obj)這句代碼時(shí)，getName函數(shù)體內(nèi)的this指向obj1對(duì)象，所以此處的

var getName = function () {
    alert(this.name);
}

實(shí)際相當(dāng)于

var getName = function () {
    alert(obj1.name);
}

在實(shí)際開發(fā)中，經(jīng)常遇到this指向被不經(jīng)意改變的場(chǎng)景，比如有一個(gè)div節(jié)點(diǎn)，div節(jié)點(diǎn)的onclick事件中的this本來指向這個(gè)div的：

document.getElementById('div1').onclick = function () {
    alert(this.id); //輸出:div1
}

假如該事件函數(shù)中有一個(gè)內(nèi)部函數(shù)func,在事件內(nèi)部調(diào)用func函數(shù)時(shí)，func函數(shù)體內(nèi)部的this就指向了window,而不是我們預(yù)期的div,見如下代碼

document.getElementById('div1').onclick = function () {
    alert(this.id); //輸出：undefined
    var func = function () {
        alert(this.id); //輸出：undefined
    }
}
這時(shí)我們用call來修正func函數(shù)里面的this, 使其依然指向div
:
document.getElementById('div1').onclick = function () {
    var func = function () {
        alert(this.id); //輸出: div1
    }
    func.call(this)
};

也可以修改內(nèi)部document.getElementById()函數(shù)的內(nèi)部"丟失"的this,代碼如下：

document.getElementById = (function (func) {
    return function () {
        return func.apply(document, arguments);
    }
})(document.getElementById);
var getId = document.getElementById;
var div1 = getId('div1')
alert(div.id);//輸出：div1

2.Function.prototype.bind

大部分高級(jí)瀏覽器都實(shí)現(xiàn)內(nèi)置的Function.prototype.bind，用來指定函數(shù)內(nèi)部this的指向，即使沒有原生的Function.prototype.bind實(shí)現(xiàn)，
我們也可以模擬一個(gè)，代碼如下：

Function.prototype.bind = function (context) {
    var self = this;//保存原函數(shù)   function(){ alert this.name }
    return function () {  //返回一個(gè)函數(shù)
        return self.apply(context, arguments); //當(dāng)執(zhí)行新的函數(shù)時(shí)，會(huì)把之前傳入的context當(dāng)做新函數(shù)體內(nèi)的this
    }
}
var obj = {
    name: 'sven'
}

var func=function () {
    alert(this.name);
}.bind(obj);
func();

在Function.protoype.bind的內(nèi)部實(shí)現(xiàn)中，我們先把func函數(shù)的引用保存起來，然后返回一個(gè)新的函數(shù)，當(dāng)我們?cè)趯韴?zhí)行func函數(shù)時(shí)，實(shí)際上先執(zhí)行的是剛剛返回的新函數(shù)。在新函數(shù)的內(nèi)部，self.apply(context,arguments)這句代碼才是執(zhí)行原來的func函數(shù)體內(nèi)的this

這是一個(gè)簡(jiǎn)化版的Function.prototype.bind,一般我們會(huì)往func函數(shù)加入一些參數(shù)

Function.prototype.bind = function () {
    var self = this;//保存原函數(shù)   function(){ alert this.name }
    context=[].shift.call(arguments)
    args=[].slice.call(arguments)
    return function () {  //返回一個(gè)函數(shù)
        return self.apply(context, [].concat.call(args,[].slice.call(arguments))); //當(dāng)執(zhí)行新的函數(shù)時(shí)，會(huì)把之前傳入的context當(dāng)做新函數(shù)體內(nèi)的this
    }
}
var obj = {
    name: 'sven'
}

var func=function (a,b,c,d) {
    alert(this.name);
    alert([a,b,c,d])
}.bind(obj,1,2);
func(3,4);

3.借用其他對(duì)象的方法

借用方法的第一種場(chǎng)景是"借用構(gòu)造函數(shù)",通過這種技術(shù)，可以實(shí)現(xiàn)一些類似繼承的效果

    var A = function (name) {
        this.name=name;
    }
    var B=function () {
        A.apply(this,arguments);
    }
    B.prototype.getName=function () {
        return this.name
    }
    var b=new B('sven');
    console.log(b.getName()); //輸出:'sven'

借用方法的第二種運(yùn)用場(chǎng)景跟我們的關(guān)系密切相關(guān)
函數(shù)的參數(shù)列表arguments是一個(gè)類數(shù)組對(duì)象，雖然有下標(biāo)，但是不能使用數(shù)組的方法，所以我們常常會(huì)借用Array.prototype對(duì)象上的方法

(function () {
    Array.prototype.push.call(arguments,3)
    console.log(arguments); //輸出[1,2,3]
})(1,2);

    var a={}
    Array.prototype.push.call(a,'first');
alert(a.length); //輸出：1
alert(a[0]) //first

借用對(duì)象滿足的條件

• 對(duì)象本身可以存取屬性
• 對(duì)象的length屬性可讀寫

    var a=1;    
    Array.prototype.push.call(a,'first')
    alert(a.length); //輸出：undefined
    alert(a[0]) //undefined

number類型的數(shù)據(jù)就不可能使用Array.prottype.push

var func=function () {
    
};
Array.prototype.push.call(func,'first')
alert(func.length); //報(bào)錯(cuò)

函數(shù)的length是只讀屬性