zoukankan      html  css  js  c++  java
  • 1.js的继承的实现方法

    原文摘自:https://www.cnblogs.com/gwf93/p/10384352.html

    先写一个父类Car

    function Car(name){
        this.name = name;
        this.driver = function (){
            console.log('日行千里')
        }
    }
    Car.prototype.addOil = function(param){
        this.oil = param;
       console.log(this.name + '每天加油' + param + 'L')
    }

    (一)原型链继承:

       核心: 将父类的实例作为子类的原型

              instanceOf:测试一个对象是否为一个类的实例

    // 原型继承
    function BaoMa() {
    }
    BaoMa.prototype = new Car() //父类的实例作为子类的原型,继承的关键
    BaoMa.prototype.name = "宝马"
    
    var baoMa1 = new BaoMa();  //  子类的实例化
    console.log(baoMa1.name)
    console.log(baoMa1.addOil(20))
    console.log(baoMa1.driver())
    console.log(baoMa1 instanceof Car)  // true
    console.log(baoMa1 instanceof Car) // true
    1. 特点:

      1. 纯粹的继承关系,实例是子类的实例,也是父类的实例
      2. 父类新增原型方法/原型属性,子类都能访问到
      3. 简单,易于实现

      缺点:

      1. 可以在Cat构造函数中,为Cat实例增加实例属性。如果要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行。
      2. 无法实现多继承
      3. 来自原型对象的所有属性被所有实例共享
      4. 创建子类实例时,无法向父类构造函数传参

    (二)构造函数继承: 

    // 构造继承
    function DaZhong(name){
        Car.call(this);
        this.name = name || '迈腾';
    }
    let maiTeng = new DaZhong();
    console.log(maiTeng.name) // 迈腾
    console.log(maiTeng.driver())
    console.log(maiTeng instanceof Car); // false
    console.log(maiTeng instanceof DaZhong) // true

    特点:

    1. 解决了1中,子类实例共享父类引用属性的问题
    2. 创建子类实例时,可以向父类传递参数
    3. 可以实现多继承(call多个父类对象)

    缺点:

    1. 实例并不是父类的实例,只是子类的实例
    2. 只能继承父类的实例属性和方法,不能继承原型属性/方法
    3. 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

    (三) class 继承

    在 ES6 中,我们可以使用 class 去实现继承,并且实现起来很简单

    核心: 使用 extends 表明继承自哪个父类,并且在子类构造函数中必须调用 super,这段代码可以看成 Animal.call(this, name)

        class的本质就是函数

    class DaZhong extends Car {
        constructor(name){
        super(name);
           this.name= name || '迈腾';
        }
    }
    let maiTeng = new DaZhong();
    console.log(maiTeng.name) // 迈腾
    console.log(maiTeng.addOil(30))  // 迈腾每天加油30L
    console.log(maiTeng.driver())
    console.log(maiTeng instanceof Car); //true
    console.log(maiTeng instanceof DaZhong) // true
  • 相关阅读:
    性能卓越的js模板引擎--artTemplate
    AngularJS学习笔记之依赖注入
    高性能的JavaScript库---Lodash
    如何阅读一本书
    我为什么写博客
    [cocos2d-x]深入--几个代表性的类 (续)
    [cocos2d-x]深入--几个代表性的类
    [cocos2dx]2.2到3.1(3.0)升级帮助
    [cocos2dx]利用NDK崩溃日志查找BUG
    IT技术团队管理-总结
  • 原文地址:https://www.cnblogs.com/linjiu0505/p/11847815.html
Copyright © 2011-2022 走看看