JS中prototype与Object.create

最新推荐文章于 2022-03-30 16:39:04 发布

水星灭绝

最新推荐文章于 2022-03-30 16:39:04 发布

阅读量508

点赞数

分类专栏： h5 前端

本文链接：https://blog.csdn.net/wulong710/article/details/111587950

版权

前端同时被 2 个专栏收录

137 篇文章 0 订阅

订阅专栏

121 篇文章 3 订阅

订阅专栏

本文探讨了JavaScript中`prototype`和`Object.create`的概念。`Object.create`用于创建新对象并继承指定对象的原型。文章通过实例展示了如何使用`Object.create`创建对象，以及与构造函数和`new`关键字的不同。同时，提到了`__proto__`、`Object.getPrototypeOf`、`Object.setPrototypeOf`等方法在原型链操作中的作用，并讨论了`Object.assign`与`Object.getOwnPropertyDescriptors`在属性继承和拷贝中的应用场景。

摘要由CSDN通过智能技术生成

js中的Object.create

例子：

const log = console.log;
let parent = { kp1: "vp1", kp2: "vp2" };
let son = { ks1: "vs1", ks2: "vs2" };
Object.setPrototypeOf(son, parent);
log("keys = ", Object.keys(son));
log("values = ", Object.values(son));
log("getOwnPropertyDescriptors = ", Object.getOwnPropertyDescriptors(son))
log("Object.getOwnPropertyNames(son) = ", Object.getOwnPropertyNames(son));
log("Object.getPrototypeOf(son) === parent = ", Object.getPrototypeOf(son) === parent);
let daughter = Object.create(parent);
log("Object.getOwnPropertyDescriptors(daughter) = ", Object.getOwnPropertyDescriptors(daughter))
daughter.dname = "i am dname";
log("Object.getOwnPropertyDescriptors(daughter) = ", Object.getOwnPropertyDescriptors(daughter))
log("Object.getOwnPropertyDescriptors(parent) = ", Object.getOwnPropertyDescriptors(parent))
log("Object.getPrototypeOf(daughter) = ", Object.getPrototypeOf(daughter));
log("Object.getPrototypeOf(daughter) === parent = ", Object.getPrototypeOf(daughter) === parent);

// 创建一个以另一个空对象为原型,且拥有一个属性p的对象
let o = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });

// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.q = 12;
for (let prop in o) {
    console.log("o prop=", prop, ", v= ", o[prop]);
}
//"q"
log("Object.getOwnPropertyNames(o) = ", Object.getOwnPropertyNames(o));
log("Object.getOwnPropertyNames(Object.getPrototypeOf(o)) = ", Object.getOwnPropertyNames(Object.getPrototypeOf(o)));
delete o.p;
log("after delete Object.getOwnPropertyNames(o) = ", Object.getOwnPropertyNames(o));
log("after delete Object.getOwnPropertyNames(Object.getPrototypeOf(o)) = ", Object.getOwnPropertyNames(Object.getPrototypeOf(o)));

function CParent() {
    this.cparentName = "parent name";
    log("CParent")
}

CParent.prototype.runParent = function() {
    log("runParent-");
}
CParent.prototype.constructor = CParent;

function CSon() {
    this.csonName = "son name";
    log("CSon")
}
CSon.prototype = Object.create(CParent.prototype);
CSon.prototype.constructor = CSon;

log("Object.getPrototypeOf(CSon) = ", Object.getPrototypeOf(CSon));
log("Object.getPrototypeOf(CParent) = ", Object.getPrototypeOf(CParent));
log(Object.getPrototypeOf(CParent) === Object.getPrototypeOf(CSon));

let cs = new CSon();
log("cs instanceof CParent = ", cs instanceof CParent);
log("cs instanceof CSon = ", cs instanceof CSon);
log("Object.getPrototypeOf(CParent) = ", Object.getPrototypeOf(CParent));
log("Object.getPrototypeOf(CSon) = ", Object.getPrototypeOf(CSon));

结果：

