• JavaScript 继承方式的实现


     1 1、原型链继承
     2     function superType(name){
     3        this.name= 'milk';
     4     }
     5     super.prototype.sayName=function(){
     6        console.log(this.name);
     7      }
     8     function subType (age){
     9         this.age= 20;
    10     }
    11     subType.prototype=new superType();//    将原型对象等于另一个类型的实例
    12     subType.prototype.getAge=function(){console.log(this.age)}
    13     var instance = new subType();
    14 //    缺点:由于原型链共享的本质所引起的:对于 引用类型的数据共享问题;引用类型 数据会被所有实例共享;并且在创建子类型实例时,不能向超类型的构造函数中传递参数(应该说是 没有办法在不影响所有对象实例的情况下,给超类型的构造函数传参)
    15 
    16 
    17 
    18 2、借用构造函数
    19 
    20 function superType(name){
    21     this.name=name;
    22 }
    23 
    24 fucntion subType(){
    25     superType.call( this ,'milk');
    26 }
    27 
    28 var instance=  new subType();
    29 
    30 
    31 // 缺点:方法都在构造函数中定义,因此无法进行函数复用;并且超类型原型中定义的方法对子类型而言也是不可见的;
    32 
    33 
    34 3、组合继承:
    35 
    36 // 思想:通过借用构造函数来 实现实例属性的继承;使用 原型链实现原型属性和方法的继承
    37 
    38 function superType(name){
    39     thism.name=name;
    40 }
    41 superType.prototype.sayName=function(){
    42     console.log(this.name);
    43 }
    44 
    45 fucntion subType(name,age){
    46     superType.call(this,name);
    47     this.age=age;
    48 }
    49 
    50 subType.prototype= new superType();
    51 subType.prototype.constructor= subType;
    52 subType.prototype.sayAge=function(){
    53     console.log(this.age);
    54 }
    55 
    56 var instance = new subType('milk',20);
    57 
    58 // 缺点 :效率较低,需要调用两次超类型构造函数
    59 
    60 4、原型式继承
    61 
    62 不必创建自定义类型,只需借助已有对象创建新对象即可;
    63 function object(o){
    64     function F(){};
    65     F.prototype = o;
    66     return new F();
    67 }
    68 ES5 新增了一个类似的函数: Object.create(obj,{});
    69 第一个参数:用作新对象(new F() )原型的对象;
    70 第二个参数:为新对象定义额外属性的对象;
    71 // 应注意:包含引用类型值得属性始终都会共享相应的值;
    72 
    73 5、寄生式继承
    74 //  基于已有对象创建一个新对象,增强新对象能力,并将新对象返回;
    75 
    76 function creatAnther(original){
    77     var clone= object(original);
    78     clone.saySN=function(){
    79         //do somethings
    80     };
    81     return clone;
    82 }
    83 
    84 6、寄生组合式继承
    85 // 由于组合继承 会调用两次 超类型的构造函数,所以 采用 寄生组合式继承从而节省  第一次调用;
    86 // 思想:借用构造函数来继承属性,通过原型链的混成形式来继承方法;
    87 本质上:使用 寄生式继承来继承超类型原型,然后再将结果指定给子类型的原型;
    88 
    89 用::
    90 var prototype  =  object(superType.prototype);//创建超类型原型的副本;//相当于超类型的实例
    91 prototype.constructor= subtype;// 弥补重写原型而丢失的constructor属性
    92 subtype.prototype= prototype;// 将新创建的 对象复制给子类型的原型
    93 替换::
    94 subType.prototype= new superType();
    95 subType.prototype.constructor= subType;
  • 相关阅读:
    mybatis
    BeanUtil拷贝
    lombok(@Getter&@Setter)
    fly插件飞向购物车
    原生JavaScript判断是否为邮箱、危险字符、验证长度、验证网址、验证小数、整数、浮点数等常用的 js 验证
    原生JavaScript获取复选框的值
    原生JavaScript获取单选按钮的值
    原生JavaScript实现返回顶部的通用方法
    原生JavaScript获得URL中GET参数值
    原生JavaScript常用的正则表达式
  • 原文地址:https://www.cnblogs.com/CHWYH/p/5444451.html
Copyright © 2020-2023  润新知