Object.create()

╰+哭是因爲堅強的太久メ 2023-06-13 06:05 55阅读 0赞 
  1. Object.create(proto, [propertiesObject])
  2. //方法创建一个新对象，使用现有的对象来提供新创建的对象的proto。

参数：

  • proto : 必须。表示新建对象的原型对象，即该参数会被赋值到目标对象(即新对象，或说是最后返回的对象)的原型上。该参数可以是null， 对象， 函数的prototype属性 （创建空的对象时需传null , 否则会抛出TypeError异常）。
  • propertiesObject : 可选。 添加到新创建对象的可枚举属性（即其自身的属性，而不是原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

返回值：
在指定原型对象上添加新属性后的对象。

Object.create()与new Object()
在js中，创建对象有三种方式

  • {} // 对象字面量
  • new Object()
  • Object.create()

1和2的区别很小，1不能传参，2可以传参。
new Object() 和Object.create() 区别就比较大了

new关键字
new 关键字做了几件事
（1）创建一个新对象
（2）将新对象的原型指向构造函数的原型
（3）执行构造函数，绑定this
（4）返回这个对象

比如创建一个Car对象，伪代码

  1. // new Car()
  2. var obj = new Object()
  3. obj._proto_ = Car.prototype
  4. // 执行构造函数, 绑定this
  5. Car.call(obj)

我们注意到比较关键的地方是，它调用了Car对象的构造函数，并通过call将obj的this绑定到了Car对象上，这一步操作将Car对象上的属性，继承到了obj上。

Object.create()
它同样是创建一个新对象，将新对象的原型关联到构造函数上

  1. var f = function() {
  2.      }
  3. f.prototype = Car
  4. return new f()

比较鲜明的地方是在继承的时候
子类去继承父类的原型方法的时候，很多人会这样写

  1. // 父类是People，子类是Male
  2. Male.prototype = new People()

new确实能够继承，但是调用了父类的构造函数，把父类的属性也给继承到了原型上，但是我们仅仅只是想要父类的原型方法，所以这样写是存在副作用的
正确的写法应该是

  1. Male.prototype = Object.create(People.prototype)

这种方式，不会调用父类的构造函数，而是生成新对象，将新对象与父类原型关联，然后new这个新对象返回，将 new 构造函数的方式转变了成 new 新对象的方式，这样就更加纯净，干脆。

（1）创建对象的方式不同
new Object() 通过构造函数来创建对象, 添加的属性是在自身实例下。
Object.create() es6创建对象的另一种方式，可以理解为继承一个对象, 添加的属性是在原型下。

  1. // new Object() 方式创建
  2. var a = {
  3.       rep : 'apple' }
  4. var b = new Object(a)
  5. console.log(b) // {rep: "apple"}
  6. console.log(b.__proto__) // {}
  7. console.log(b.rep) // {rep: "apple"}
  9. // Object.create() 方式创建
  10. var a = {
  11.      rep: 'apple' }
  12. var b = Object.create(a)
  13. console.log(b)  // {}
  14. console.log(b.__proto__) // {rep: "apple"}
  15. console.log(b.rep) // {rep: "apple"}

Object.create()方法创建的对象时，属性是在原型下面的，也可以直接访问 b.rep // {rep: “apple”} ,
此时这个值不是吧b自身的，是它通过原型链proto来访问到b的值。

（2）创建对象属性的性质不同

  1. // 创建一个以另一个空对象为原型,且拥有一个属性p的对象
  2. o = Object.create({
  3.     }, {
  4.      p: {
  5.      value: 42 } })
  7. // 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
  8. o.p = 24
  9. o.p
  10. //42
  12. o.q = 12
  13. for (var prop in o) {
  15.    console.log(prop)
  16. }
  17. //"q"
  19. delete o.p
  20. //false

Object.create() 用第二个参数来创建非空对象的属性描述符默认是为false的，而构造函数或字面量方法创建的对象属性的描述符默认为true。看下图解析：
在这里插入图片描述
（3）创建空对象时不同
在这里插入图片描述
当用构造函数或对象字面量方法创建空对象时，对象时有原型属性的，即有_proto_;
当用Object.create()方法创建空对象时，对象是没有原型属性的。

（4）__proto__ 属性
JavaScript 的对象继承是通过原型链实现的。ES6 提供了更多原型对象的操作方法。
__proto__属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。目前只有浏览器环境必须部署有这个属性，其他运行环境不一定要部署，因此不建议使用这个属性，而是使用下面这些来 Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）、Object.create()（生成操作）代替。
Object.create()
描述：该方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__；
格式：Object.create(proto[, propertiesObject])
用法：如果用传统的方法要给一个对象的原型上添加属性和方法，是通过 __propt__ 实现的

  1. var proto = {
  3.     y: 20,
  4.     z: 40,
  5.     showNum(){
  6.     }
  7. };
  8. var o = Object.create(proto);

