• JS中的继承方式总结


    1. 原型链继承(又称类继承)

    Child.prototype = new Parent();

     1 function Parent (name, age) {
     2     this.name = name;
     3     this.age = age;
     4 }
     5 Parent.prototype.say = function(){
     6     console.log('hello, my name is ' + this.name);
     7 };
     8 function Child() {
     9 }
    10 Child.prototype = new Parent('pursue');
    11 var child1 = new Child();
    12 child1.say(); //hello, my name is pursue
    13 var child2 = new Child();
    14 console.log(child1.say === child2.say);//true
    15 console.log(child1.name === child2.name);//true

    通过子类的原型prototype对父类实例化实现。利用将父类实例赋值给子类原型,达到继承的目的:子类原型可访问父类原型上的属性和方法 以及 父类构造函数中复制的属性和方法(类的构造函数中的属性和方法会在实例化对象的时候复制的该实例化对象中去)

    Child.prototype instanceof Parent  //true

    缺点一:父类的共有属性是引用类型时,子类的一个实例更改子类原型从父类构造函数继承来的该属性时,会直接引起子类其他实例中该继承属性值的变化。

    缺点二:子类通过原型prototype实现对父类的实例化而实现继承,因此不能在创建父类的时候给父类传参,所以在实例化父类的是无法对父类构造函数内的属性进行初始化。

    2. call(thisObj, param1, param2,...)  // 构造函数继承

     1 function Parent(username){
     2     this.username = username;
     3     this.hello = function(){
     4       alert(this.username);
     5     }
     6   }
      Parent.prototype.show = function() {console.log("show me")}
    7 function Child(username,password){ 8 Parent.call(this,username); 9 this.password = password; 10 this.world = function(){ 11 alert(this.password); 12 } 13 } 14 var parent = new Parent("zhangsan"); 15 var child = new Child("lisi","123456"); 16 parent.hello(); 17 child.hello(); 18 child.world();
       child.show(); //TypeError

    3. apply(thisObj, [param1,param2,...])  // 构造函数继承

     1 function Parent(username){
     2     this.username = username;
     3     this.hello = function(){
     4       alert(this.username);
     5     }
     6   }
      Parent.prototype.show = function() {console.log("show me")}
    7 function Child(username,password){ 8 Parent.apply(this,new Array(username)); 9 this.password = password; 10 this.world = function(){ 11 alert(this.password); 12 } 13 } 14 var parent = new Parent("zhangsan"); 15 var child = new Child("lisi","123456"); 16 parent.hello(); 17 child.hello(); 18 child.world();
       child.show(); //TypeError

    2,3 为构造函数式继承方式,通过在子类的构造函数作用环境中执行一次父类的构造函数实现,优化了 1 中的两个缺点,但是由于是通过构造函数继承的,故父类原型中的方法子类是无法调用到的,所以有了下面的组合继承方式。

    4. 组合继承(call+原型链 / apply+原型链)

     1 function Parent(hello){
     2     this.hello = hello;
     3   }
     4   Parent.prototype.sayHello = function(){
     5     alert(this.hello);
     6   }
     7   function Child(hello,world){
     8     Parent.call(this,hello);//利用 call 方法 将父类的属性继承过来
     9     //Parent.apply(this,new Array(hello));//利用 apply 方法 将父类的属性继承过来
    10     this.world = world;//新增一些属性
    11   }
    12   Child.prototype = new Parent();//将父类原型中的的方法继承过来
    13   Child.prototype.sayWorld = function(){//新增一些方法
    14     alert(this.world);
    15   }
    16   var c = new Child("zhangsan","lisi");
    17   c.sayHello();
    18   c.sayWorld();

     ① 在子类构造函数中执行父类构造函数,② 在子类原型上实例化父类

    5.寄生组合继承,与4相似,只是将原型链换做了Object.create(Parent.prototype)

     1 function Parent(hello){
     2     this.hello = hello;
     3   }
     4   Parent.prototype.sayHello = function(){
     5     alert(this.hello);
     6   }
     7   function Child(hello,world){
     8     Parent.call(this,hello);//利用 call 方法 将父类的属性继承过来
     9     //Parent.apply(this,new Array(hello));//利用 apply 方法 将父类的属性继承过来
    10     this.world = world;//新增一些属性
    11   }
    12   Child.prototype = Object.create(Parent.prototype);//将父类的方法继承过来
    13   Child.prototype.sayWorld = function(){//新增一些方法
    14     alert(this.world);
    15   }
    16   var c = new Child("zhangsan","lisi");
    17   c.sayHello();
    18   c.sayWorld();

    6.扩展Object类

    Object.prototype.方法名 = function (parentObject) {

      for(var attr in parentObject) {

        this[attr] = parentObject[attr];

      }

    }

     1 function Parent (name) {
     2             this.name = name
     3             this.syaHi = function() {
     4                 console.log('name is '+this.name);
     5             }
     6         }
     7 
     8         function Child(pwd) {
     9             this.pwd = pwd;
    10             this.info = function() {
    11                 console.log(this.name, this.pwd);
    12             }    
    13         }
    14 
    15         Object.prototype.show = function(parentObject) {
    16             for (var attr in parentObject) {
    17                 this[attr] = parentObject[attr];
    18             }
    19         }
    20         var p = new Parent('zhangsan');
    21 
    22         var c = new Child(12345);
    23         c.show(p);
    24 
    25         c.syaHi();    // zhangsan
    26         c.info();    // zhangsan,12345

    7. 对象冒充  在B(子类)的构造函数中,定义属性 bb = A(父类)的构造函数,在B的构造函数的最后再将bb删除

     1 function Parent (name) {
     2             this.name = name
     3             this.show = function() {
     4                 console.log('name is '+this.name);
     5             }
     6         }
     7 
     8         function Child(name) {
     9             this.method = Parent;    // 将Parent类的构造函数赋值给Child的一个方法
    10             this.method(name);        // 这里相当于把Parent的构造函数当作普通函数调用了一次,对象冒充
    11             delete this.method;        // 一处这个用来做对象冒充功能的method
    12         }
    13 
    14         var p = new Parent('父类');
    15         p.show();    // name is 父类
    16 
    17         var c = new Child('子类');
    18         c.show();    // name is 子类
  • 相关阅读:
    【流程图绘制】+Visual Paradigm+各种常用流程图绘制
    【数据库】+visual paradigm+设计ER数据库模型
    【Java】+正则
    【前端】
    【selenium】+java+谷歌+实现UI自动化
    【前端】+前、后端通过json接口建立连接
    【Java】+前、后端通过json接口建立连接
    【前端】+可视化布局工具
    【jmeter】+Not able to find Java executable or version. Please check your Java installation
    【Git】+常用命令大全
  • 原文地址:https://www.cnblogs.com/s-qiu/p/7087521.html
Copyright © 2020-2023  润新知