大家好,我是IT修真院成都分院第7期的學員韓建名,一枚正直純潔善良的WEB前端程序員。
今天給大家帶來的是:JS原型鏈
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰
6.擴展思考
7.參考文獻
8.更多討論
1.背景介紹
JavaScript對象是一個屬性的集合,另外有一個隱式的對象:原型對象。原型的值可以是一個對象或者null。一般的引擎實現中,JS對象會包含若干個隱藏屬性,對象的原型由這些隱藏屬性之一引用,我們在本文中討論時,將假定這個屬性的名稱為"__proto__"(事實上,SpiderMonkey內部正是使用了這個名稱,但是規范中并未做要求,因此這個名稱依賴于實現)。 由于原型對象本身也是對象,根據上邊的定義,它也有自己的原型,而它自己的原型對象又可以有自己的原型,這樣就組成了一條鏈,這個鏈就是原型鏈。
先來看看有什么用處
function Foo(){ this.y=2; } Foo.prototype.x=1; var obj3 = new Foo(); obj1.y;//2 obj1.x://1
這里就是用原型鏈繼承了Foo的屬性 obj1的原型(proto)會指向Foo的prototype屬性 當函數聲明的時候——function Foo(){} 實質上在做: 這個函數會有一個prototype屬性,且默認會有兩個屬性 Foo.prototype { constructor:Foo, __proto__:Object.prototype } prototype是函數對象上的預設的對象屬性,而原型通常都是其構造器的prototype屬性 實例的__proto__屬性會指向構造函數的prototype屬性
2.知識剖析
ECMAScript中描述了原型鏈的概念,并將原型鏈作為實現繼承的主要方法。其基本思想就是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
JavaScritp引擎在訪問對象的屬性時,如果在對象本身中沒有找到,則會去原型鏈中查找,如果找到,直接返回值,如果整個鏈都遍歷且沒有找到屬性,則返回undefined.原型鏈一般實現為一個鏈表,這樣就可以按照一定的順序來查找。
原型的動態性:對原型對象所做的實時修改都能從實例上立即反應出來。(注意區別添加修改和重寫了原型對象)
原型對象包含指向構造函數的指針。a實例包含指向a原型對象內部的指針,使得我們可以訪問原型對象的屬性。如果讓b原型對象等于a對象的實例那我們就可以訪問a對象的原型對象及其屬性和方法了。同理a的原型對象也可以是通過該種方法從c繼承過來...
1.概念 ECMAScript中描述了原型鏈的概念,并將原型鏈作為實現繼承的主要方法。其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。在JavaScript中,用 __proto__ 屬性來表示一個對象的原型鏈。當查找一個對象的屬性時,JavaScript 會向上遍歷原型鏈,直到找到給定名稱的屬性為止!
(1)原型:創建的每一個函數都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。如果按字面意思來理解,那么prototype就是通過調用構造函數而創建的那個對象實例的原型對象。使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。換句話說,不必在構造函數中定義對象實例的信息,而是可以將這些信息直接添加到原型對象中。 (2)原型對象:無論什么時候,只要創建了一個新函數,就會根據一組特定的規則為該函數創建一個prototype屬性,這個屬性指向函數的原型對象。在默認情況下,所有原型對象都會自動獲得一個constructor(構造函數)屬性,這個屬性是一個指向prototype屬性所在函數的指針。
普通對象和函數對象
JS中萬物皆對象,但對象也是有區別的,分為普通對象和函數對象,Object、Function是JS自帶的函數對象,上栗子
var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object
3.常見問題
原型鏈怎樣實現繼承
4.解決方案
原型對象包含指向構造函數的指針,這使得子類可以訪問到構造函數中的屬性。實例包含指向原型對象的內部的指針。
ex:
a實例包含指向a原型對象內部的指針,使得我們可以訪問原型對象的屬性。如果讓b原型對象等于a對象的實例那我們就可以訪問a對象的原型對象及其屬性和方法了。同理a的原型對象也可以是通過該種方法從c繼承過來...
5.編碼實戰
先給大家引入一個例子:組合使用構造函數模式和原型模式創建自定義類型
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Lance","Alice"];
}
Person.prototype = {
constructor : Person;
sayName : function() {
alert(this.name);
}
}
實現原型鏈的基本模式舉例:
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.getSuperValue());? ? //true
6.擴展思考
原型鏈繼承方式存在的問題。以及怎樣解決
7.參考文獻
《JavaScript高級程序設計》
8.擴展思考
其他實現繼承的方法還有哪些?
鳴謝
感謝大家觀看