從另一個對象方法內訪問對象屬性

Question

我有一個存儲一堆方法的Javascript對象，並且還存儲了一些變量。在正常情況下，當方法嘗試訪問對方或變量時，它可以很好地工作，但是如果方法從超出範圍調用（例如，通過另一個回調），它們將不再能夠訪問該變量。

實施例的jsfiddle這裏：http://jsfiddle.net/3Lkuz2Lk/2/

下面是示例代碼來說明該問題：

var obj = { 
 
     x: null, 
 
     func1: function() { 
 
\t  console.log('func1, x is ' + this.x); 
 
     }, 
 

 
     func2: function() { 
 
\t  console.log("func2"); 
 
     this.func1(); 
 

 
\t  var func1 = this.func1; 
 
     func3(function() { 
 
    \t  func1(); 
 
     }); 
 
     } 
 
    }; 
 

 
    function func3(callback) { 
 
\t console.log("func3"); 
 
\t return callback(); 
 
    } 
 

 
    obj.func2();

從上面的代碼的輸出是：

func2 
func1, x is null 
func3 
func1, x is undefined 

什麼是沒有不清楚爲什麼第二次func1被稱爲x是未定義的？

如果我需要做到這一點（即能夠訪問對象中的方法和變量，無論它們從哪個上下文中調用），我該如何實現這一點？我發現上面的方法是不乾淨的，因爲我需要存儲func1參考，以便使其可用於調用func3，並且我希望有一種更清潔/更簡單的方法。

Answer 1

var obj = { 
 
     x: null, 
 
     func1: function() { 
 
    console.log('func1, x is ' + this); 
 
     }, 
 

 
     func2: function() { 
 
    console.log("func2"); 
 
     this.func1(); 
 

 
    var func1 = this.func1; 
 
     func3(func1); 
 
     } 
 
    }; 
 

 
    function func3(callback) { 
 
    console.log("func3"); 
 
    return callback(); 
 
    } 
 

 
obj.func2();

這是因爲這是在兩種情況下不同，在第一種情況下這點到對象，而在下一個這個引用全局對象/窗口。你必須做的

var obj = { 
 
     x: null, 
 
     func1: function() { 
 
    console.log('func1, x is ' + this.x); 
 
     }, 
 

 
     func2: function() { 
 
    console.log("func2"); 
 
     this.func1(); 
 

 
    var func1 = this.func1.bind(this); 
 
     func3(func1); 
 
     } 
 
    }; 
 

 
    function func3(callback) { 
 
    console.log("func3"); 
 
    return callback(); 
 
    } 
 

 
obj.func2();

Answer 2

你必須使用bind(this)，閱讀更多關於它here：

var func1 = this.func1.bind(this); 

Answer 3

我已經簡化了代碼。問題在於參考。您可以致電func3，它屬於自己的範圍，不屬於obj的範圍鏈。所以這是指func3的範圍。如果您bindthis從obj到它的回調工作。

var obj = { 
 
    x: null, 
 
    func1: function() { 
 
    console.log('func1, x is ' + this.x); 
 
    }, 
 

 
    func2: function() { 
 
    console.log("func2"); 
 
    this.func1(); 
 

 
    func3(this.func1.bind(this)); 
 
    } 
 
}; 
 

 
function func3(callback) { 
 
    console.log("func3"); 
 
    return callback(); 
 
} 
 

 
obj.func2();

使用call另一個解決方案是在該小提琴http://jsfiddle.net/3Lkuz2Lk/3/