首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >基于原型的构造函数与ES6类的区别

基于原型的构造函数与ES6类的区别
EN

Stack Overflow用户
提问于 2019-01-12 21:24:46
回答 1查看 76关注 0票数 1

我试图理解以下三个函数之间的区别。在MDN和其他消息来源一天后,我得出了一些“结论”,我想知道是否有人能帮助我验证这些结论。谢谢您:)

块#1 (基于原型的构造函数示例)

代码语言:javascript
运行
复制
function Person (name){
    this.name = name;
    this.greeting = function(){
      alert(this.name);
      };
    }
  var person = new Person('Bob');

块2(另一个基于原型的构造函数示例)

代码语言:javascript
运行
复制
function Person(name) {
      this.name = name;
    }
    Person.prototype.greeting = function() {
      alert(this.name);
    }
  let person = new Person("Bob");

块#3 (基于原型的ES6类示例)

代码语言:javascript
运行
复制
 class Person {
   constructor(name) {
     this.name = name;
   }
   greeting() {
     alert(this.name);
   }
 }
 let person = new Person("Bob");

问题:

  1. 这三个函数将姓名和问候成员添加到Person对象原型中。这个说法正确吗?
  2. 块#3中的代码使用新的ES6类关键字,并以与块#1和块2中的代码不同的方式“幕后”工作。我写“幕后”,因为我还没有一个清楚的看法,在引擎盖下发生了什么,当我调用这个函数,但暂时我认为我是太新的深潜)。
  3. 块#1和块#2中的代码到达相同的位置,并以相同的方式“在幕后”工作。这两种代码的不同之处在于,在块#1中,我们将name变量和函数greeting保留在同一个代码块中,而在块#2中,函数greeting与变量name保持分离(使用Person.prototype.greetinggreeting函数添加到Person原型中)。
  4. 在第2块中使用Person.prototype.greeting = function () {...},与在第1块中将this.greeting = function (...)置于this.name以下的结果相同

谢谢!

EN

回答 1

Stack Overflow用户

发布于 2019-01-12 21:47:16

回答以下问题:

  1. 不,语句不正确,两种代码都不向原型添加“名称”,只有代码块#2和#3向原型添加问候语。
  2. 这可能太深了,我无法验证幕后到底发生了什么,但代码本质上表现为块#2。
  3. 代码块#1和#2肯定不会以相同的方式工作,也不会达到相同的结果。第一个块(我必须提醒您,因为我是在假设您在复制粘贴中出错的情况下操作的)将创建一个对象的实例,并将属性name和function 之和分配给新创建的实例,而代码块#2将把property name分配给实例,但是函数问候语给原型,所以问题#3的另一半是正确的。
  4. 绝对不是,对于使用块#1创建的每个对象,您定义并创建了一个函数之和的新实例,并将其附加到新创建的对象上,在本例中,您根本没有使用原型继承。
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54163996

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档