1. 程式人生 > 其它 >Object.create()和Object.setPrototypeOf

Object.create()和Object.setPrototypeOf

簡介

在原型寫法中,我們常用Object.create()和Object.setPrototypeOf(),記錄一下自己的學習理解

Object.create()

建立一個物件,直接上程式碼

function SuperClass(name) {
    this.name = name
    this.colors = ["red", "blue", "green"]
}
SuperClass.prototype.getName = function () {
    console.log(this.name)
}
const test3 = Object.create(new SuperClass("JJ"), {
    a: {
        value: 
10, }, b: { value: 20, writable: false, }, name:{ value:"TT" } }) test3.getAB = function(){ return this.a + this.b }

通過下圖可以看出,他的結果是建立了一個繼承於SuperClass的新物件,但是細心可以發現,__proto__中少了一個constructor

使用其作為一個過渡函式實現繼承

function SuperClass(name) {
    this.name = name
    this
.colors = ["red", "blue", "green"] } SuperClass.prototype.getName = function () { return this.name } function SubClass(name, time) { SuperClass.call(this, name) this.time = time } // 為了不讓SuperClass構造兩遍,所以用空物件來過渡一下 SubClass.prototype = Object.create(SuperClass.prototype)
const test = new SubClass("TT", 2014)

此時,還是缺少了一個constructor,可以手動補充,SubClass.prototype.constructor = SubClass,然後在進行例項化

或使用Object.setPrototypeOf()來解決

Object.setPrototypeOf()

Object.setPrototypeOf就是字面意思,設定XXX的Prototype原型,所以上述可以將SubClass的原型設定為SuperClass的原型

function SuperClass2(name) {
    this.name = name
    this.colors = ["red", "blue", "green"]
}
SuperClass2.prototype.getName = function () {
    console.log(this.name)
}
function SubClass2(name, time) {
    SuperClass.call(this, name)
    this.time = time
}
Object.setPrototypeOf(SubClass2.prototype, SuperClass2.prototype)
SubClass2.prototype.getTime = function(){
    console.log(this.time)
}
const test2 = new SubClass2("TT", 2014)

如下圖,看起來是不是正常多了