注:本文案例環(huán)境為非嚴(yán)格模式切心，嚴(yán)格模式下禁止關(guān)鍵字this指向全局對(duì)象

一、方法是怎么執(zhí)行的？

首先說一下js中方法的執(zhí)行绽昏，在window全局下聲明一個(gè)方法a：

function a () {
  console.log(this);
}
a();//window

全局中執(zhí)行這個(gè)方法普遍的方法是直接a()扬霜，這個(gè)方法的執(zhí)行環(huán)境是window，控制臺(tái)會(huì)打印出window對(duì)象而涉。

那么為什么會(huì)打印出window對(duì)象呢？我們可以這樣理解联予，方法的執(zhí)行必須要有個(gè)直接調(diào)用者啼县，剛才那個(gè)方法a是定義在window全局下的，window下的變量和方法有個(gè)特點(diǎn)就是訪問和調(diào)用的時(shí)候可以省略window沸久！所以剛才執(zhí)行a() === window.a()季眷，也就是說，執(zhí)行a方法時(shí)的直接調(diào)用者是window卷胯。子刮！

上面有提到直接調(diào)用者，怎么看待這個(gè)直接調(diào)用者呢窑睁？舉個(gè)例子挺峡，聲明一個(gè)全局對(duì)象obj：

var name = "window-name";
var obj = {
    name:"obj-name",
    a:function(){
        console.log(this.name);
    },
    b:{
        name:"b-name",
        a:function(){
            console.log(this.name);
        }
    }
}
obj.a();//obj-name
obj.b.a();//b-name

分別執(zhí)行obj.a();和obj.b.a();控制臺(tái)會(huì)分別打印出obj-name和b-name（這里obj.a() === window.obj.a()，obj.b.a() === window.obj.b.a()）担钮，方法執(zhí)行時(shí)的直接調(diào)用者就是離這個(gè)被調(diào)用方法最近的那個(gè)對(duì)象橱赠，兩個(gè)分別是obj和obj.b，打印出的name分別是obj的name和obj.b的name箫津。

二狭姨、this指向了誰？

那么函數(shù)里面的this到底是誰呢苏遥？this就是這個(gè)方法被調(diào)用時(shí)的直接調(diào)用者饼拍。可以再來個(gè)特殊的例子田炭，理解這個(gè)例子了就能很好理解this指向了誰师抄。在剛才的基礎(chǔ)上定義一個(gè)全局變量：

var ax = obj.b.a;
ax();//window-name

此時(shí)執(zhí)行ax();控制臺(tái)則會(huì)打印出window-name;為什么會(huì)打印出window-name？這是因?yàn)?ax 是定義在window全局下的變量诫肠，執(zhí)行ax()時(shí)的直接調(diào)用者是window（ax() === window.ax()）司澎，所以執(zhí)行ax()時(shí)內(nèi)部的this就是它的直接調(diào)用者window，因此打印出的值就是定義在window下的name的值栋豫，所以本文最開始時(shí)的a()挤安，執(zhí)行后會(huì)打印window，因?yàn)閮?nèi)部的this指向的是a的調(diào)用者window丧鸯。

實(shí)際上在非嚴(yán)格模式下蛤铜，如果方法有直接調(diào)用者，那么this指向的是這個(gè)直接調(diào)用者，在沒有直接調(diào)用者（比如回調(diào)函數(shù)）的情況下this指向的是全局對(duì)象（瀏覽器中是window围肥，node中是global）剿干。

三、call和apply改變了什么穆刻？

理解了函數(shù)的直接調(diào)用者和this近范，再說call和apply就比較容易理解了。
在此對(duì)call和apply不做過多的定義性解釋鸟顺，先來看下調(diào)用了call后誰是那個(gè)被執(zhí)行的方法或粮，直接代碼示例：

function fn1 () {
    console.log(1);
};
function fn2 () {
    console.log(2);
};
fn1.call(fn2);//1

執(zhí)行fn1.call(fn2);控制臺(tái)會(huì)打印1，這里可以說明fn1調(diào)用call后被執(zhí)行的方法還是fn1朵锣。一定要弄清楚誰是這個(gè)被執(zhí)行的方法谬盐，就是調(diào)用call的函數(shù)，而fn2現(xiàn)在的身份是替代window作為fn1的直接調(diào)用者诚些，這是理解call和apply的關(guān)鍵飞傀，也可以運(yùn)行下fn2.call(fn1);//2來驗(yàn)證被執(zhí)行的方法是誰。那么call的作用是什么呢诬烹？
再來個(gè)代碼示例：

var obj1 = {
    num : 20,
    fn : function(n){
        console.log(this.num+n);
    }
};
var obj2 = {
    num : 15,
    fn : function(n){
        console.log(this.num-n);
    }
};
obj1.fn.call(obj2,10);//25

