2. 程式人生 > >使用Object.create()實現繼承

使用Object.create()實現繼承

阿新 • • 發佈：2018-12-18

一、常見繼承方式

我們日常開發中常見的繼承方式主要有： 1、預設模式：

1

Child.prototype = new Parent();

2、借用建構函式：

1

2

3

function Child(a, b, c, d) {

Parent.apply(this, arguments);

}

3、借用和設定原型:

1

2

3

4

function Child(a, b, c, d) {

Parent.apply(

this, arguments);

}

Child.prototype = new Parent();

4、共享原型：

1

Child.prototype = Parent.prototype;

5、使用臨時建構函式：

1

2

3

var Proxy = function() {};

Proxy.prototype = Parent.prototype;

Child.prototype = new Proxy();

6、extend屬性複製：

1

2

3

4

5

6

7

8

9

10

11

function extend(parent, child) {

child = child || {};

for(var key in parent) {

if(parent.hasOwnProperty(key)) {

child[key] = parent[key];

}

}

return child;

}

當然在一些javascript庫中（jQuery），還存在淺複製和深複製。 7、原型繼承模式：

1

Object.create(Parent);

二、Object.create實現繼承

本文將來學習第七種繼承方式Object.create()方法來實現繼承，關於此方法的詳細描述，請戳這裡。下面來通過幾個例項來學習該方法的使用：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var Parent = {

getName: function() {

return this.name;

}

}

var child = Object.create(Parent, {

name: { value: "Benjamin"},

url : { value: "http://www.zuojj.com"}

});

//Outputs: Object {name: "Benjamin", url: "http://www.zuojj.com", getName: function}

console.log(child);

//Outputs: Benjamin

console.log(child.getName());

我們再來看一個例子，再新增一個繼承：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

var Parent = {

getName: function() {

return this.name;

},

getSex: function() {

return this.sex;

}

}

var Child = Object.create(Parent, {

name: { value: "Benjamin"},

url : { value: "http://www.zuojj.com"}

});

var SubChild = Object.create(Child, {

name: {value: "zuojj"},

sex : {value: "male"}

})

//Outputs: http://wwww.zuojj.com

console.log(SubChild.url);

//Outputs: zuojj

console.log(SubChild.getName());

//Outputs: undefined

console.log(Child.sex);

//Outputs: Benjamin

console.log(Child.getName());

通過上面可以看出Object.create()方法實現了鏈式繼承，及原型鏈的繼承。如果在控制檯打印出各個生成的物件，可以很清楚的看到。

1

2

3

4

//Outputs: true

console.log(Child.isPrototypeOf(SubChild));

//Outputs: true

console.log(Parent.isPrototypeOf(Child));

isPrototypeOf() 方法測試一個物件是否存在於另一個物件的原型鏈上。 以上就是本文對Object.create方法的描述，文中不妥之處，還望批評指正。

相關推薦

使用Object.create()實現繼承

一、常見繼承方式 我們日常開發中常見的繼承方式主要有： 1、預設模式： 1 Child.prototype = new Parent(); 2、借用建構函式： 1 2 3 funct

new運算子、bind、Object.create實現原理探討

