【问题标题】:Creating constructors using "this" instead of simply returning an object使用“this”创建构造函数,而不是简单地返回一个对象
【发布时间】:2018-09-10 08:52:23
【问题描述】:

我的单词知识可能不足以我自己在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();

有人愿意解释或指导我正确的方向吗?

【问题讨论】:

    标签: javascript function object this


    【解决方案1】:

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

    【讨论】:

      【解决方案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 = ...”而不是在函数内部创建它更好?
      • 效率更高。使用原型,该函数只存在一次,无论您拥有多少个类实例(即使有 0 个)。内联创建它时,必须为您创建的类的每个实例分配内存。
      • 这种情况只发生在 toString 方法上还是一般情况下发生在每个方法上?
      • 对于每个方法
      猜你喜欢
      • 2015-11-26
      • 2011-11-13
      • 2012-11-06
      • 2013-09-24
      • 2018-07-06
      • 1970-01-01
      • 2020-11-03
      • 2017-04-13
      相关资源
      最近更新 更多