Создание конструкторов с использованием «this» вместо простого возврата объекта - PullRequest
Новая
       7

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

0 голосов
/ 10 сентября 2018

Моего знания слов может быть недостаточно, чтобы самому найти объяснение на 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();

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

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

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());
0 голосов
/ 10 сентября 2018

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

. 
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.

...