JavaScript:构造函数与原型(prototype)

标签 javascript

之前已经回答过这个问题,但我想确认一下我的理解。在这段代码中:

var somePrototype = {
  speak: function() {
    console.log("I was made with a prototype");
  }
}

function someConstructor() {
  this.speak = function() {
    console.log("I was made with a constructor");
  }
}

var obj1 = Object.create(somePrototype);
var obj2 = new someConstructor();

obj1.speak();
obj2.speak();

他们基本上都在做同样的事情,对吗?唯一的区别是 function someConstructor() 被提升了,这意味着我可以在定义它之前调用它的新实例,如果需要的话,而 var somePrototype 只能是定义后调用。除此之外,没有什么区别吗?

最佳答案

两种方法(使用 Object.create() 和构造函数调用)之间的区别是:

创作:

  • Object.create(somePrototype) 创建一个新对象,使 somePrototype 成为原型(prototype);
  • new someConstructor() 使用构造函数调用创建一个对象。 obj2 的原型(prototype)是一个简单的对象:new Object()

属性继承:

  • obj1 继承了属性speak,这是一个函数。如果此属性在 somePrototype 对象中更改,这将影响使用 Object.create(somePrototype) 创建的继承它的任何对象。
    Object.keys(obj1) 将返回 [],因为该对象没有自己的属性。
  • obj2 包含一个自己的属性 speak。在单个实例上修改此属性不会影响使用 new someConstructor() 创建的任何其他实例。
    Object.keys(obj2) 将返回 ['speak'] 作为其列出的属性。

构造函数:

  • obj1.constructor === Objecttrue
  • obj2.constructor === someConstructortrue

提升:

  • someConstructor 被提升到它创建的范围的顶部。所以它可以在函数声明之前使用。
  • 并且确定 somePrototype 没有随对象文字一起提升,因此应该在设置值之后使用。

检查 this interesting post关于 constructor 属性。

关于JavaScript:构造函数与原型(prototype),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36491719/

相关文章:

javascript - 在运行时检测 javascript 文本或元素溢出

javascript - 将从 JSON 读取的多段落文本渲染到 React 组件中的最佳方法

javascript - 销毁状态更改时的异步请求

javascript - 如何知道在两个相同的项目中单击了什么

javascript - Angular 1.3 重大更改 - 设置范围但在 $apply 之前重置

javascript - Nodejs ExpressJS sendFile 与 Angular 资源

javascript - 组合不同的js对象并按键对它们进行排序

javascript - 使用 jinja 模板将字符串附加到字典值

javascript - 如何在 View 中使用 Angular 常量?

php - 如何更改动态代码中的可折叠菜单图像?