2樓說的不錯.

我補充幾點

先說下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ù)對象的一個方法，
它的作用是改變函數(shù)的調(diào)用對象，
它的第一個參數(shù)就表示改變后的調(diào)用這個函數(shù)的對象。

而第一個和第二個this是指向global或window對象

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

關于 this 關鍵字 參考此鏈接

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

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

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

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

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

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

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

new?pageA($pageA);

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

如果我們給這個實例對象命個名

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

那么第三個this就是由

this.run(); 傳遞過來的something對象了

我們再看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

由此,我們可以得出結論

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

再看這個例子

this.num?=?9;?

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

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

var?getNum?=?module.getNum;
getNum();?//?9,?因為在這個例子中，"this"指向全局對象

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

boundGetNum();??//?81

由此,我們可以得出結論

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

綜上

我們完全可以這樣寫

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

????//?存儲當前上下文對象:?pageA的實例對象
????var?that?=?this;
????
????//?定義next方法?注意:此處不是pageA的next方法
????//?而是是pageA的run方法里面的next方法.
????var?next?=?function(){
????????return?this.next.apply(this,arguments)
????????//?注意?這里不寫this?寫的是that?意圖更明顯
????}.bind(that)
????
????//?這里調(diào)用的就是上面聲明的next方法
????//?注意?上面用var聲明的next()是沒有定義參數(shù)的
????//?但是用了?arguments?這個關鍵字取得了傳入的參數(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();
????})??
}

就目前的情況也可以這樣寫

?//?給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();
????})??
}