快捷導(dǎo)航

JavaScript中關(guān)于Object.create()的用法

更新時(shí)間：2023年02月10日 14:30:44 作者：奮斗中的小余

這篇文章主要介紹了JavaScript中關(guān)于Object.create()的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

JavaScript的Object.create()方法

ES5定義了一個(gè)名為Object.create()的方法，它創(chuàng)建一個(gè)對(duì)象，其中第一個(gè)參數(shù)就是這個(gè)對(duì)象的原型，Object.create()提供第二個(gè)可選參數(shù)，用以對(duì)對(duì)象的屬性進(jìn)行進(jìn)一步描述。

// Object.create()是一個(gè)靜態(tài)方法
// 以下展示不同參數(shù)的用法

// 一個(gè)參數(shù)
var o = Object.create(null) // 相當(dāng)于空對(duì)象，任何屬性都沒(méi)有
var o = Object.create(Object.prototype) // 相當(dāng)于var o = {}
var o = Object.create({x: 1, y: 2}) // 相當(dāng)于var o = {}; o.prototype = {x: 1, y: 2}

// 第二個(gè)參數(shù)是一個(gè)對(duì)象，用于給創(chuàng)建的對(duì)象添加屬性和屬性描述的
// 屬性又分為數(shù)據(jù)屬性和存取器屬性
// 數(shù)據(jù)屬性的描述符對(duì)象的屬性有value(值)、writable(可寫性)、enumerable(可枚舉性)、configurable(可配置性)
// 存取器屬性的描述符對(duì)象的屬性有g(shù)et(讀取)、set(寫入)、enumerable(可枚舉性)、configurable(可配置性)

// 兩個(gè)參數(shù)
var o = Object.create({x: 1, y: 2}, {
   a: {
   		value: 100,
   		......
   }
}) // 向創(chuàng)建的對(duì)象o添加一個(gè)數(shù)據(jù)屬性a，值為100，其它描述屬性默認(rèn)為false

var o = Object.create({x: 1, y: 2}, {
   a: {
   		get() {
   			return this.x + this.y
   		},
   		......
   	}
}) // 向創(chuàng)建的對(duì)象o添加一個(gè)存取器屬性a，o.a時(shí)執(zhí)行其get方法，set屬性默認(rèn)為undefined，其余描述屬性默認(rèn)為false

JavaScript手寫Object.create函數(shù)

給大家分享一下手寫 Object.create 函數(shù)。

函數(shù)功能

Object.create()方法創(chuàng)建一個(gè)新對(duì)象，使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的__proto__

代碼：

function create(parentPrototype, props) {
? function Fn() {
?
? }
? Fn.prototype = parentPrototype;
? let fn = new Fn();
? for (let key in props) {
? ? Object.defineProperty(fn, key, {
? ? ? enumerable: true, // 如果不枚舉對(duì)象中無(wú)法查看到這個(gè)對(duì)象
? ? ? ...props[key]
? ? })
? }
? return fn
}
?
?
function Parent() {
? this.name = "parent";
}
?
Parent.prototype.eat = function () {
? console.log("eat");
};
?
function Child() {
? this.age = 9;
? Parent.call(this);
}
?
Child.prototype = create(Parent.prototype, { constructor: { value: Child } });
?
// { constructor: { value: Child } } ?這段代碼保證 Child 的 prototype 的 constructor 還指向 Child 的構(gòu)造函數(shù)
?
let child = new Child();
console.log(child.constructor,'constructor'); // [Function: Child] 'constructor'
child.eat() // eat