$ node for.js
keys =  [ 'ks1', 'ks2' ]
values =  [ 'vs1', 'vs2' ]
getOwnPropertyDescriptors =  {
  ks1: {
    value: 'vs1',
    writable: true,
    enumerable: true,
    configurable: true
  },
  ks2: {
    value: 'vs2',
    writable: true,
    enumerable: true,
    configurable: true
  }
}
Object.getOwnPropertyNames(son) =  [ 'ks1', 'ks2' ]
Object.getPrototypeOf(son) === parent =  true
Object.getOwnPropertyDescriptors(daughter) =  {}
Object.getOwnPropertyDescriptors(daughter) =  {
  dname: {
    value: 'i am dname',
    writable: true,
    enumerable: true,
    configurable: true
  }
}
Object.getOwnPropertyDescriptors(parent) =  {
  kp1: {
    value: 'vp1',
    writable: true,
    enumerable: true,
    configurable: true
  },
  kp2: {
    value: 'vp2',
    writable: true,
    enumerable: true,
    configurable: true
  }
}
Object.getPrototypeOf(daughter) =  { kp1: 'vp1', kp2: 'vp2' }
Object.getPrototypeOf(daughter) === parent =  true
o prop= p , v=  42
o prop= q , v=  12
Object.getOwnPropertyNames(o) =  [ 'p', 'q' ]
Object.getOwnPropertyNames(Object.getPrototypeOf(o)) =  []
after delete Object.getOwnPropertyNames(o) =  [ 'q' ]
after delete Object.getOwnPropertyNames(Object.getPrototypeOf(o)) =  []
Object.getPrototypeOf(CSon) =  [Function]
Object.getPrototypeOf(CParent) =  [Function]
true
CSon
cs instanceof CParent =  true
cs instanceof CSon =  true
Object.getPrototypeOf(CParent) =  [Function]
Object.getPrototypeOf(CSon) =  [Function]

参考：https://www.jianshu.com/p/28d85bebe599

语法：
Object.create(proto, [propertiesObject])
//方法创建一个新对象，使用现有的对象来提供新创建的对象的proto。
参数：

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

案例说明：

1）创建对象的方式不同

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

// new Object() 方式创建
var a = {  rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {}
console.log(b.rep) // {rep: "apple"}

// Object.create() 方式创建
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b)  // {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.rep) // {rep: "apple"}

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

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

// 创建一个以另一个空对象为原型,且拥有一个属性p的对象
o = Object.create({}, { p: { value: 42 } })

// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24
o.p
//42

o.q = 12
for (var prop in o) {
   console.log(prop)
}
//"q"

delete o.p
//false

Object.create() 用第二个参数来创建非空对象的属性描述符默认是为false的，而构造函数或字面量方法创建的对象属性的描述符默认为true。看下图解析：

3）创建空对象时不同

4）__proto__ 属性
JavaScript 的对象继承是通过原型链实现的。ES6 提供了更多原型对象的操作方法。
__proto__属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。目前只有浏览器环境必须部署有这个属性，其他运行环境不一定要部署，因此不建议使用这个属性，而是使用下面这些来 Object.setPrototypeOf()（写操作）、Object.getPrototypeOf()（读操作）、Object.create()（生成操作）代替。

Object.create()
描述：该方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__；
格式：Object.create(proto[, propertiesObject])
用法：如果用传统的方法要给一个对象的原型上添加属性和方法，是通过 __propt__ 实现的

var proto = {
    y: 20,
    z: 40,
    showNum(){}
};
var o = Object.create(proto);

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

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

现在有 Object.create() 就简单的多了

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

var proto = {
    y: 20,
    z: 40
};
var o = { x: 10 };
Object.setPrototypeOf(o, proto);

输出结果中看出，添加的方法是在原型上的。就类似于

obj.__proto__ = proto;

Object.getPrototypeOf()
描述：用于读取一个对象的原型对象；
格式：Object.getPrototypeOf(obj);
用法：
```
Object.getPrototypeOf('foo') === String.prototype // true
Object.getPrototypeOf(true) === Boolean.prototype // true
```
4.1）原型属性的继承
这里结合一个例子来说说这几个方法的使用：
场景：拷贝一个构造函数的实例。

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

//ColoredTriangle.prototype = triangle;  //ColoredTriangle.prototype.constructor === ColoredTriangle// false
Object.assign(ColoredTriangle.prototype, triangle) //ColoredTriangle.prototype.constructor === ColoredTriangle// true

var c = new ColoredTriangle();

打印出实例c 看看结构是怎样的

其中 color 属性在实例上，而其他的原型上。
现在来拷贝一个实例 c2

var c2 = Object.assign({},c)
console.log(c2.color); //red
console.log(c2.a); //undefined

因为 Object.assing 是不能拷贝到继承或原型上的方法的。所以实例c2 没有 a 这个属性。那要怎么要才能拷贝到原型上的方法呢？

4.1.1）第一种方法

var originProto = Object.getPrototypeOf(c);
var originProto2 = Object.create(originProto);
var c2 = Object.assign(originProto2, c);
//var c2 = Object.assign(Object.create(Object.getPrototypeOf(c)), c)

console.log(c2.color); // red
console.log(c2.a); // 1

这样就实现了原型属性的拷贝。
Object.getPrototypeOf(c) 既 originProto 得到的是原型上的 //{a: 1, b: 2, c: 3}；
Object.create(originProto) 既 originProto2 既是创建了一个 {a: 1, b: 2, c: 3} 在原型上的新对象；
Object.assign(originProto2, c) 在源对象originProto2 上合并对象 c；

4.1.2）第二种方法（推荐）

var c = new ColoredTriangle();
var c2 = Object.create(Object.getPrototypeOf(c), Object.getOwnPropertyDescriptors(c));

console.log(c2.color); // red
console.log(c2.a); // 1

