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 во второй раз.

Я уверен, что я что-то здесь упускаю. Я думал, что внутренняя функция может получить доступ к переменным, проводимым снаружи. Может кто-нибудь, пожалуйста, направить меня? Я более функциональный разработчик пользовательского интерфейса и не имею большого опыта работы с ОО-кодом.

Спасибо!

Answer 1

Проблема в том, что внутри echo this значение указывает на глобальный объект, и this.test а также this.val (которые имеют в виду window.test а также window.val) являются undefined,

Вы можете установить this значение эха, вызывая его как:

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() или же 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");