面向對象、原型鏈、繼承知識梳理
阿新 • • 發佈:2017-05-20
中介 獲取 混合 console 原型 code name 諸多 祖先
單例模式:就是一個對象咯
var person={ name:‘xuwen‘, age:17 }; var person2={ name:‘xiaoxu‘, age:25 }
工廠模式:就是一個函數,解決批量生產問題
1 function fn(name,age){ 2 var obj={}; 3 obj.name=name, 4 obj.age=age, 5 obj.write=function(){ 6 console.log(obj.name); 7 } 8 returnobj; 9 } 10 var person1=fn(‘xuwen‘,17); 11 var person2=fn(‘xiaoxu‘,23); 12 person1.write(); 13 person2.write();
構造函數:也是一個函數,但這個函數new一下的時候,那麽這個函數就會自動產生一個對象(實例),並且最後返回這個對象(實例)。裏面的this指的就是當前對象(實例)。方法裏面的this例外,誰調用這個方法,this就指向誰。
1 var name=‘xuxu‘; 2 function Fn(name,age){ 3 this.name=name; //this指的就是當前實例4 this.age=age; 5 this.write=function(){ 6 console.log(this.name); //誰調用方法 this就指向誰 7 } 8 } 9 var person1=new Fn(‘xuwen‘,17); 10 var person2=new Fn(‘xiaoxu‘,23); 11 person1.write(); //xuwen 12 person2.write(); //xiaoxu 13 var p3=person1.write; 14 p3(); //xuxu
上面構造函數有一個弊端,對於屬性,每個實例不同,這個沒有問題,但是方法對於每個實例都開辟一個空間來存儲,那就浪費。畢竟每個方法都是一樣,那麽怎麽解決這個問題呢?那就是下面將的原型了。
基於構造函數的原型及原型鏈
1 function Fn(name,age){ 2 this.name=name; //this指的就是當前實例 3 this.age=age; 4 } 5 Fn.prototype.write=function(){ //這是一個公共的空間 每個實例調用方法直接到這裏找就行 牽涉到原型鏈 那就講講吧 6 console.log(this.name); 7 } 8 var person1=new Fn(‘xuwen‘,17); 9 var person2=new Fn(‘xiaoxu‘,23); 10 person1.write(); //xuwen 11 person2.write(); //xiaoxu 12 13 //原型鏈 14 //每個構造函數都有一個prototype屬性 這個屬性指向(值)存儲著 構造函數.prototype 裏面的東東 15 //每個對象(實例)都有一個__proto__屬性 (頂級Object.prototype這個對象沒有這個屬性) 這個屬性指向(值) 存儲著 構造函數.prototype 裏面的東東 16 //那麽(當然構造函數.prototype也是一個對象,所以構造函數.prototype裏面也有一個__proto__屬性 那麽這個屬性最終都指向Object.prototype) 17 //根據這一樣一級一級形成了原型鏈了
整完原型鏈那麽下面就是繼承了,這個子級構造函數可以獲取到父級構造函數的屬性和方法。這裏就不細講了繼承諸多繼承方法了。就直接用混合繼承方法來結束這一章了。
利用 父級.call(this) 來繼承父級的屬性。
利用一個空函數作中介來繼承原型方法
//該函數功能是實現child只繼承person上prototype屬性或者方法。 function extend(child, person) { var F = new Function(); //當然也可以寫成var F=function(){}; 都是一樣的 定義一個空函數而已 F.prototype = person.prototype; //把這個空函數的prototype屬性指向person原型對象 child.prototype = new F(); //child繼承空函數的原型屬性或者方法 就非常幹凈的繼承了person上的方法或屬性了 child.prototype.constructor = child; //構造器的指向改一下,防止繼承鏈亂序 child.sub = person.prototype; //自定義一個屬性把person的原型屬性或方法保存下來。 } function person() { } function child() { child.sub.constructor.call(this); //等同於person.call(this); }
在另外補充一下 instanceof 用法就是 person1 instanceof Fn 判斷實例是不是該構造函數下面的 除了父級構造函數 祖先構造函數也會判斷true
hasOwnProperty 用法 person1.hasOwnProperty(‘name‘) 判斷 x 屬性是否是person1的私有屬性 不能判斷原型鏈上 如果要判斷原型鏈上 用 in 關鍵字
代碼就不寫了。
那就這樣結束吧,明天數組和正則吧!
面向對象、原型鏈、繼承知識梳理