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开发人员，对OO代码没有多少经验。

谢谢！

Answer 1

问题在于echo内this值指向全局对象，this.test和this.val（指window.test和{ {1}}）window.val。

您可以通过调用它来设置echo的undefined值：

this

这是因为您通过echo.call(this); 调用该函数，然后echo();值被隐式设置为全局对象。

查看this question，了解this值的工作原理。

编辑：为了能够只调用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");