摘要：函數(shù)的幾種調(diào)用方式普通函數(shù)調(diào)用作為方法來(lái)調(diào)用作為構(gòu)造函數(shù)來(lái)調(diào)用使用方法來(lái)調(diào)用方法箭頭函數(shù)但是不管函數(shù)是按哪種方法來(lái)調(diào)用的，都需要記住一點(diǎn)誰(shuí)調(diào)用這個(gè)函數(shù)或方法關(guān)鍵字就指向誰(shuí)。作為構(gòu)造函數(shù)來(lái)調(diào)用構(gòu)造函數(shù)出來(lái)的實(shí)例，指向這個(gè)實(shí)例對(duì)象。

首先，了解一下this關(guān)鍵字。this關(guān)鍵字就涉及到函數(shù)調(diào)用的內(nèi)容。函數(shù)的幾種調(diào)用方式:

1 普通函數(shù)調(diào)用
2 作為方法來(lái)調(diào)用
3 作為構(gòu)造函數(shù)來(lái)調(diào)用
4 使用apply/call方法來(lái)調(diào)用
5 Function.prototype.bind方法
6 ES6箭頭函數(shù)

但是不管函數(shù)是按哪種方法來(lái)調(diào)用的，都需要記住一點(diǎn)：誰(shuí)調(diào)用這個(gè)函數(shù)或方法,this關(guān)鍵字就指向誰(shuí)。

var age = 18;
function person(){
    this.name = "Tony";
    console.log(this);      //window
    console.log(this.name); //Tony
    console.log(this.age);  //18
}
person();

代碼中定義一個(gè)普通函數(shù)person，在調(diào)用時(shí)實(shí)際上person是作為全局對(duì)象window的一個(gè)方法來(lái)進(jìn)行調(diào)用的，即window.person();
因此是window對(duì)象調(diào)用了person方法，那么person函數(shù)當(dāng)中的this即指window，同時(shí)window還擁有了另外一個(gè)屬性name,值為“Tony”。

定義一個(gè)全局變量age，它相當(dāng)于是window的一個(gè)屬性。在調(diào)用person函數(shù)時(shí)它的this指向window，所以在函數(shù)內(nèi)部可以訪問(wèn)到age變量，這也解釋了函數(shù)內(nèi)部可訪問(wèn)全局變量。

var person = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
person.showName();

var name = "Tom";
var showname = person.showName;
showname();

定義一個(gè)對(duì)象person包含一個(gè)showName的方法，在對(duì)象person內(nèi)調(diào)用方法返回的是Tony，顯然this指向了對(duì)象person。

再定義一個(gè)全局變量name，將person.showName方法賦值給變量showname，因?yàn)樵谌侄x的嘛，所以showname也相當(dāng)于window的一個(gè)屬性，此時(shí)調(diào)用showname它的this是指向window的，所以返回的值就是全局變量“Tom”。

var personA = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
var personB = {
    name : "Tom",
    sayName:personA.showName
}
personB.sayName();    //Tom

personB對(duì)象中的方法調(diào)用personA中的方法，雖然showName是personA中定義的，但調(diào)用了personB，那this就指向了personB。

function Person(name){
    this.name = name;
}
var personA = new Person("Tony");
console.log(personA.name);

構(gòu)造函數(shù)new出來(lái)的實(shí)例，this指向這個(gè)實(shí)例對(duì)象。

下面就來(lái)了解一下this指向改變的三種方法。

在JavaScript中，call、apply和bind是Function對(duì)象自帶的三個(gè)方法，這三個(gè)方法的主要作用是改變函數(shù)中的this指向。所以可知它們的共同點(diǎn)就是都用來(lái)改變函數(shù)的this對(duì)象的指向的；還有就是三者第一個(gè)參數(shù)都是this要指向的對(duì)象，也就是想指定的上下文（函數(shù)的每次調(diào)用都會(huì)擁有一個(gè)特殊值——本次調(diào)用的上下文（context）——這就是this關(guān)鍵字的值。），然后再利用后續(xù)參數(shù)傳參。而它們的不同也就是傳參的不同，bind?是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply?、call?則是立即調(diào)用 。

