javascript - 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.testand this.val（指的是window.testand window.val）是undefined.

您可以this通过调用它来设置 echo 的值，如下所示：

echo.call(this);

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

看看这个问题以了解该this值是如何工作的。

编辑：为了能够只调用echo();你应该this从外部函数上下文中保存值，有很多方法可以做到这一点，例如：

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

或者

//...
var echo = (function (instance) {
  return function () {
    console.log(instance.test+instance.val);
  };
})(this); // pass the outer `this` value
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()orobj.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");