可以把Object.create()的参数理解为：第一个参数是放在新对象的原型上的，第二个参数是放在新对象的实例上的。
所以上面例子
Object.getPrototypeOf() 得到的是 c 对象的原型，然后作为第一个参数，所以会在新对象c2 的原型上。
Object.getOwnPropertyDescriptors() 得到是 c 对象自身的可枚举属性，作为第二个参数，放在 c2 的实例上。

为什么说推荐这个方法呢？因为Object.assign() 方法不能正确拷贝 get ，set 属性。

例如，我们给 c 实例添加一个 "colorGet" 属性，并设置该属性的get 描述符：

var c = new ColoredTriangle();
Object.defineProperty(c,'colorGet', {
    enumerable: true, // 设为可枚举，不然 Object.assign 方法会过滤该属性
    get(){
        return "Could it return " + this.color
    }
});

var c3 = Object.assign(Object.create(Object.getPrototypeOf(c)), c)

结果如下：

这里没有拷贝到 "colorGet" 的 get 描述符，而是直接把获取到的值赋值给 "colorGet" 。

那对于 get 描述符要怎么获取呢？ Object.getOwnPropertyDescriptors就专为解决这问题而生。
而又因为要拷贝原型上的属性，所以结合Object.create、Object.getPrototypeOf 方法一起使用。即上面的第二种实现方法，如下：

var c = new ColoredTriangle();
Object.defineProperty(c,'colorGet', {
    enumerable: true, // 设为可枚举，不然 Object.assign 方法会过滤该属性
    get(){
        return "Could it return " + this.color
    }
});

var c3 = Object.create(Object.getPrototypeOf(c), Object.getOwnPropertyDescriptors(c));

结果如下：

此时已经成功的拷贝到了get描述符啦。
虽然说实际开发上很少会要去修改 get 描述符，但是知道多一种方法，遇到这种情况时就知道该怎么去解决了。

注意：这些都只是一个层级的深拷贝。

上面实现原型属性拷贝中的两种方法中用到了 Object.getOwnPropertyDescriptors 、Object.assing() 、Object.create、Object.getPrototypeOf()方法，通常这几种方法都有一起结合使用。
如果上面的例子还不理解，这里把他简单的拿到 对象的继承 来讲解。理解的话就可以忽略啦。

例子：

const log = console.log;

let params = { a: 1, b: 2 };

function Colors() {
    this.color = "red";
}

Object.assign(Colors.prototype, params);
let c = new Colors;
let oldb = c.b; //c.__proto__.b ==2
log(Object.getOwnPropertyDescriptor(Object.getPrototypeOf(c), "b")); //{value: 2, writable: true, enumerable: true, configurable: true}
c.b = 83; //是新赋值了个c.b,覆盖了c.__proto__.b，原型上的c.__proto__.b == 2还存在
let c2 = new Colors;
log("c.b = ", c.b, ", ", Object.get);
log(c2.b);

c.b = 83; //是新赋值了个c.b,覆盖了c.__proto__.b，原型上的c.__proto__.b == 2还存在

4.2）原型属性的继承
以前，继承另一个对象，常常写成下面这样。

const obj = {
  __proto__: prot,
  foo: 123,
};

ES6 规定__proto__只有浏览器要部署，其他环境不用部署。如果去除__proto__，可以用 Object.create() 和 Object.assign() 来实现。

//现在可以这样写 方法1
const obj = Object.create(prot);
obj.foo = 123;


// 或者  方法2
const obj = Object.assign(
  Object.create(prot),
  {
    foo: 123,
  }
);


// 或者 方法3
const obj = Object.create(prot,Object.getOwnPropertyDescriptors({ foo: 123 }));

但是 Object.assign() 无法正确拷贝get属性和set属性的问题。例如：

var prot = {x: 1, y: 2}
var obj = {
  __proto__: prot,
  foo: 100,
  bar(){ return this.foo},
  get baz() {return this.foo}
};

var obj2 = Object.assign(Object.create(prot), obj)

上图中，obj 对象的 foo 属性是一个取值函数，Object.assign不会复制这个取值函数，只会拿到值以后，将这个值赋上去。

而 Object.getOwnPropertyDescriptors() 可以解决这个问题实现get 、set 属性的正确拷贝，即方法3 ，如下：

var prot = {x: 1, y: 2}
var obj = {
  __proto__: prot,
  foo: 100,
  bar(){ return this.foo},
  get baz() {return this.foo}
};

var obj2 = Object.create(prot, Object.getOwnPropertyDescriptors(obj))

说了那么多种拷贝方法，怎么去选择呢，还是要看实际应用中的情况:

如果只是拷贝自身可枚举属性，就可以只用 Object.assign 方法；
如果是要拷贝原型上的属性，就需要 Object.assign , Object.create, Object.getPrototypeOf 方法结合使用
如果是拷贝get /set 属性，就需要结合 Ojbect.getOwnPropertyDescriptors 方法