Question

我试图了解以下三个功能之间的区别。一天后，我在MDN和其他来源上提出了一些“结论”，我想知道是否有人可以帮助我验证它们。谢谢:)

BLOCK＃1（基于原型的构造函数示例）

function Person (name){
    this.name = name;
    this.greeting = function(){
      alert(this.name);
      };
    }
  var person = new Person('Bob');

BLOCK＃2（另一个基于原型的构造函数示例）

function Person(name) {
      this.name = name;
    }
    Person.prototype.greeting = function() {
      alert(this.name);
    }
  let person = new Person("Bob");

第3块（基于原型的ES6类示例）

 class Person {
   constructor(name) {
     this.name = name;
   }
   greeting() {
     alert(this.name);
   }
 }
 let person = new Person("Bob");

问题：

这三个函数将名称和问候语成员添加到Person对象原型。这句话正确吗？
代码使用了新的ES6 class关键字，并以不同的方式在“幕后”工作。（附言。我之所以写“幕后花絮”，是因为我尚不清楚调用该函数时引擎盖下会发生什么，但暂时我认为我还不算太深，无法深入研究）。
第1块和第2块中的代码达到相同，并且以相同的方式在“幕后”工作。两者之间的代码差异在于，在＃1块中，我们将name变量和函数greeting都保留在同一代码块中，而在＃2块中，我们将函数{{ } 1}}与变量greeting分开（使用name将greeting函数添加到Person原型中）
在＃2块中使用Person.prototype.greeting，我们获得的效果与在＃1块中的Person.prototype.greeting = function () {...}下方放置this.greeting = function (...)

谢谢！

Answer 1

回答问题：

不，该语句是不正确的，两个代码都没有将“名称”添加到原型，只有代码块＃2和＃3将问候添加到了原型。
这可能太深了，我无法验证幕后到底发生了什么，但是代码本质上表现为代码块2。
代码块＃1和＃2绝对不能以相同的方式工作，也不能达到相同的最终结果。第一块（我要提醒您，正如我所写的，因为我是在假设您粘贴粘贴错误的情况下操作的），将创建对象的实例并分配属性 name 和功能 greeting 到新创建的实例，而代码块2将为属性 name 分配实例，但是功能 greeting 到原型，所以问题＃3的另一半是正确的。
绝对不是，对于使用块＃1创建的每个对象，您都在定义和创建函数 greeting 的新实例并将其附加到新创建的对象上，而不是在以下位置使用原型继承在这种情况下都是如此。

基于原型的构造函数和ES6类之间的区别

BLOCK＃1（基于原型的构造函数示例）

BLOCK＃2（另一个基于原型的构造函数示例）

第3块（基于原型的ES6类示例）

1 个答案: