2樓說(shuō)的不錯(cuò).

我補(bǔ)充幾點(diǎn)

先說(shuō)下apply()函數(shù)

var?add?=?function(a,b){
????return?a?+?b;
}
var?sub?=?function(a,b){
????return?a?-?b;
}

var?result?=?add.apply(sub,[8,1]);
var?result_1?=?sub.apply(add,[8,1]);
console.log(result);?//?9
console.log(result_1);?//?7

apply()是函數(shù)對(duì)象的一個(gè)方法，
它的作用是改變函數(shù)的調(diào)用對(duì)象，
它的第一個(gè)參數(shù)就表示改變后的調(diào)用這個(gè)函數(shù)的對(duì)象。

而第一個(gè)和第二個(gè)this是指向global或window對(duì)象

第三個(gè)this指向的是使用new調(diào)用構(gòu)造函數(shù)pageA 實(shí)例化的對(duì)象

關(guān)于 this 關(guān)鍵字 參考此鏈接

http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

我們分析一下var next = function(){...}這個(gè)函數(shù)

var?next?=?function(){
???return?this.next.apply(this,arguments);
}.bind(this)

?第一個(gè)和第二個(gè)this都在next()函數(shù)的內(nèi)部

而第三個(gè)this就不在next()的內(nèi)部,而是屬于pageA.prototype.run = function(callback){...}這個(gè)函數(shù)內(nèi)部了.

而next()函數(shù)是全局對(duì)象global或window的方法,所以在next()函數(shù)內(nèi)部的this就是指向他們了

而pageA.prototype.run = function(callback){...}這個(gè)函數(shù)內(nèi)部的this是如下傳遞過(guò)來(lái)的

new?pageA($pageA);

function?pageA?(element)?{
????//?this?指向pageA的實(shí)例對(duì)象
????//根元素
????this.$root?=?element;
????//小男孩
????this.$boy?=?element.find(".chs-boy");
????//?執(zhí)行pageA的實(shí)例對(duì)象的run方法
????this.run();
}

如果我們給這個(gè)實(shí)例對(duì)象命個(gè)名

var?something?=?new?pageA($pageA);

那么第三個(gè)this就是由

this.run(); 傳遞過(guò)來(lái)的something對(duì)象了

我們?cè)倏?em>bind()函數(shù)

function?add(a,b){????
????return?a?+?b;
}
var?a?=?3;
var?b?=?4;
var?newFoo?=?add.bind(this,a,?b);?
a?=?6;
b?=?7;
console.log(newFoo());??//?7
console.log(this.a);??//?6
console.log(this.b);?//?7

由此,我們可以得出結(jié)論

bind()函數(shù) 綁定的是參數(shù)的值，而不是實(shí)際變量的值。

再看這個(gè)例子

this.num?=?9;?

var?module?=?{??
num:?81,?
getNum:?function()?{?return?this.num;}
}

?
module.getNum();?//?81

var?getNum?=?module.getNum;
getNum();?//?9,?因?yàn)樵谶@個(gè)例子中，"this"指向全局對(duì)象

//?創(chuàng)建一個(gè)'this'綁定到module的函數(shù)
var?boundGetNum?=?getNum.bind(module);

boundGetNum();??//?81

由此,我們可以得出結(jié)論

bind()函數(shù) 改變了this的指向

綜上

我們完全可以這樣寫(xiě)

//?給pageA添加run方法
pageA.prototype.run?=?function(){

????//?存儲(chǔ)當(dāng)前上下文對(duì)象:?pageA的實(shí)例對(duì)象
????var?that?=?this;
????
????//?定義next方法?注意:此處不是pageA的next方法
????//?而是是pageA的run方法里面的next方法.
????var?next?=?function(){
????????return?this.next.apply(this,arguments)
????????//?注意?這里不寫(xiě)this?寫(xiě)的是that?意圖更明顯
????}.bind(that)
????
????//?這里調(diào)用的就是上面聲明的next方法
????//?注意?上面用var聲明的next()是沒(méi)有定義參數(shù)的
????//?但是用了?arguments?這個(gè)關(guān)鍵字取得了傳入的參數(shù)
????next({
????????"time":?10000,
????????"style":?{
????????????"top":?"4rem",
????????????"right":?"16rem",
????????????"scale":?"1.2"
????????}
????})
????.then(function()?{
???????return?next({
????????????"time":500,
????????????"style":?{
???????????????"rotateY"?:?"-180",
???????????????"scale":?"1.5"
????????????}
????????})
????})????
????.then(function()?{
????????return?next({
????????????"time":?7000,
????????????"style":?{
????????????????"top"???:"7.8rem",
????????????????"right"?:?"1.2rem"
????????????}
????????})
????})
????.then(function(){
????????that.stopWalk();
????})??
}

就目前的情況也可以這樣寫(xiě)

?//?給pageA添加run方法
pageA.prototype.run?=?function(){
????this.next({
????????"time":?10000,
????????"style":?{
????????????"top":?"4rem",
????????????"right":?"16rem",
????????????"scale":?"1.2"
????????}
????})
????.then(function()?{
???????return?this.next({
????????????"time":500,
????????????"style":?{
???????????????"rotateY"?:?"-180",
???????????????"scale":?"1.5"
????????????}
????????})
????})????
????.then(function()?{
????????return?this.next({
????????????"time":?7000,
????????????"style":?{
????????????????"top"???:"7.8rem",
????????????????"right"?:?"1.2rem"
????????????}
????????})
????})
????.then(function(){
????//?注意:?此處不再是that
????????this.stopWalk();
????})??
}