• 继承


    原型链

    function SuperType() {
            this.name ="viven";
        }
        SuperType.prototype.getSuperValue = function () {
            return this.name;
        }
    
    
        var b = new SuperType();
        function subType() {
            this.anotherName="kevin";
        }
        subType.prototype.getSuperValue = function () {
            return this.anotherName;
        }
        subType.prototype =new SuperType();
        var instance  = new subType();
        console.log(instance.getSuperValue()) //viven

    因为subType是SuperType的实例,所以,subType的prototype已经指向了SuperType的原型。 所以打印出来的是viven

    如果在这之前先实例化instance,则instance继承的还是subType没有指向SuperTyoee的原型之前的实例:那么打印的是Kevin

    function SuperType() {
                this.name ="viven";
            }
            SuperType.prototype.getSuperValue = function () {
                return this.name;
            }
    
    
            var b = new SuperType();
            function subType() {
                this.anotherName="kevin";
            }
            subType.prototype.getSuperValue = function () {
                return this.anotherName;
            }
            var instance  = new subType();
            subType.prototype =new SuperType();
            console.log(instance.getSuperValue()) //Kevin

    确定原型和实例之间的关系instanceof

    function SuperType() {
                this.name ="viven";
            }
            SuperType.prototype.getSuperValue = function () {
                return this.name;
            }
    
    
            var b = new SuperType();
            function subType() {
                this.anotherName="kevin";
            }
            subType.prototype.getSuperValue = function () {
                return this.anotherName;
            }
    
            var instance  = new subType();
            subType.prototype =new SuperType();
            console.log(instance instanceof Object) //true
            console.log(instance instanceof subType) //false
            console.log(instance instanceof SuperType) //false

    在subType的原型指向superType之前实例化instance,那么 instance实例的原型只有Object,因为任何对象最终都是指向Object

    如果是之后呢

     function SuperType() {
                this.name ="viven";
            }
            SuperType.prototype.getSuperValue = function () {
                return this.name;
            }
    
    
            var b = new SuperType();
            function subType() {
                this.anotherName="kevin";
            }
            subType.prototype.getSuperValue = function () {
                return this.anotherName;
            }
    
            subType.prototype =new SuperType();
            var instance  = new subType();
            console.log(instance instanceof Object) //true
            console.log(instance instanceof subType) //true
            console.log(instance instanceof SuperType) //true
    function superType() {
                this.colors = ["red","green","blue"];
    
            }
            function SubType() {
    
            }
            SubType.prototype = new superType();
            var instance = new SubType();
            instance.colors.push("white");
            console.log(instance.colors); //["red", "green", "blue", "white"]
            var instance2 = new SubType();
            console.log(instance2.colors)//["red", "green", "blue", "white"]

    一般很少会单独使用原型链

    2.借用构造函数

    利用call 在新的SubType对象上执行superType()函数中的所有对象方法

    function superType() {
                this.colors = ["red","green","blue"];
    
            }
            function SubType() {
                superType.call(this);
            }
            var instance = new SubType();
            instance.colors.push("white");
            console.log(instance.colors); //["red", "green", "blue", "white"]
            var instance2 = new SubType();
            console.log(instance2.colors)//["red", "green", "blue"]

      1.传递参数

      可以在子类型构造函数中向超类型构造函数传递参数

      

    function SuperType(name) {
                this.name = name;
            }
            function SubType() {
                //继承SuperType,同时传递参数
                SuperType.call(this,"viven")
    
                //定义实例属性
                this.age = 19;
            }
            var instance = new SubType();
            console.log(instance.name); //viven
            console.log(instance.age); //19

    在调用超类型构造函数后,在添加子类型中的属性,是为了防止SuperType构造函数改写。

    function SuperType(name,age) {
                this.name = name;
                this.age = age;
            }
            function SubType() {
                //定义实例属性
                this.age = 19;
                //继承SuperType,同时传递参数
                SuperType.call(this,"viven",20)
    
            }
            var instance = new SubType();
            console.log(instance.name); //viven
            console.log(instance.age); //20

    3.组合继承

    function SuperType(name) {
                this.name = name;
                this.color  =["red","green","blue"];
            }
            SuperType.prototype.sayName = function () {
                console.log(this.name);
            }
            function SubType(name,age) {
                //继承SuperType属性,同时传递参数
                SuperType.call(this,name);
                //定义实例属性
                this.age = age;
    
            }
            //继承方法
            SubType.prototype = new SuperType();
            //定义实例方法
            SubType.prototype.sayAge = function () {
                console.log(this.age)
            }
            var instance = new SubType("viven",29);
            instance.color.push("white");
            instance.sayName(); //viven
            instance.sayAge(); //29
            console.log(instance.color);
    
            var instance2 = new SubType("Kevin",20);
            instance2.sayName(); //Kevin
            instance2.sayAge(); //20
            console.log(instance2.color);

    4.寄生组合式继承

     function inheritPrototype(subType,superType) {
            var prototype = Object(superType.prototype);
            prototype.constructor = subType;
            subType.prototype =prototype;
        }
            function SuperType(name) {
                this.name = name;
                this.color  =["red","green","blue"];
            }
            SuperType.prototype.sayName = function () {
                console.log(this.name);
            }
            function SubType(name,age) {
                //继承SuperType属性,同时传递参数
                SuperType.call(this,name);
                //定义实例属性
                this.age = age;
    
            }
            inheritPrototype(SubType,SuperType);
            //定义实例方法
            SubType.prototype.sayAge = function () {
                console.log(this.age)
            }
            var instance = new SubType("viven",29);
            instance.color.push("white");
            instance.sayName(); //viven
            instance.sayAge(); //29
            console.log(instance.color);
    
            var instance2 = new SubType("Kevin",20);
            instance2.sayName(); //Kevin
            instance2.sayAge(); //20
            console.log(instance2.color);

      

  • 相关阅读:
    Java用户自定义函数
    JavaScript常用函数
    Javascript 流程控制
    Javascript基础
    CSS的继承和使用方式
    Python列表
    Python变量和简单数据类型
    CSS选择符
    CSS的基本语法
    Java环境变量搭建
  • 原文地址:https://www.cnblogs.com/vivenZ/p/6435457.html
Copyright © 2020-2023  润新知