久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網
      最全最豐富的資訊網站

      javascript實現(xiàn)繼承的方式有哪些

      javascript實現(xiàn)繼承的方式:1、原型鏈繼承;將父類的實例作為子類的原型。2、構造繼承;使用父類的構造函數(shù)來增強子類實例。3、實例繼承;為父類實例添加新特性,作為子類實例返回。4、拷貝繼承。5、組合繼承。6、寄生組合繼承。

      javascript實現(xiàn)繼承的方式有哪些

      本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

      JS作為面向對象的弱類型語言,繼承也是其非常強大的特性之一。那么如何在JS中實現(xiàn)繼承呢?讓我們拭目以待。

      JS繼承的實現(xiàn)方式

      既然要實現(xiàn)繼承,那么首先我們得有一個父類,代碼如下:

      // 定義一個動物類 function Animal (name) {   // 屬性   this.name = name || 'Animal';   // 實例方法   this.sleep = function(){     console.log(this.name + '正在睡覺!');   } } // 原型方法 Animal.prototype.eat = function(food) {   console.log(this.name + '正在吃:' + food); };

      1、原型鏈繼承

      核心: 將父類的實例作為子類的原型

      function Cat(){  } Cat.prototype = new Animal(); Cat.prototype.name = 'cat';  // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.eat('fish')); console.log(cat.sleep()); console.log(cat instanceof Animal); //true  console.log(cat instanceof Cat); //true

      特點:

      • 非常純粹的繼承關系,實例是子類的實例,也是父類的實例

      • 父類新增原型方法/原型屬性,子類都能訪問到

      • 簡單,易于實現(xiàn)

      缺點:

      • 要想為子類新增屬性和方法,可以在Cat構造函數(shù)中,為Cat實例增加實例屬性。如果要新增原型屬性和方法,則必須放在new Animal()這樣的語句之后執(zhí)行。

      • 無法實現(xiàn)多繼承

      • 來自原型對象的所有屬性被所有實例共享

      • 創(chuàng)建子類實例時,無法向父類構造函數(shù)傳參

      2、構造繼承

      核心:使用父類的構造函數(shù)來增強子類實例,等于是復制父類的實例屬性給子類(沒用到原型)

      function Cat(name){   Animal.call(this);   this.name = name || 'Tom'; }  // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true

      特點:

      • 解決了1中,子類實例共享父類引用屬性的問題

      • 創(chuàng)建子類實例時,可以向父類傳遞參數(shù)

      • 可以實現(xiàn)多繼承(call多個父類對象)

      缺點:

      • 實例并不是父類的實例,只是子類的實例

      • 只能繼承父類的實例屬性和方法,不能繼承原型屬性/方法

      • 無法實現(xiàn)函數(shù)復用,每個子類都有父類實例函數(shù)的副本,影響性能

      3、實例繼承

      核心:為父類實例添加新特性,作為子類實例返回

      function Cat(name){   var instance = new Animal();   instance.name = name || 'Tom';   return instance; }  // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // false

      特點:

      • 不限制調用方式,不管是new 子類()還是子類(),返回的對象具有相同的效果

      缺點:

      • 實例是父類的實例,不是子類的實例

      • 不支持多繼承

      4、拷貝繼承

      function Cat(name){   var animal = new Animal();   for(var p in animal){     Cat.prototype[p] = animal[p];   }   // 如下實現(xiàn)修改了原型對象,會導致單個實例修改name,會影響所有實例的name值   // Cat.prototype.name = name || 'Tom'; 錯誤的語句,下一句為正確的實現(xiàn)   this.name = name || 'Tom'; }  // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // false console.log(cat instanceof Cat); // true

      特點:

      • 支持多繼承

      缺點:

      • 效率較低,內存占用高(因為要拷貝父類的屬性)

      • 無法獲取父類不可枚舉的方法(不可枚舉方法,不能使用for in 訪問到)

      5、組合繼承

      核心:通過調用父類構造,繼承父類的屬性并保留傳參的優(yōu)點,然后通過將父類實例作為子類原型,實現(xiàn)函數(shù)復用

      function Cat(name){   Animal.call(this);   this.name = name || 'Tom'; } Cat.prototype = new Animal();  // 組合繼承也是需要修復構造函數(shù)指向的。  Cat.prototype.constructor = Cat;  // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); // true

      特點:

      • 彌補了方式2的缺陷,可以繼承實例屬性/方法,也可以繼承原型屬性/方法

      • 既是子類的實例,也是父類的實例

      • 不存在引用屬性共享問題

      • 可傳參

      • 函數(shù)可復用

      缺點:

      • 調用了兩次父類構造函數(shù),生成了兩份實例(子類實例將子類原型上的那份屏蔽了)

      6、寄生組合繼承

      核心:通過寄生方式,砍掉父類的實例屬性,這樣,在調用兩次父類的構造的時候,就不會初始化兩次實例方法/屬性,避免的組合繼承的缺點

      function Cat(name){   Animal.call(this);   this.name = name || 'Tom'; } (function(){   // 創(chuàng)建一個沒有實例方法的類   var Super = function(){};   Super.prototype = Animal.prototype;   //將實例作為子類的原型   Cat.prototype = new Super(); })();  // Test Code var cat = new Cat(); console.log(cat.name); console.log(cat.sleep()); console.log(cat instanceof Animal); // true console.log(cat instanceof Cat); //true Cat.prototype.constructor = Cat; // 需要修復下構造函數(shù)

      特點:

      • 堪稱完美

      缺點:

      • 實現(xiàn)較為復雜

      附錄代碼:

      示例一:

      function Animal (name) {   // 屬性   this.name = name || 'Animal';   // 實例方法   this.sleep = function(){     console.log(this.name + '正在睡覺!');   }   //實例引用屬性   this.features = []; } function Cat(name){ } Cat.prototype = new Animal();  var tom = new Cat('Tom'); var kissy = new Cat('Kissy');  console.log(tom.name); // "Animal" console.log(kissy.name); // "Animal" console.log(tom.features); // [] console.log(kissy.features); // []  tom.name = 'Tom-New Name'; tom.features.push('eat');  //針對父類實例值類型成員的更改,不影響 console.log(tom.name); // "Tom-New Name" console.log(kissy.name); // "Animal" //針對父類實例引用類型成員的更改,會通過影響其他子類實例 console.log(tom.features); // ['eat'] console.log(kissy.features); // ['eat']

      原因分析:

      關鍵點:屬性查找過程

      執(zhí)行tom.features.push,首先找tom對象的實例屬性(找不到),

      那么去原型對象中找,也就是Animal的實例。發(fā)現(xiàn)有,那么就直接在這個對象的features屬性中插入值。

      在console.log(kissy.features); 的時候。同上,kissy實例上沒有,那么去原型上找。

      剛好原型上有,就直接返回,但是注意,這個原型對象中features屬性值已經變化了。

      贊(0)
      分享到: 更多 (0)
      網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號