zoukankan      html  css  js  c++  java
  • javaScript中的继承

    借用原型链 通过prototype属性

    function SuperType() {
      this.superType = 'SuperType';
    }
    SuperType.prototype.getSuper = function() {
      return this.superType;
    }
    
    function ChildType() {
      this.childType = ';childType'
    }
    // 继承了SuperType
    ChildType.prototype = new SuperType(); 
    
    let instance1 = new ChildType();
    
    console.log(instance1.getSuper()); // 'SuperType'
    //如果父类上也相同的方法或者属性,将会覆盖这个方法,但不影响父类方法或属性

    借用构造函数 apply和call 优点可以传递参数

    function SuperType() {
        this.colors = ['red', 'blue', 'green']
    }
    
    function SubType() {
        // 继承SuperType
        SuperType.call(this)
    }
    
    var instance1 = new SubType() var instance2 = new SubType()
    
    instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"]
    console.log(instance2.colors) // ["red", "blue", "green"]

    组合继承 原型链+构造函数

    function SuperType(name) {
      this.name = name;
      this.colors = ['red', 'green', 'yellow'];
    }
    SuperType.prototype.getColors = function() {
      return this.colors;
    }
    
    function ChildType(name) {
      // 继承属性
      SuperType.call(this, name);
    }
    // 继承方法
    ChildType.prototype = new SuperType();
    
    let instance1 = new ChildType('Nick');
    let instance2 = new ChildType('Cherry');
    instance1.colors.push('black');
    
    console.log(instance1.name); // 'Nick'
    console.log(instance1.colors); // ' ["red", "green", "yellow", "black"]'
    instance1.getColors(); // ' ["red", "green", "yellow", "black"]'
    console.log(instance2.name); // 'Cherry'
    console.log(instance2.colors); //  ["red", "green", "yellow"]

    通过Object.create()与Object.defineProperties()方法的第二参数格式相同,

    let person = {
      name: 'Nick',
      friends: ['cherry', 'july'],
    };
    
    let person1 = Object.create(person);
    person1.name = 'Jhon';
    person1.friends.push('cherry');
    
    let person2 = Object.create(person);
    person2.name = 'Lily';
    person2.friends.push('Bob');
    
    console.log(person.friends); // ["cherry", "july", "cherry", "Bob"]

    var person = {
        name: "Bob",
        friends: ["Shelby", "Court", "Van"]
    };
    
    var anotherPerson = Object.create(person, {
        name: {
            value: "Greg"
        },
        age: {
            value: 18
        }
    });
    
    alert(anotherPerson.name);    //Greg
    alert(anotherPerson.age);    //18
    alert(person.name);        //Bob

    寄生式继承 创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象.

    function createAnother(original){
        var clone = Object.create(original);    //通过调用函数创建一个新对象
        clone.sayHi = function(){               //以某种方式来增强这个对象
            alert("Hi");
        };
        
        return clone;                        //返回这个对象
    }
    
    var person = {
        name: "Bob",
        friends: ["Shelby", "Court", "Van"]
    };
    var anotherPerson = createAnother(person);
    anotherPerson.sayHi();

    寄生组合式继承 都会调用两次构造函数:一次是在创建子类型原型时,另一次是在子类型构造函数内部。

    function SuperType(name){
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function(){
        alert(this.name);
    }
    
    function SubType(name, age){
        SuperType.call(this, name);  //第二次调用SuperType()
        
        this.age = age;
    }
    SubType.prototype = new SuperType();  //第一次调用SuperType()
    SubType.prototype.sayAge = function(){
        alert(this.age);
    }
    function inheritPrototype(subType, superType){
        var protoType = Object.create(superType.prototype);    //创建对象
        protoType.constructor = subType;                    //增强对象
        subType.prototype = protoType;                        //指定对象
    }
    function SuperType(name){
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function(){
        alert(this.name);
    }
    
    function SubType(name, age){
        SuperType.call(this, name);  
        
        this.age = age;
    }
    inheritPrototype(SubType, SuperType)
    SubType.prototype.sayAge = function(){
        alert(this.age);
    }
    
    var instance = new SubType("Bob", 18);
    instance.sayName();
    instance.sayAge();
    

      

    inheritPrototype函数接收两个参数:子类型构造函数和超类型构造函数。
    1. 创建超类型原型的副本。
    2. 为创建的副本添加constructor属性,弥补因重写原型而失去的默认的constructor属性
    3. 将新创建的对象(即副本)赋值给子类型的原型
    这种方法只调用了一次SuperType构造函数,instanceof 和isPrototypeOf()也能正常使用。
  • 相关阅读:
    python模块之PIL模块(生成随机验证码图片)
    3.5 黑盒测试方法-逻辑推断法
    3.4 黑盒测试用例的设计方法之-等价类划分与边界值分析
    三、测试用例
    LoadRunner性能测试工具下载
    二、软件测试的流程
    优秀的软件测试人员应该具备的素质
    一、测试基础
    实现人脸识别性别之路------前端突破点
    day2
  • 原文地址:https://www.cnblogs.com/chenzxl/p/14452444.html
Copyright © 2011-2022 走看看