zoukankan      html  css  js  c++  java
  • ES5 继承方式

    1、原型链继承

    function A(name) {
        this.name = name
    }
    
    A.prototype.getName = function() {
        return this.name
    }
    
    function B() {
        this.bName = "L"
    }
    
    B.prototype = new A("H");
    let b = new B();
    

      优点:实现比较简单,能通过instanceOf和isPrototypeOf的检测。

          缺点:1. 在通过原型链实现继承时,原型实际上会成为另一个类型的实例, 父类的实例属性实际上会成为子类的原型属性。结果就是所有的子类的实例都会共享父类的实例属性(引用类型的)。
             2. 在创建子类型的实例时,没有办法在不影响所有实例的情况下,向父类型的构造函数传递参数。因此实践中很少单独使用原型链继承。

      

    2、构造函数继承

    function A(name) {
        this.name = name
    }
    
    function B(nameParam) {
        A.call(this, nameParam)
    }
    
    let b = new B("H");

          优点:可以向父类构造函数传参数,并且每一个子类实例都有父类属性和方法的副本
          缺点:正是因为这种方法调用父类,所以也只能继承父类的属性和方法,且继承的方法也无法复用。并且不能继承父类原型的属性和方法。(子类原型并未链接父类原型)

    3、组合继承

    function A(name) {
        this.name = name
    }
    A.prototype.getName = function() {
        return this.name;
    }
    
    function B(nameParam, ageParam) {
        A.call(this, nameParam);
        this.age = ageParam;
    }
    
    B.prototype = new A("H");
    let b = new B("L", 23);

          优点:组合继承避免了原型链和借用构造函数的缺陷。融合了他们的优点成为JavaScript中最常用的继承模式。而且instanceof 和 isPrototypeOf() 也能够用于识别基于组合继承创建的对象。
          缺点:组合继承调用了两次父类,因此子类实例和子类的原型上各存有一份父类实例的属性和方法。

    4、原型式继承

    function A(obj) {
        function fn() {}
        fn.prototype = obj
        return new fn()
    }
    
    let b = {
        name: "H",
        play: function() {
            console.log(`${this.name} is playing`);
        }
    }
    
    let c = new A(b);
    

      优点:在没有必要兴师动众的创建构造函数,而只想让一个对象与另外一个对象保持类似的情况下,原型式继承是完全可以胜任的。

          缺点:包含引用类型值的属性始终都会共享相同的值,并且这种方法有局限性。

    5、寄生继承

    function A(obj) {
        function fn() {};
        fn.prototype = obj;
        return new fn();
    }
    
    function generate(people) {
        let b = A(people);
        b.getName = function() {
            console.log(`His name is ${this.name}`)
        }
        return b;
    }
    
    let p = {
        name: "H",
        play: function() {
            console.log(`${this.name} is playing`)
        }
    }
    
    let b = generate(p);
    

      优点:在主要考虑对象,而不是自定义类型和构造函数的情况下,寄生式继承也是一种可选方案。

          缺点:和原型继承类似有一定局限性。

    6、寄生组合式继承

    function A(name) {
        this.name = name
    }
    A.prototype.getName = function() {
        console.log(`His name is ${this.name}`)
    }
    
    function B(nParam, aParam) {
        A.call(this, nParam);
        this.age = aParam;
    }
    
    function generate(Parent, Child) {
        let proto = Object.create(Parent.prototype);
        proto.constructor = Child;
        Child.prototype = proto;
    }
    
    generate(B,A);
    let c = new B()
    

      

    new:

    {
        var obj = {};
        var res = func.call(obj);
        return typeof res ==="Object"? res: obj;
    }
    

    Object.create:

    {
        function fn() {};
        fn.prototype = obj;
        return new fn();
    }
  • 相关阅读:
    velocity模板引擎学习(2)-velocity tools 2.0
    silverlight: http请求的GET及POST示例
    职责链(Chain of Responsibility)模式在航空货运中的运用实例
    H2 Database入门
    velocity模板引擎学习(1)
    Struts2、Spring MVC4 框架下的ajax统一异常处理
    企业应用通用架构图
    nginx学习(2):启动gzip、虚拟主机、请求转发、负载均衡
    nginx学习(1):编译、安装、启动
    eclipse/intellij Idea集成jetty
  • 原文地址:https://www.cnblogs.com/Lyh1997/p/14510792.html
Copyright © 2011-2022 走看看