摘要:組合構造原型模式將自身屬性于構造函數中定義,公用的方法綁定至原型對象上原型對象的解釋每一個函數創建時本身內部會有一個固有的原型對象,可以通過函數名去訪問,而其原型對象又有一個屬性指針指向該函數。
每次遇到JS面對對象這個概念,關于繼承及原型,腦海里大概有個知識框架,但是很不系統化,復習下,將其系統化,內容涉及到對象的創建,原型鏈,以及繼承。
創建對象兩種常用方式,其余的比較少見
工廠模式:
function createObject(){ var o = {} o.name = "Nico" o.age = 8 o.sayName = function(){ alert(this.name) } return o }
這種方式比較不開門見山,比較直接的事第二種,構造函數方式
function Object(name, age){ this.name = name this.age = age this.sayName = function(){ alert(this.name) } }
通常使用第二種,比較直觀
考慮到函數也是對象的一種,每次對象的實例化中其方法也會跟隨著實例化一次,為了解決這個問題,因此出現了組合構造原型模式,這是最常用的一種方式。
組合構造原型模式
function Object(name, age){ this.name = name this.age = age } Object.prototype.sayName = function(){ alert(this.name) }
將自身屬性于構造函數中定義,公用的方法綁定至原型對象上
原型對象的解釋
每一個函數創建時本身內部會有一個固有的原型對象,可以通過 函數名.prototype 去訪問,而其原型對象又有一個屬性constructor指針指向該函數。
假設有一個構造函數
function Person(){ this.name = "Nicholas" this.age = 29 this.job = "Software Engineer" } Person.prototype.sayName = function(){ alert(this.name) } var person1 = new Person() var person12 = new Person()
其原型對象、構造函數、實例之間的關系如下
構造函數可以通過Person.prototype來訪問原型對象,但是實例是沒有辦法來訪問原型對象的,但是在Firefox、Chrome、Safari的每一個實例對象都有一個_proto_的屬性進行訪問其原型
繼承原型鏈:
根據以上的原型關系可以發現,實例先從自身定義的屬性及方法中取值,若無法尋找到,則向上一級即原型對象訪問需要的屬性及方法,若其原型對象是另一個對象的實例,仍無法訪問到屬性與方法的話,再繼續向該實例的原型對象訪問,這樣就構成了一個原型鏈,也是繼承的實現方式。
有如下兩個對象
function SuperType(){ this.property = true } SuperType.prototype.getSuperValue = function(){ return this.property } function SubType(){ this.subproperty = false } SubType.prototype = new SuperType() SubType.prototype.getSubValue = function(){ return this.subproperty } var instance = new SubType() alert(instance.getSubValue()) // false
這是一個簡單的繼承實現方式,子類SubType具有了父類的property屬性,同時也具有getSubValue的方法。
其原型鏈如下:
但是這樣做會將父類的屬性綁定至子類的原型上,如果父類具有按引用訪問的數據時,子類的某一個實例中該數據的變化會導致所有子類實例該數據的變化,因此改進為借用構造函數模式的繼承
function SubType(){ SuperType.call(this) this.subproperty = false }
這樣就解決了該問題,將property屬性定義在了子類構造函數上,子類實例訪問時先從該本身構造函數具有的屬性中進行訪問,且進行操作,相當于覆蓋了原型上的該同名屬性。
但是上述的方法又出現了一個別的問題,該問題也比較容易解決,比較少用到,筆記先到這,后續筆記將記錄該問題及解決辦法
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89957.html
摘要:站在這個時間點上,我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷,依然是與輪播圖有關。當然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經來到了2017年的11月份,距離2018年僅僅還剩下不到兩...
摘要:站在這個時間點上,我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷,依然是與輪播圖有關。當然,這次思特奇面試之旅,最后也是以失敗告終,這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時間的齒輪已經來到了2017年的11月份,距離2018年僅僅還剩下不到兩...
摘要:繼承傳統的面向對象語言,繼承是類與類之間的關系。原型繼承原型定義原型就是指構造函數的屬性所引用的對象。創建構造函數創建的實例對象張三李四就是對象的原型也是的原型在原型上創建一個屬性運行和,并對比是否為同一個方法。 原文鏈接:http://www.hansmkiii.com/2018/07/06/javascript-node-1/ 面向對象、原型、繼承 1、面向對象 1.1 什么...
閱讀 2111·2021-11-24 10:28
閱讀 1117·2021-10-12 10:12
閱讀 3337·2021-09-22 15:21
閱讀 679·2021-08-30 09:44
閱讀 1895·2021-07-23 11:20
閱讀 1147·2019-08-30 15:56
閱讀 1751·2019-08-30 15:44
閱讀 1483·2019-08-30 13:55