Создание конструкторов с использованием this вместо простого возврата объекта

Моего знания слов может быть недостаточно, чтобы самому найти это объяснение на сайте www. Так что извините, если это может быть дубликат.

В настоящее время я пытаюсь понять, почему мы используем «this» в конструкторе функции вместо того, чтобы просто возвращать объект?

Например. это JSFiddle

// Using this inside function
function Student1(first,last) {
    this.firstName = first;
  this.lastName = last;
  this.display = function(){
    return this.firstName + " " + this.lastName;
  };
}

const harry = new Student1("Harry", "Potter");

document.querySelector("div").innerHTML = harry.display();

document.querySelector("div").innerHTML += "<br>";


// Returning object
function Studen2(first,last){
    return {
    firstName: first,
    lastName: last,
    display(){
        return this.firstName + " " + this.lastName;
    }
  };
}

const ron = new Student1("Ron", "Weasley");

document.querySelector("div").innerHTML += ron.display();

Кто-нибудь может объяснить или направить меня в правильном направлении?

0
0
43
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Как правило, вам нужно определить методы объекта в прототипе класса, чтобы их не приходилось повторно создавать каждый раз, когда вы создаете новый экземпляр класса, например:

function Student1(first,last) {
    this.firstName = first;
    this.lastName = last;
}

Student1.prototype.display = function() {
    return this.firstName + " " + this.lastName;
}

const harry = new Student1("Harry", "Potter");

document.querySelector("div").innerHTML = harry.display();

Если вы просто вернете (анонимный) объект, у него не будет прототипа, и вам придется определять функцию каждый раз, когда вызывается функция построения.

Также в вашем примере:

harry instanceof Student1 // true
ron  instanceof Student2 // false

Таким образом, вы не можете использовать instanceof.

Хорошо, вы ответили на один вопрос, но создали новый. Вы уже пытались объяснить почему, но я этого не понял (извините за тупость). Почему лучше использовать "Student1.prototype.display = ..." вместо того, чтобы создавать его внутри функции?

Tanckom 10.09.2018 11:12

Это более эффективно. При использовании прототипа функция существует только один раз, независимо от того, сколько у вас экземпляров класса (даже если их 0). При его создании необходимо выделить память для каждого экземпляра создаваемого вами класса.

Bart van den Burg 10.09.2018 11:15

Это происходит только для метода toString или вообще для каждого метода?

Tanckom 10.09.2018 11:26

Для каждого метода

Bart van den Burg 11.09.2018 15:05

this работает с прототипом создаваемой функции, тогда как простой объект имеет другой прототип в цепочке прототипов. У него нет собственного прототипа инстанцируемой функции.

Вы можете добавить к прототипу новый метод и посмотреть на разницу.

// Using this inside function
function Student1(first,last) {
    this.firstName = first;
  this.lastName = last;
  this.display = function(){
    return this.firstName + " " + this.lastName;
  };
}

const harry = new Student1("Harry", "Potter");

Student1.prototype.morning = function () { return 'good morning ' + this.firstName + " " + this.lastName; };

console.log(harry.morning());



// Returning object
function Studen2(first,last){
    return {
    firstName: first,
    lastName: last,
    display(){
        return this.firstName + " " + this.lastName;
    }
  };
}

const ron = new Student1("Ron", "Weasley");

Student2.prototype.morning = function () { return 'good morning ' + this.firstName + " " + this.lastName; };

console.log(ron.morning());

Другие вопросы по теме