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");