2樓說的不錯.

我補充幾點

先說下apply()函數

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

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

第三個this指向的是使用new調用構造函數pageA 實例化的對象

關于 this 關鍵字 參考此鏈接

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

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

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

?第一個和第二個this都在next()函數的內部

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

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

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

new?pageA($pageA);

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

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

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

那么第三個this就是由

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

我們再看bind()函數

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()函數 綁定的是參數的值，而不是實際變量的值。

再看這個例子

this.num?=?9;?

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

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

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

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

boundGetNum();??//?81

由此,我們可以得出結論

bind()函數 改變了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)
????
????//?這里調用的就是上面聲明的next方法
????//?注意?上面用var聲明的next()是沒有定義參數的
????//?但是用了?arguments?這個關鍵字取得了傳入的參數
????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();
????})??
}