摘要:原型我們知道任何一個函數(shù)都存在一個屬性,他是個對象,這個對象我們就叫他原型對象這個原型對象本身也自帶兩個屬性和這個屬性是指向創(chuàng)建此對象的構(gòu)造函數(shù)的引用,構(gòu)造函數(shù)的實例化對象,也可以通過屬性來訪問構(gòu)造它的那個函數(shù)這個屬性指向創(chuàng)建此對象的構(gòu)造函
原型
我們知道任何一個函數(shù)都存在一個prototype屬性,他是個對象,這個對象 我們就叫他原型對象
這個原型對象本身也自帶兩個屬性:constructor 和 proto
constructor: 這個屬性是指向創(chuàng)建此對象的構(gòu)造函數(shù)的引用,構(gòu)造函數(shù)的實例化對象,也可以通過constuctor屬性來訪問構(gòu)造它的那個函數(shù)_proto_: 這個屬性指向創(chuàng)建此對象的構(gòu)造函數(shù)的prototype原型對象的引用
例子: //我的家族姓莫 function Parent(){ this.name = "mo" } //我家族是音樂世家 Parent.prototype.work = function(){ return "musicing" } //爸媽生了我 var me = new Parent() //我也要唱歌 console.log(me.work()) //=>musicing //爸爸媽媽又生了二胎 var myBrother = new Parent() //他也會唱歌 console.log(myBrother.work()) //=>musicing //證明我兩是否是親生的 console.log(me.work() === myBrother.work()) //=>true 解釋一波: me 和 myBrother 是構(gòu)造函數(shù)Parent()new出來的的一個實例,me 和 myBrother 都有一個隱式屬性_proto_,引用Parent() 的prototype屬性來得到繼承原型鏈
在訪問 me 的 work 方法時,找不到, 就會順著_protp_屬性往上在構(gòu)造函數(shù)的prototype找,找到了就停止,沒找到繼續(xù)往上到Object.prototype找,再沒找到就到null了,自然也找不到就只能返回undifined,這種鏈式的引用就是原型鏈,通過原型鏈實現(xiàn)繼承還是很方便的
萬一原型鏈斷鏈呢?原因:如果對 構(gòu)造函數(shù) 或者 原型鏈 修改一些方法或者屬性的時候,導致函數(shù)的constructor不等于創(chuàng)建它的構(gòu)造函數(shù),那就會斷鏈
如果 先實例再通過 字面量添加或修改,那么后新定義的方法就對先繼承的方法或?qū)傩跃蜁辉谏?,就會斷鏈,這是因為字面量來修改原型時,constructor發(fā)生了改變,也就是說該函數(shù)指向的創(chuàng)建該函數(shù)的構(gòu)造函數(shù)發(fā)生了改變,字面量默認的constructor的值是Object(),所以為了避免斷鏈,盡量不要使用字面量重新賦值,修改
例子: //創(chuàng)建一個構(gòu)造函數(shù)Car function Car(){ this.brand = "大奔"; } //大奔 80萬 Car.prototype.price = "80"; //我來買一個大奔 先實例 var benCar1 = new Car(); console.log(benCar1.price) //=>80 //我希望我的大奔 帶有翅膀的 能飛 Car.prototype = { hasWing: true, hasFlying: function(){ console.log("flying...") } } var benCar = new Car() (1) 正常情況下 console.log(benCar1.brand,benCar1.price,benCar1.hasWing,benCar1.hasFlying,benCar1.constructor) //=> 大奔 80 undefined undefined ? Car(){} (2)字面量添加屬性方法時 console.log(benCar.brand,benCar.price,benCar.hasWing,benCar.hasFlying,benCar.constructor) //=> 大奔 undefined true ? (){} ? Object() { [native code] }繼承的幾種方式
(1) 原型鏈繼承
原型鏈繼承是通過 new實例化構(gòu)造函數(shù) 賦給子類的原型, 其實實例的子類本身是完全的空對象,所有的屬性方法都需要去原型鏈上找。
例子: function Grandpa(){ this.name = "mo" } Grandpa.prototype.work = function(){ return "musicing" } function Parent(){ } Parent.prototype = new Grandpa() var me = new Parent() console.log(me.work()) //=>musicing 我找啊找啊原來是Grandpa會musicing var myBrother = new Parent() console.log(myBrother.work()) //=>musicing console.log(me.work() === myBrother.work()) //=>true
(2) 構(gòu)造函數(shù)繼承
構(gòu)造函數(shù)繼承 通過apply去調(diào)用父類的構(gòu)造函數(shù),達到繼承父類的實例屬性,對,只能繼承屬性,要想繼承方法 采用寄生組合繼承
例子 function Grandpa(firstname){ this.name = "mo " + firstname } Grandpa.prototype.work = function(){ return "musicing" } function Parent(firstname){ Grandpa.apply(this, arguments) } Parent.prototype = new Grandpa() var me = new Parent("alice") console.log(me.work()) //=>musicing var myBrother = new Parent("bob") console.log(myBrother.work()) //=>musicing console.log(me.work() === myBrother.work()) //=>true console.log(me.name, myBrother.name,me.name === myBrother.name)//=>mo alice ,mo bob ,false
(3) 寄生組合繼承
寄生組合繼承是我們經(jīng)常要用到的,組合了原型和構(gòu)造函數(shù),結(jié)合Object.create(obj),方法對傳入的對象進行淺拷貝,這樣可以實現(xiàn)對實例屬性和原型屬性分別進行繼承
淺拷貝:僅僅是指向被拷貝的內(nèi)存地址,如果原地址中對象被改變了,那么淺拷貝出來的對象也會相應改變
例子: // 寄生組合繼承 function Grandpa(firstname){ this.name = "mo " + firstname } Grandpa.prototype.work = function(){ return "musicing" } function Parent(firstname){ Grandpa.apply(this, arguments) } // Parent.prototype = new Grandpa() //改成 Parent.prototype = Object.create(Grandpa.prototype); // Object.create()將父級對象的屬性和方法進行引用 Parent.prototype.constructor = Parent; //將該函數(shù)的construnctor指向parent構(gòu)造函數(shù) console.log(Parent.prototype) var me = new Parent("alice") var myBrother = new Parent("bob") console.log(me.work() === myBrother.work()) //=>true console.log(me.name, myBrother.name,me.name === myBrother.name)//=>mo alice ,mo bob ,false
好了,有時間還會補充...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/90456.html