**
javascript從入門到跑路-----小文的js學習筆記(1)---------script、alert、document,write() 和 console.log 標簽
javascript從入門到跑路-----小文的js學習筆記(2)--------- 語法構成、關鍵字和保留字、變數
javascript從入門到跑路-----小文的js學習筆記(3)---------javascript中的幾種資料型別
…
…
javascript從入門到跑路-----小文的js學習筆記目錄
**
關注我,我們一起學習進步,
1、原型鏈
將一個實體的屬性和方法給予到另一個實體的原型上
舉個栗子:這樣你可以看到這兩個建構式出來 兩個都是獨立的

然后我們將其連接起來

執行結果:你可以看到我們打出dx 的name 屬性就是 我們上面Father 的屬性

但是它也有 缺點 :
(1)當我們創建了多個實體之后,我們一旦更改了一個實體的屬性之后,那其他的實體的屬性也會被修改,因為他們是共享的;
(2)當我們創建子類實體的時候,無法向父類建構式傳遞引數
2、借用建構式
相當于是復制了一份父類的屬性 然后將其借用給 子類
舉個栗子:

執行結果:這樣我們的 Son 物件里 也擁有了 Father 的屬性

這種方式解決了上面 一旦一個 子類實體 屬性更改之后,導致其他子類的屬性被一起更改 的情況,
并且該種方式,在創建子類實體時,可以向父類建構式傳遞引數
缺點:
無法實作復用,每一個子類實體都有一個新的函式,如果實體物件多了,就會導致記憶體消耗過大,
3、組合繼承
組合繼承就是將 上面的兩種方式結合起來 ,可以達到取長補短的效果

執行結果:這也是能達到 的

當然 既然是兩種方式取長補短之后形成的 一種方式,那么它的優點具有:
(1)不存在共享屬性,一個實體屬性更改導致其他實體屬性更改的情況,
(2)它可以傳遞引數
(3)方法可復用
缺點 : 子類原型上會有一份 多余的父類實體的屬性
4、原型式繼承
用一個函式來生出一個新的物件,相當于這個物件就是復制的上一個物件,只不過是利用函式的形式來進行復制,
舉個栗子:
//我們創建一個dx物件
var dx = {
//添加 一個 name屬性和 weight 屬性
name : "老鴨子",
weight : "50kg"
}
//這個是用來生成 新物件的函式
function fn(cx){
//首先里面需要一個建構式
function Fn(){
}
Fn.prototype = cx;
return new Fn();
}
var dx1 = fn(dx);
alert(dx1.name);
執行結果:這樣相當于你便創造出來了一個新的物件 dx1
你可以彈出它的名字 同樣是“老鴨子”

這種方式有其優點也有其缺點
優點 : 它是從已有的物件繁衍出來的新的物件,不需要創建自定義型別
缺點: (1)因為它們是共用的一個地址,那么有一個屬性改變,那么會影響所有的物件相同的屬性進行改變,
(2)無法實作代碼復用,因為屬性是后添加的,沒用到函式封裝,
5、寄生式繼承
寄生式繼承 首先會創建一個新的物件,然后可以為其(添加屬性或方法),然后回傳物件,
舉個栗子:
function fn(obj){
//這里是一個建構式
function Fn(){
}
Fn.prototype = obj;
return new Fn();
}
//這里是寄生 生成新物件 并且為其添加新的屬性和方法的地方
function jsdx(obj){
//js為隨便命名的一個引數
var js = fn(obj);
//添加屬性
js.weight = "20kg"
//回傳
return js
}
//這是我們的一個物件
function Dx(){
this.name = "大鴨子";
}
//那么 新的物件 obj1 既繼承了 原物件 的 name 屬性 也被添加了上面的 weight 屬性
var obj1 = new jsdx(new Dx())
alert(obj1.weight);
執行結果:你可以看到 彈出 weight

6、寄生組合式繼承
寄生組合式繼承就是將兩種方式進行結合
舉個栗子:
function fn(obj){
function Fn(){
}
Fn.prototype = obj;
return new Fn();
}
function Dx(){
this.name = "大鴨子";
this.weight = "50kg"
}
function Dx2(){
Dx.call(this)
}
var obj1 = fn(Dx.prototype0);
obj1.constructor = Dx2;
Dx. prototype = obj1;
var obj2 = new Dx2()
alert(obj2.weight);
執行結果:

優點:修正了上面組合繼承的缺點,只使用了一次建構式
缺點:就是寫著十分繁瑣,
**
關注 校園君有話說 公眾號 ,回復 web前端 免費領取50G 前端學習資料 一份 ,我們一起學習進步吧,

轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/7593.html
標籤:AI
