JavaScript OOPS問題

Question

JavaScript的新手在這裏。我有以下代碼：

function testObject(elem) { 
    this.test = "hi"; 
    this.val = elem; 
    console.log(this.test+this.val); 
    echo(); 

    function echo() { 
     console.log(this.test+this.val); 
    } 
} 

var obj = new testObject("hello"); 

當它運行時，我希望在控制檯輸出兩次「hihello」。相反，它首次按預期輸出，但第二次返回NaN。

我確定我在這裏錯過了一些東西。我認爲內部功能可以訪問外面的變量。有人能指導我嗎？我更像是一個功能強大的UI開發人員，並且沒有太多面向對象代碼的經驗。

謝謝！

Answer 1

的問題是，內部echo的this值指向全局對象，和this.test和this.val（其指的是window.test和window.val）是undefined。

您可以通過調用它像設置回聲的this值：

echo.call(this); 

這是因爲你被echo();調用的函數，那麼this值被隱式設置爲全局對象。

查看this question瞭解this價值如何工作。

編輯：爲了能夠調用剛剛echo();你應該堅持從外部功能方面的this值，有很多方法可以做到這一點，例如：

//... 
var instance = this; // save the outer `this` value 
function echo(){ 
    console.log(instance.test+instance.val); // use it 
} 
echo(); 
//... 

或者

Answer 2

你也這樣做：

function testObject(elem) { 
    this.test = "hi"; 
    this.val = elem; 
    console.log(this.test+this.val); 

    this.echo = function() { 
     console.log(this.test+this.val); 
    } 
    this.echo(); 
} 

var obj = new testObject("hello"); 

每當您撥打this.echo()或obj.echo(),this將被綁定到調用該函數的對象。

Answer 3

就個人而言，我覺得它優雅的聲明這樣的類方法：

function testObject(elem) { 
    this.test = "hi"; 
    this.val = elem; 
    this.echo(); 
} 

testObject.prototype = { 
    echo: function() { 
     console.log(this.test + this.val); 
    } 
} 

var obj = new testObject("hello");