超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

js學(xué)習(xí)中的總結(jié)——幾種繼承模式

2018-6-29    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

     js中構(gòu)造函數(shù)的幾種繼承模式淺析

一、原型鏈模式繼承

    利用原型讓一個(gè)引用類型繼承另一個(gè)引用類型的屬性和方法 。

    用的最多。

    缺點(diǎn):不可傳參,不可多繼承。


        
  1. function People(name, age) {//添加公有屬性
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }//創(chuàng)建一個(gè)名為People的類
  7. People.prototype.eat = function() {//添加私有屬性
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color) {//創(chuàng)建一個(gè)名為Cat的類
  11. this.color = color;
  12. }
  13. Cat.prototype = new People('小叮當(dāng)', 200);//實(shí)例化一個(gè)People類,并賦值給Cat類的原型鏈
  14. var cat = new Cat('藍(lán)白色')
  15. console.log(cat.name)//'小叮當(dāng)'
  16. cat.eat();//'小叮當(dāng)賊能吃'

二、混合模式繼承

    用call的方法只能繼承私有屬性,所以再加一遍一遍原型鏈模式繼承,原型鏈模式繼承又把私有屬性和公有屬性都繼承了一遍。


        
  1. function People(name, age) { //創(chuàng)建一個(gè)父級(jí)People類
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. People.call(this, name, age); //通過call的形式繼承
  13. //通過call(this),將People的指向改為Cat的實(shí)例
  14. }
  15. var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 1);
  16. console.log(cat.name);//'小叮當(dāng)'
  17. cat.eat();//報(bào)錯(cuò),
  18. //繼承不了公有屬性,所以cat.eat()會(huì)報(bào)錯(cuò);

為了繼承公有屬性,用原型鏈模式在把公有屬性和方法繼承過來,


        
  1. function People(name, age) { //創(chuàng)建一個(gè)父級(jí)People類
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. People.call(this, name, age); //通過call的形式繼承
  13. //通過call(this),將People的指向改為Cat的實(shí)例
  14. }
  15. Cat.prototype = new People()
  16. var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 200)
  17. console.log(cat)
  18. console.log(cat.name); //'小叮當(dāng)',在原型鏈繼承的時(shí)候,就近原則,cat.name 先找到'小叮當(dāng)',就不往下找了
  19. cat.eat(); //'小叮當(dāng)賊能吃'

三、拷貝繼承

    優(yōu)點(diǎn):可以多繼承,可傳參;

    缺點(diǎn):浪費(fèi)資源,不能判斷父級(jí);


        
  1. function People(name, age) { //創(chuàng)建一個(gè)父級(jí)People類
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. var people = new People(name, age) //實(shí)例化一個(gè)People類
  13. for (let i in people) {
  14. this[i] = people[i]; //將people中的可枚舉屬性和方法遍歷并附給Cat類,公有屬性和私有屬性都是可枚舉屬性;
  15. }
  16. }
  17. var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 2);
  18. console.log(cat.name); //小叮當(dāng)
  19. cat.eat(); //小叮當(dāng)賊能吃

四、寄生組合方式繼承

    優(yōu)點(diǎn):私有屬性和公有屬性都單獨(dú)繼承,可以傳參;

    私有屬性可以多繼承,公有屬性不可多繼承;


        
  1. function People(name, age) {
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. People.call(this, name, age) //用call的形式把私有屬性繼承過來
  13. }
  14. function Fn() {} //創(chuàng)建一個(gè)中間構(gòu)造函數(shù),用來接收People的公有屬性,為了防止創(chuàng)建實(shí)例Cat實(shí)例是影響原來的people構(gòu)造函數(shù)
  15. Fn.prototype = People.prototype;
  16. Cat.prototype = new Fn(); //將中間構(gòu)造函數(shù)Fn繼承people的公有屬性傳給Cat的原型鏈
  17. Cat.prototype.constructor = Cat; //由于上一步重置了Cat原型鏈的constructor屬性,所以要重新給賦回來;
  18. var cat = new Cat('藍(lán)白色', '小叮當(dāng)', 3);
  19. console.log(cat.name); //'小叮當(dāng)'
  20. cat.eat() //'小叮當(dāng)賊能吃


注:若有不嚴(yán)謹(jǐn)與錯(cuò)誤的地方,請(qǐng)多指教!






  1. 這里寫圖片描述



藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