如何手寫new運算子、bind方法、Object.create 一、new 運算子 首先我們自己寫new運算子，無法寫成 NEW F()這種方法，因為js不識別呀，所以只能將第一個引數看做建構函式，剩餘是其它傳參，例如 let m = NEW(M,'lihaixin

Object.create()---【實現寄生組合式繼承是關鍵】

Object.create()方法建立一個新物件，使用現有的物件來提供新建立的物件的__proto__。 （請開啟瀏覽器控制檯以檢視執行結果。） https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Ob

原型鏈與繼承（三）：理解Object.create()

Object.create(proto[, propertiesObject])：接受兩個引數，返回一個物件引數一：proto應該是新建立物件的prototype引數二：可選。該引數物件是一組屬性與值，該物件的屬性名稱將是新建立的物件的屬性名稱，值是屬性描述符（這些屬性描述符

javascript 的原型繼承， Object.create()， 和new之間的關係

原型繼承是道格拉斯-克羅克福德提出來的， Object.create() 是ES5新增的， new是建構函式的標準用法。 原型式繼承的建構函式為 function object(o) { function F(){} F.prototype = o;

用object( )方法實現非建構函式的繼承

    非建構函式繼承即不使用建構函式實現繼承，讓一個物件繼承另一個物件： var parent = { surname : '張' } var child = { first_name : '小凡' }     如上，兩個普通的物件，無法使用建構函式方法實現繼承，想實現繼承，我

Object.create

ons ron 代碼 執行 val {} new fun blog Object.create() 方法使用指定的原型對象和其屬性創建了一個新的對象。 語法 Object.create(proto, [ propertiesObject ]) 舉個例子： function

JS實現繼承的幾種方式（轉）

多繼承 logs 影響 .cn sta 初始化 定義 附錄 style 轉自：幻天芒的博客 前言 JS作為面向對象的弱類型語言，繼承也是其非常強大的特性之一。那麽如何在JS中實現繼承呢？讓我們拭目以待。 JS繼承的實現方式 既然要實現繼承，那麽首先我們得有一個父類，

JS實現繼承的幾種方式

簡單 成員 類構造 缺陷 屬性 con html 但是 內存 JS實現繼承的幾種方式 前言 JS作為面向對象的弱類型語言，繼承也是其非常強大的特性之一。那麽如何在JS中實現繼承呢？讓我們拭目以待。 JS繼承的實現方式 既然要實現繼承，那麽首先我們得有一個父類，代碼如

JavaScript實現繼承的幾種方式總結一

相同 實踐 extend sta 執行 instance () class new 雖然在ES6中有了繼承，使用extends關鍵字就能實現。本篇講的不是這種，而是ES6之前的幾種實現繼承的方式。 （一）原型鏈 ECMAScript中將原型鏈作為實現繼承的主要方法。其基本思

Object.create()和new object()和{}的區別

define pset operator 不能 div 有效 兩個 property table Object.create()介紹Object.create(null) 創建的對象是一個空對象，在該對象上沒有繼承 Object.prototype 原型鏈上的屬性或者方法,

利用object.defineProperty實現數據與視圖綁定

html ble bject type document people 嘻嘻 charset spa 　　如今比較火的mvvm框架，例如vue就是利用es5的defineProperty來實現數據與視圖綁定的，下面我來介紹一下defineProperty的用法。 var

C#編程（二十三）----------實現繼承

一點 more 希望 否則 產生 無法 概念 類的方法 將不 原文鏈接：http://blog.csdn.net/shanyongxu/article/details/46593809 如果要聲明派生自另一個類的一個類,可以使用下面的語法: class DerivedC

原型，原型鏈，以及如何實現繼承

對象 div 打印 查找 image 返回 作用 不存在 找不到 首先，在JavaScript中，萬物皆對象。 但是，對象分兩種：一種是普通對象(Object)，另一種是函數對象(Function)； 凡是通過new Function()創建的對象都是函數對象，其他的都

Javascript中實現繼承的方式

call type soft 保存 不出 註意 use type屬性 方式 js中實現繼承和傳統的面向對象語言中有所不同：傳統的面向對象語言的繼承由類來實現，而在js中，是通過構造原型來實現的，原型與如下幾個術語有關： ①構造函數：在構造函數內部擁有一個prototype屬

js實現繼承

this super() 實現 urn 使用 log -s 創建 復用 js作為一種弱類型語言，繼承也是其較大的功能之一 首先定義一個父類 // 定義一個教師類 function Teacher (name) { // 屬性 this.name = name |

Object.create()

true blue def bject 是什麽 特性 訪問 對象創建 log 1.Object.create()是什麽？ Object.create(proto[,propertiesObject])是ES5中的一種新的對象創建方式，第一個參數是要繼承的原型，如果不是一個子

javascript面向對象系列第三篇——實現繼承的3種形式

編程語言 urn ash yahoo 實現 經典 ray obj 學習 前面的話 　　學習如何創建對象是理解面向對象編程的第一步，第二步是理解繼承。開宗明義，繼承是指在原有對象的基礎上，略作修改，得到一個新的對象。javascript主要包括類式繼承、原型繼承和拷貝繼承這

Object.create用法

var reat cal ons etc his 傳遞 並且 create 用法: Object.create(object, [,propertiesObject]) 創建一個新對象，繼承object的屬性，可添加propertiesObject添加屬性，並對屬性作出詳細

javascirpt實現繼承

擁有 obj nta super 了解 技術 var 適合 無法 前言 在面試的過程中，被問到最多的問題的javascript的繼承，我之前也有了解過一些，但是總是理解得不夠透徹，在實際的應用中沒有很好的利用。這一次，我拿著《javascirtpt高級程序設計》這本書，將面