js中的Object.create方法怎么使用

這篇文章主要介紹“js中的Object.create方法怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“js中的Object.create方法怎么使用”文章能幫助大家解決問題。

ECMAScript 5 新增了 Object.create() 方法將原型式繼承的概念規范化

用法

var obj = Object.create({name: 'johan', age: 23}) // obj 繼承了屬性name 和 age
var obj2 = Object.create(null) // obj2 不繼承任何屬性和方法
var obj3 = Object.create(Object.prototype) // 與 {} 和 new Object() 一個意思
var obj4 = Object.create({}, {
    property1: {
        value: true,
        writable: true
    }
}) // 第二個參數與 Object.defineProperties() 一致
圖解 Object.create 實現
function create(proto) {
    function F(){}
    F.prototype = proto
    return new F()
}

第一步： function F(){}


即創建一個函數，因為約定首字母大寫，視為構造函數，創建函數 F 時，F 構造函數與和它的原型對象就有了這一層的關系：

F.prototype === F.prototype; // 假設你把F.prototype當作一個值
F.prototype.constructor === F;

第二步：F.prototype = proto

即將 F.prototype 賦值為傳入的 proto，如此就打破了F.prototype = F.prototype 以及 F.prototype.constructor = F ，它們的關系為

第三步：return new F()

第三步的解讀有點費解，因為這里涉及到 new 的操作，在 new 改變了對象 中我們說過，new 會創建一個對象，并將這個對象的隱式原型(__proto__) 指向構造函數的原型對象，并初始化構造函數，如果值則返回值。我們也會在后續的原型中介紹，new 是隱式原型繼承，Object.create 是顯式原型繼承

在這里，我們按實現 new 的方式來解讀 return new F()。new F 后的實例的 __proto__ 指向的是 F.prototype，而這個值已經在第二步時指給了傳來的 proto，所以就有了new F().__proto__ = proto

或許你還是不太清楚第三步，我們結合例子，就一目了然了

var obj = Object.create({name: 'johan'})

第三步的圖解就成了這樣：


這樣就成了， obj 繼承自{name: johan} 這個對象，至于F.prototype = {name: 'johan'}，在調用完 Object.create 之后，也因為沒人使用 F 函數而被引擎當作垃圾回收了，遂成了obj.__proto__ = {name: 'johan'}

如此「原型式繼承」就被傳承下來了

其原理就是如此，簡單來說，就是創建空（構造）函數，關聯它的原型（實現繼承）

Object.create(null)

在閱讀源碼時，常會看到 Object.create(null) ，用此初始化一個新對象，至于為什么用這個方法而不用 new Object 或者 {}，是因為無論 new 還是字面量，都是繼承自 Object 構造函數，而使用Object.create(null) ，能得到一個沒有任何繼承痕跡的對象


var obj = Object.create(null)

關于“js中的Object.create方法怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。