物件導向的原型與繼承

2022-09-13 10:12:13 字數 3858 閱讀 4744

1. 為什麼需要原型

構造器建立物件的時候, 實際上會有成員重複

如果使用 構造器 this.方法名 = function .... 方式建立物件. 那麼每乙個物件

對應的方法就會重複.

解決辦法就是讓這個方法( 函式 )共享

-> 將函式寫到外面, 那麼 person 在初始化物件的時候就不會再建立乙個函式了.

只需要將 外面的函式引用 交給物件即可.

缺點: 乙個物件可能有 n 多方法. 如果將所有的東西 都放到外面, 與其他庫

衝突的機率就會變大. 所以不宜採取該方法.

-> 將所有的方法( 函式 )都繫結到乙個物件中.

-> js 原生就支援解決該問題的辦法

每乙個函式都有 乙個屬性 prototype

該屬性指向一物件. 每乙個函式的該物件都是存在.

(重點) 每乙個由該函式作為構造器建立的物件, 都會預設連線到該物件上.

如果訪問物件的方法, 而物件中沒有定義, 就會在這個 建構函式.prototype

表示的物件中去找.

-> prototype 就是原型之意

2. 針對建構函式而言, 原型就是 建構函式的 prototype 屬性, 常常將其稱為 原型屬性.

針對例項物件而言, 原型就是 例項物件的 原型物件.

例:function person () {} // 有了建構函式, 和 原型

var p = new person(); // 有了例項

3. 一般如何使用原型物件

-> 簡單的說就是將共享的方法放到原型中, 而獨有資料與行為放在當前物件裡

-> 例:

person( name, age, gender, sayhello, eat, run )

-> 直接給原型物件新增成員

-> 直接替換原型物件( 注意: 手動的新增 constructor 屬性, 表示對應的建構函式 )

4. __proto__

和 prototype 是否存在關係

早期瀏覽器是不支援 __proto__

火狐率先使用該屬性, 但是是非標準

基本現在的新瀏覽器都支援該屬性

-> 訪問

使用建構函式, 就使用 prototype 屬性訪問原型

使用例項物件, 就使用 非標準的 __proto__ 屬性訪問原型

5. 繼承

-> 什麼是繼承

自己沒有, 別人有, 拿過來自己用, 就好像自己的一樣.

-> 原型與例項物件

在 js 中, 方法定義在原型物件中, 而屬性定義在例項物件中

呼叫方法的時候, 例項物件本身是沒有該成員的, 但是依舊可以呼叫

該方法, 好像這個方法就是該例項物件的一樣. 因此, 我們稱該例項物件

繼承自 原型物件

-> 任何乙個例項, 都是繼承自其原型物件的. 即原型式繼承.

6. 為什麼需要繼承

-> 程式設計的發展

復用( 重複使用 )

a 標籤物件

baseelement

-> js 執行效率

共享特性

復用7. 傳統的程式語言的物件導向操作

-> 物件: 是具有方法和屬性的邏輯單元

在 js 函式是乙個特殊的資料型別( 函式在 js 是一等公民 )

js 物件就是鍵值對, 值如果是資料, 那麼鍵值就構成屬性

如果值是函式, 那麼就構成方法.

-> 建立方式

類 -> 例項化 -> 物件( 例項 )

class person

}// 類, 用來描述物件的結構, 它就是乙個模板

person p = new person(); // 利用模板建立物件

// 訪問屬性

p.name

// 呼叫方法

p.sayhello();

傳統的物件導向程式設計語言, 重點需要乙個"模板", 即 類( class )

-> 傳統的繼承

傳統的繼承是模板的繼承.

class student : person

student s = new student();

// 注意此時 s 就可以呼叫 sayhello 方法

// 可以使用 name, age, 和 gender 屬性了

8. 相關概念

類 class 模板 建構函式, 類名就是建構函式名

子類 subclass 派生的模板 原型設定為指定物件的建構函式

例項 instance 某個類的物件 ...

例項成員(例項方法, 例項屬性)

靜態成員

靜態方法 ... 直接繫結在函式上的方法

靜態屬性 ... 直接繫結在函式上的屬性

// js **

function person ()

// 不叫子類, 只是乙個 student 類

function student()

// 繼承派生 成為子類

student.prototype = new person();

// 即完成派生

var s = new student();

s.name // ok

9. 屬性訪問原則( 重點 )

1) 物件在呼叫方法或訪問屬性的時候, 首先在當前物件中查詢. 如果有該成員使用並停止查詢.

2) 如果沒有該成員就在其原型物件中查詢. 如果有該成員即使用, 並停止查詢.

3) 如果還沒有就到 該物件的 原型物件 的 原型物件中查詢.

...4) 最後會查到 object.prototype 上. 如果還沒有即 返回 undefined.

10. 如果修改原型物件中的屬性值會怎樣

給當前物件的原型提供的屬性賦值, 實際上是給當前物件新增了該屬性的新成員

並不會修改執行物件中的成員.

11. 混入( mix )

var o1 = ;

var o2 = ;

-----------

o2.name = o1.name

利用這個簡單的賦值, 就可以將乙個物件中的成員加到另乙個物件中

混入使得 o2 具有了 age 和 o1 中的 name. 即將 o1 混入到 o2 中

混入也是一種繼承的方式

12. 如何使用**實現混入

// 考慮需要執行, 寫函式即可

// 由於將 乙個 物件混入到 另乙個物件. 所以有兩個引數

function __mix__ ( obj, obj1 )

}13. 原型式繼承

-> 寫乙個建構函式, 如果需要將其實例繼承自某個特定的物件 o. 那麼

只需要設定該建構函式的 prototype 屬性為 o 即可

function person {}

var o =

person.prototype = o; // 繼承

14. 混合式繼承

-> 混合就是將多個物件的各個功能混合到一起, 加到建構函式的原型物件上.

那麼該建構函式建立的例項 就繼承自多個物件了.

15. 物件 -> 父物件 -> 父物件的父物件 -> ... -> 原物件 -> ....

鏈式結構( 原型鏈 )

由於鏈越深, 屬性搜尋越需要效能. 所以一般少用深層次的鏈式結構繼承

一般使用時, 鏈結構只有 3 級. 一般都是使用混入, 在原型上加成員

16. es5 中 的 object.create

繼承的最經典結構

function animal() {}

function person() {}

person.prototype = new animal();

語法:新物件 object.create( 原物件 );

物件導向 原型 繼承

繼承 聖杯模式 prototype constructor prpto 三者之間關係 typeof 區分陣列與物件 instanceof object.create 類陣列好玩的 1.字串函式擴充套件 一般呼叫 string.prototype.repeat function num console...

物件導向 建立物件 原型鏈 繼承

字面量建立物件 使用json形式建立物件,適用於建立單個物件.json js物件表示法,由鍵值對組成,每乙個鍵值對之間使用冒號連線,每一對鍵值對之間使用逗號隔開.var obj console.log obj console.log typeof obj object console.log obj...

物件導向 prototype 原型鏈 繼承

物件導向 oop,即 object oriented 是相對於面向過程來講的,簡單說就是把資料和方法組合封裝起來成為乙個整體,提高軟體的重用性 靈活性和擴充套件性。物件導向特點 當建立的物件較多時,會有可共用的屬性,此時就可用prototype。比如我們用array來建立乙個例項時,不用我們定義,它...