執(zhí)行obj1.fn.call(obj2,10);控制臺(tái)會(huì)打印25砸烦，call在此的作用其實(shí)很簡單，就是在執(zhí)行obj1.fn的時(shí)候把這個(gè)fn的直接調(diào)用者由obj1變?yōu)閛bj2椅您，obj1.fn(n)內(nèi)部的this經(jīng)過call的作用指向了obj2外冀，所以this.num就是obj2.num，10作為執(zhí)行obj1.fn時(shí)傳入的參數(shù)掀泳，obj2.num是15雪隧，因此打印出的值是15+10=25。

所以我們可以這樣理解：call的作用是改變了那個(gè)被執(zhí)行的方法(也就是調(diào)用call的那個(gè)方法)的直接調(diào)用者员舵！而這個(gè)被執(zhí)行的方法內(nèi)部的this也會(huì)重新指向那個(gè)新的調(diào)用者脑沿，就是call方法所接收的第一個(gè)obj參數(shù)。還有兩個(gè)特殊情況就是當(dāng)這個(gè)obj參數(shù)為null或者undefined的時(shí)候马僻，this會(huì)指向window庄拇。

四、call和apply的區(qū)別

call方法除了第一個(gè)obj參數(shù)外韭邓，還接受一串參數(shù)作為被執(zhí)行的方法的參數(shù)措近，apply用法和call類似，只不過除第一個(gè)obj參數(shù)外女淑，接收的第二個(gè)參數(shù)是一個(gè)數(shù)組來作為被執(zhí)行的方法的參數(shù)瞭郑。

五、延伸拓展

我們來執(zhí)行下面的代碼：

fn1.call.call(fn2);//2

執(zhí)行fn1.call.call(fn2);控制臺(tái)會(huì)打印出2鸭你，先不說為什么會(huì)打印出2屈张，先來理解下fn1.call.call是什么擒权，call()方法是Function對(duì)象原型鏈上的方法，所以fn1這個(gè)函數(shù)可以通過原型鏈繼承使用這個(gè)方法阁谆，也就是說fn1.call === Function.prototype.call === Function.call碳抄。所以fn1.call.call(fn2) === Function.call.call(fn2)，可以把Function.call先看做一個(gè)整體场绿，用FunCall來表示如下：

FunCall.call(fn2);

這樣就比較好理解剖效，就是fn2作為FunCall的直接調(diào)用者來執(zhí)行FunCall，相當(dāng)于fn2作為直接調(diào)用者執(zhí)行了FunCall()焰盗，而FunCall === Function.call贱鄙，所以就相當(dāng)于是fn2.call()。

此時(shí)call沒有傳入對(duì)象姨谷，那么全局對(duì)象window就會(huì)作為默認(rèn)對(duì)象，也就是相當(dāng)于fn2.call(window)映九，再繼續(xù)解釋就是window.fn2.call(window)梦湘，把fn2的直接調(diào)用對(duì)象由window改變成window，相當(dāng)于沒有改變fn2的直接調(diào)用對(duì)象件甥，所以就相當(dāng)于直接執(zhí)行了fn2();控制臺(tái)會(huì)打印出2捌议。

此外還有Function.call.apply和Function.apply.call等多種組合，原理都類似引有，只不過接收的參數(shù)類型不太一樣瓣颅，可以嘗試一下。加深對(duì)call和apply的理解譬正。

六宫补、補(bǔ)充bind

bind用法和call類似，只不過調(diào)用bind后方法不能立即執(zhí)行需要再次調(diào)用曾我，其實(shí)就是柯里化的一個(gè)語法糖粉怕。我們來實(shí)現(xiàn)一個(gè)簡易版的bind方法，命名為bindFn抒巢，大致就能了解bind了：

Function.prototype.bindFn = function() {
    var args = Array.prototype.slice.call(arguments);//得到傳入的參數(shù)
    var obj = args.shift();//得到第一個(gè)傳入的對(duì)象
    var self = this; // 調(diào)用bindFn的函數(shù)
    
    return function() { // return一個(gè)函數(shù) 實(shí)現(xiàn)柯里化
        //拼接新參數(shù)
        var newArgs = args.concat(Array.prototype.slice.call(arguments));
        //下面這里使用了apply,用來改變self的直接調(diào)用者
        return self.apply(obj,newArgs);
    }
}
//測試一下贫贝，doSum方法實(shí)現(xiàn)對(duì)傳入的參數(shù)的累加，并把累加結(jié)果返回
function doSum(){
    var arg = Array.prototype.slice.call(arguments);
    return arg.length ? arg.reduce((a,b) => a + b) : "";
}
var newDoSum = doSum.bindFn(null,1,2,3);
console.log(newDoSum());//6
console.log(newDoSum(4));//10
console.log(newDoSum(4,5));//15