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