• Javascript 继承的六种方法


    1.原型链

    • 利用原型让一个引用类继承另一个引用类型的属性和方法
     1 function superType() {
     2     this.property = true;
     3 }
     4 
     5 superType.prototype.getSuperValue = function () {
     6     return this.property;
     7 }
     8 
     9 function subType() {
    10     this.subProperty = false;
    11 }
    12 
    13 subType.prototype = new superType();
    14 subType.prototype.getSubValue = function () {
    15     return this.subProperty;
    16 }
    17 
    18 var instance = new subType();
    19 console.log(instance.getSuperValue());

    2.借用构造函数

    • 在子类的构造函数的内部调用超类的构造函数,使用call()或apply()函数。
     1 function superType(name) {
     2     this.name = name;
     3 }
     4 
     5 function subType() {
     6     // 继承了超类,同时还传递了参数
     7     superType.call(this, 'Nick');
     8     this.age = 29;
     9 }
    10 
    11 var instance = new subType();
    12 console.log(instance.name);
    • 方法都是在构造函数中创建的,无法进行复用。

    3.组合继承

    • 结合原型链继承和借用构造函数继承的优点,可以让两个实例有不同的属性,又可以拥有共同的方法
     1 function superType(name) {
     2     this.name = name;
     3     this.color = ["red", "blue"];
     4 }
     5 
     6 superType.prototype.sayName = function () {
     7     console.lgo(this.name);
     8 }
     9 
    10 function subType(name, age) {
    11     superType.call(this, name);
    12     this.age = age;
    13 }
    14 // 继承
    15 subType.prototype = new superType();
    16 subType.prototype.sayAge = function () {
    17     console.log(this.age);
    18 }
    19 
    20 var instance = new subType('Nick', 29);
    21 instance.sayAge();

    4.原型式继承

     1 function object(o) {
     2     function F() { };
     3     F.prototype = o;
     4     return new F();
     5 }
     6 // 这个方法和 Object.create()函数类似,不过后者只兼容主流浏览器
     7 var person = {
     8     name: "Nick",
     9     age: 29
    10 }
    11 
    12 var another = Object.create(person);
    13 console.log(another.name);

    5.寄生

    •  类似于寄生构造模式和工厂模式,即创建一个函数将这个过程封装。
     1 function another(original) {
     2     var clone = Object.create(original);
     3     clone.sayHi = function () {
     4         console.log('Hi');
     5     }
     6     return clone;
     7 }
     8 
     9 var person = {
    10     name: 'Nick',
    11     age: 29
    12 }
    13 
    14 var ins = another(person);
    15 ins.sayHi();

    6.寄生组合式继承

    • 只需要调用一次超类构造函数,效率高,并且避免了在prototype和子类上创建不必要的、多余的属性。与此同时,原型链不会变,还可以正常使用instance和isPrototypeOf()。
     1 function inheritPrototype(subType, superType) {
     2     var prototype = Object.create(superType.prototype);    // 创建对象
     3     prototype.costructor = subType; //增强对象
     4     subType.prototype = prototype; // 指定对象
     5 }
     6 
     7 function superType(name) {
     8     this.name = name;
     9     this.color = ["red", "blue"];
    10 }
    11 
    12 superType.prototype.sayName = function () {
    13     console.log(this.name);
    14 }
    15 
    16 function subType(name, age) {
    17     superType.call(this, name);
    18     this.age = age;
    19 }
    20 
    21 inheritPrototype(subType, superType);
    22 
    23 subType.prototype.sayAge = function () {
    24     console.log(this.age);
    25 }
    26 
    27 // 实例化
    28 var instance = new subType("Boer", 40);
    29 instance.sayName();
  • 相关阅读:
    QML中 Webview 元素的runJavaScript() 函数的使用方法
    Thinkphp 第二篇:如何将一个外部项目导入到Thimkphp环境中
    AMD电脑装完Winsows10后开机蓝屏,报错代码:cdmsnroot_s.sys
    JVM02——JVM运行时内存
    JVM01——JVM内存区域的构成
    JVM04——七个GC垃圾收集器
    JVM03——四种垃圾回收算法
    Mybatis的缓存机制详解
    mybatis插入insert操作,返回自增id
    mybatis批量查询-插入-删除
  • 原文地址:https://www.cnblogs.com/gemicat/p/4817411.html
Copyright © 2020-2023  润新知