在这里插入图片描述
如果是不用Object,create()方法，我们是如何给对象原型添加属性和方法的？
-——- 通过构造函数或者类，例如：

  1. //创建一个构造函数或者类
  2. var People = function(){
  3.     }
  4. People.prototype.y = 20
  5. People.prototype.showNum = function() {
  6.     }
  7. //通过构造函数创建实例
  8. var p = new People();
  9. console.log(p.__proto__ === People.prototype) // true

在这里插入图片描述
Object.setPrototypeOf
描述：该方法的作用与 proto 相同，用来设置一个对象的 prototype 对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。
格式：Object.setPrototypeOf(object, prototype)
用法：

  1. var proto = {
  3.     y: 20,
  4.     z: 40
  5. };
  6. var o = {
  7.      x: 10 };
  8. Object.setPrototypeOf(o, proto);

在这里插入图片描述
输出结果中看出，添加的方法是在原型上的。就类似于

  1. obj.__proto__ = proto;

Object.getPrototypeOf()
描述：用于读取一个对象的原型对象；
格式：Object.getPrototypeOf(obj);
用法：

  1. Object.getPrototypeOf('foo') === String.prototype // true
  2. Object.getPrototypeOf(true) === Boolean.prototype // true

Object.create实现类式继承
下面的例子演示了如何使用Object.create()来实现类式继承。这是一个所有版本JavaScript都支持的单继承。

  1. // Shape - 父类(superclass)
  2. function Shape() {
  4.   this.x = 0;
  5.   this.y = 0;
  6. }
  8. // 父类的方法
  9. Shape.prototype.move = function(x, y) {
  11.   this.x += x;
  12.   this.y += y;
  13.   console.info('Shape moved.');
  14. };
  16. // Rectangle - 子类(subclass)
  17. function Rectangle() {
  19.   Shape.call(this); // call super constructor.
  20. }
  22. // 子类续承父类
  23. Rectangle.prototype = Object.create(Shape.prototype);
  24. Rectangle.prototype.constructor = Rectangle;
  26. var rect = new Rectangle();
  28. console.log('Is rect an instance of Rectangle?',
  29.   rect instanceof Rectangle); // true
  30. console.log('Is rect an instance of Shape?',
  31.   rect instanceof Shape); // true
  32. rect.move(1, 1); // Outputs, 'Shape moved.'

如果你希望能继承到多个对象，则可以使用混入的方式。

  1. function MyClass() {
  3.      SuperClass.call(this);
  4.      OtherSuperClass.call(this);
  5. }
  7. // 继承一个类
  8. MyClass.prototype = Object.create(SuperClass.prototype);
  9. // 混合其它
  10. Object.assign(MyClass.prototype, OtherSuperClass.prototype);
  11. // 重新指定constructor
  12. MyClass.prototype.constructor = MyClass;
  14. MyClass.prototype.myMethod = function() {
  16.      // do a thing
  17. };

使用 Object.create 的 propertyObject参数

  1. var o;
  3. // 创建一个原型为null的空对象
  4. o = Object.create(null);
  6. o = {
  7.     };
  8. // 以字面量方式创建的空对象就相当于:
  9. o = Object.create(Object.prototype);
  11. o = Object.create(Object.prototype, {
  13.   // foo会成为所创建对象的数据属性
  14.   foo: {
  16.     writable:true,
  17.     configurable:true,
  18.     value: "hello" 
  19.   },
  20.   // bar会成为所创建对象的访问器属性
  21.   bar: {
  23.     configurable: false,
  24.     get: function() {
  25.      return 10 },
  26.     set: function(value) {
  28.       console.log("Setting `o.bar` to", value);
  29.     }
  30.   }
  31. });
  34. function Constructor(){
  35.     }
  36. o = new Constructor();
  37. // 上面的一句就相当于:
  38. o = Object.create(Constructor.prototype);
  39. // 当然,如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码
  42. // 创建一个以另一个空对象为原型,且拥有一个属性p的对象
  43. o = Object.create({
  44.     }, {
  45.      p: {
  46.      value: 42 } })
  48. // 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
  49. o.p = 24
  50. o.p
  51. //42
  53. o.q = 12
  54. for (var prop in o) {
  56.    console.log(prop)
  57. }
  58. //"q"
  60. delete o.p
  61. //false
  63. //创建一个可写的,可枚举的,可配置的属性p
  64. o2 = Object.create({
  65.     }, {
  67.   p: {
  69.     value: 42, 
  70.     writable: true,
  71.     enumerable: true,
  72.     configurable: true 
  73.   } 
  74. });

参考：Object.create()
Object.create()方法
js 中 new 与 Object.create()的区别

发表评论

表情：
评论列表 （有 0 条评论，55人围观）

还没有评论，来说两句吧...

相关阅读