它接收兩個(gè)參數(shù)，一個(gè)是函數(shù)運(yùn)行的作用域（this），另一個(gè)是參數(shù)數(shù)組。

語(yǔ)法：

apply([thisObj [,argArray] ]);

定義：應(yīng)用某一對(duì)象的一個(gè)方法，用另一個(gè)對(duì)象替換當(dāng)前對(duì)象

說(shuō)明：如果argArray不是一個(gè)有效數(shù)組或不是arguments對(duì)象，那么將導(dǎo)致一個(gè)?TypeError，如果沒(méi)有提供argArray和thisObj任何一個(gè)參數(shù)，那么Global對(duì)象將用作thisObj。

function Person(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Student(name){
    Person.apply(this,arguments);
}
var stu = new Student("Tony");
stu.showName();

它第一個(gè)參數(shù)和apply()方法的一樣，但是傳遞給函數(shù)的參數(shù)必須列舉出來(lái)。

語(yǔ)法：

call([thisObject[,arg1 [,arg2 [,...,argn]]]]);

定義：調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。

說(shuō)明：?call方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，call方法可以將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)閠hisObj指定的新對(duì)象。

thisObj取值的情況：

1 不傳，或者傳null,undefined， 函數(shù)中的this指向window對(duì)象
2 傳遞另一個(gè)函數(shù)的函數(shù)名，函數(shù)中的this指向這個(gè)函數(shù)的引用
3 傳遞字符串、數(shù)值或布爾類(lèi)型等基礎(chǔ)類(lèi)型，函數(shù)中的this指向其對(duì)應(yīng)的包裝對(duì)象，如 String、Number、Boolean
4 傳遞一個(gè)對(duì)象，函數(shù)中的this指向這個(gè)對(duì)象

call方法的一些常見(jiàn)例子：

1.

function add(a,b){
    console.log(a+b);
}
function subtraction(a,b){
    console.log(a-b);
}
add.call(subtraction,3,1);    //4

定義一個(gè)加法函數(shù)、加法函數(shù)，最后的調(diào)用語(yǔ)句意思就是用加法替代了減法，在減法函數(shù)中通過(guò)call方法改變了this的指向，已經(jīng)不再計(jì)算a-b，而是作用加法中的a+b。

2.

function Student(){
    this.name = "Tom";
    this.showName = function(){
        console.log(this.name);
    }
}
function Teacher(){
    this.name = "Tony";
}
var stu = new Student();
var tea = new Teacher();
stu.showName.call(tea);

定義一個(gè)學(xué)生函數(shù)，它有屬性name和方法showName，而老師函數(shù)只有name屬性，最后一個(gè)調(diào)用語(yǔ)句的意思就是把學(xué)生的方法用到了老師函數(shù)中執(zhí)行，即便老師是沒(méi)有這個(gè)方法的。

3.

function Parent(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Son(name){
    Parent.call(this,name);
}
var baby = new Son("Tony");
baby.showName();

Parent.call(this,name)意思就是使用父母這個(gè)對(duì)象替代掉兒子函數(shù)中的this對(duì)象，那么這個(gè)兒子函數(shù)中就可以直接調(diào)用父母對(duì)象中的屬性和方法，這也就是繼承。

bind()最簡(jiǎn)單的用法是創(chuàng)建一個(gè)函數(shù)，使這個(gè)函數(shù)不論怎么調(diào)用都有同樣的this值。

var person = {
    name : "Tony",
    showName : function(){
        console.log(this.name);
    }
}
person.showName();      //Tony

var name = "Tom";
var getName = person.showName;
getName();              //Tom

var boundGetName = getName.bind(person);
boundGetName();         //Tony