摘要:當構造函數創建的實例對象需要訪問某個方法或屬性,而這個對象又沒有該方法或屬性的時候,它會去原型上面去查找。實例成員表示的是實例方法和實例屬性,由構造函數創建的對象,也就是實例對象提供。
經過面試的挫折之后,繼續深入學習~~
1、原型概念的提出傳統的構造函數對象包含方法時,在構造函數創建時,就會將所有內容重新創建一次,導致數據的重復,代碼的冗余,如下所示: function Person(name, age) { this.name = name; this.age = age; this.sayHello = function () { console.log("Hello"); } } var p1 = new Person(); var p2 = new Person(); p1.sayHello === p2.sayHello // 結果為false,因為p1,和p2的sayHello雖結構一樣,但卻是兩個不同的對象
改良1:將方法提取到外面
function sayHello(){ console.log("Hello"); } function Person(name, age) { this.name = name; this.age = age; this.sayHello = sayHello; } var p1 = new Person(); var p2 = new Person(); p1.sayHello === p2.sayHello // 結果為true,但當代碼量不斷增加,自定義的函數越來越多時,可能會和框架中的函數發生命名沖突,也不利于代碼的維護
改良2:將方法放到構造函數中,且避免命名沖突,原型概念出現
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function (){ console.log("Hello"); } var p1 = new Person(); var p2 = new Person(); p1.sayHello === p2.sayHello // 結果為true
構造函數一旦被創建,就會有一個原型屬性,也是個對象,可以往里面添加成員,每個由構造函數創建出來的對象都會默認連接到原型屬性上去。
當js引擎查找對象屬性時,會先查找對象上是否具有該屬性,如果沒有,就會去原型屬性上去查找。
所以,什么是原型?原型是能夠實現繼承的,當構造函數被定義的時候,原型也就被創建出來,它可以存儲屬性和方法,既是一個屬性也是一個對象。當構造函數創建的實例對象需要訪問某個方法或屬性,而這個對象又沒有該方法或屬性的時候,它會去原型上面去查找。也就是實例對象訪問原型對象的屬性或調用原型對象的方法,說的通俗一點也就是把別的對象的方法或屬性拿過來自己用,就是繼承,所以我們也可以說對象繼承自其原型。
引入:屬性查找機制:對象在訪問屬性或方法時,首先在當前對象查找,如果該對象有該屬性或方法,則停止查找,如果沒有,則去原型中查找,如果原型沒有,則去原型的原型中查找,直到原型的頂部,如果還是沒有,則返回undefined(屬性)或 xxx is not a function(方法)
2、一些相關概念 ① 面向對象的相關概念類class:在js中就是構造函數
實例(instance)與對象(object)
實例是指某個構造函數創建出來的對象,我們稱之為xxx構造函數的實例;
鍵值對與屬性和方法
在js中,鍵值對的集合稱之為對象
如果數據是值,該鍵值對為屬性prototype
如果數據是函數,該鍵值對為方法method
父類與子類
js中沒有class的概念,由C++引申過來,父類又稱基類,子類又稱派生類
js中稱為父對象、子對象
prototype針對構造函數,稱為“原型屬性”
prototype針對構造函數創建出來的對象,稱為“原型對象”
原型屬性與原型對象的關系:
?。嬙旌瘮档脑蛯傩院蜆嬙旌瘮祫摻ǔ鰜淼膶ο蟮脑蛯ο螅且粋€東西
!!構造函數的原型屬性所指向的對象,與構造函數創建出來的對象(實例對象),這是兩個不同的對象(快繞暈了)
構造函數創建出來的對象(實例對象)繼承構造函數的原型屬性和原型對象
4、原型的使用利用對象的動態特性:在原來的對象上添加成員
構造函數.prototype.xxx = ccc;
直接替換:重新創建一個對象
構造函數.prototype = {};
通過 proto 允許實例對象直接訪問原型,通常用于在調試中查看原型的成員(實例對象不允許修改原型)
6、原型的結構有一個默認屬性:constructor => 構造器,表示該原型是與什么構造函數聯系起來的
∴ 構造函數通過 prototype 的屬性訪問原型,原型可以通過 constructor 訪問構造函數
簡單繼承:將別的對象的方法或屬性直接拿過來,加到自己身上,于是我就有了該方法或屬性。=> 簡單粗暴,層次清晰
利用原型繼承:不需要添加成員,只要原型具有,我便有了。=> 提高復用性
混合式繼承:將方法或屬性利用混入的方法,加到構造函數原型中,實例對象即有了指定的方法或屬性。
8、靜態成員和實例成員的概念該概念由其他面向對象的語言引入。
靜態成員表示的是靜態方法和靜態屬性,由構造函數提供。
實例成員表示的是實例方法和實例屬性,由構造函數創建的對象,也就是實例對象提供。
9、小結什么是原型?
如何使用原型?
什么是原型繼承? => 實例對象默認連接到原型中,可以繼承原型的方法和屬性,也可以自己給原型賦值
如何實現? => 混合式繼承
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100087.html
摘要:是完全的面向對象語言,它們通過類的形式組織函數和變量,使之不能脫離對象存在。而在基于原型的面向對象方式中,對象則是依靠構造器利用原型構造出來的。 JavaScript 函數式腳本語言特性以及其看似隨意的編寫風格,導致長期以來人們對這一門語言的誤解,即認為 JavaScript 不是一門面向對象的語言,或者只是部分具備一些面向對象的特征。本文將回歸面向對象本意,從對語言感悟的角度闡述為什...
摘要:對象重新認識面向對象面向對象從設計模式上看,對象是計算機抽象現實世界的一種方式。除了字面式聲明方式之外,允許通過構造器創建對象。每個構造器實際上是一個函數對象該函數對象含有一個屬性用于實現基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向對象 date: 2016-10-05 tags: JavaScript 0x00 面向對象 從設計模式上看,對象是...
摘要:很多情況下,通常一個人類,即創建了一個具體的對象。對象就是數據,對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創建了一個具體的對象。對象就是數據,對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:很多情況下,通常一個人類,即創建了一個具體的對象。對象就是數據,對象本身不包含方法。類是相似對象的描述,稱為類的定義,是該類對象的藍圖或原型。在中,對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中,對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了,離年底老媽老爸...
摘要:基于原型的面向對象在基于原型的語言中如并不存在這種區別它只有對象不論是構造函數,實例,原型本身都是對象。允許動態地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題,提供了構造函數創建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向對象 1. JavaScript...
閱讀 2439·2021-10-09 09:44
閱讀 3809·2021-09-22 15:43
閱讀 2927·2021-09-02 09:47
閱讀 2553·2021-08-12 13:29
閱讀 3875·2019-08-30 15:43
閱讀 1684·2019-08-30 13:06
閱讀 2193·2019-08-29 16:07
閱讀 2753·2019-08-29 15:23