7种继承方式的比较（js）

前言

对于js这种面向过程的编程语言而言，oo不是它的强项，但有时也会在代码中OOP。
这里收集了七种继承方式，并测试做了比较。还有一些其他的实现形式暂未考虑，比如通过拷贝的形式实现继承；
由于技术原因，具体用到哪些场景不是很在行，所以这里就做一些简单的示范和介绍。

代码

		/**
         * https://www.cnblogs.com/qing-5/p/11365614.html
         * 父级构造函数中的属性在子级实例上有一份在原型上有一份(多余),浪费内存
         */
        /*
        function A(name) {
            this.name = name;
            this.propertys = {
                sex: "F"
            };
        }
        A.prototype.sayName = function() {
            console.log("A.prototype.sayName===", this.name);
        };
        A.prototype.sayName2 = function() {
            console.log("A.prototype.sayName===", this.name);
        };

        function B(age, name) {
            A.call(this, name); //
            this.age = age;
            this.propertys = {
                sex: "M"
            };
        }

        B.prototype = new A(); //
        B.prototype.constructor = B; //
        B.prototype.sayName = function() {
            console.log("B.prototype.sayName===", this.name);
        };
        B.prototype.sayAge = function() {
            console.log("B.prototype.sayAge===", this.age);
        };

        var a = new A("aaa");
        var b = new B(22, "bbb");
        a.sayName();
        b.sayName();
        b.sayAge();

        console.log("a===", a);
        console.log("b===", b);

        console.log("a.__proto__", a.__proto__);
        console.log("b.__proto__", b.__proto__);
        */

        


        /**
         * es6 class语法糖
         * 不继承构造器里面的属性
         * 代码易维护
         */
        /*
        class A {
            constructor(name) {
                this.name = name;
            }
            sayName() {
                console.log("A.prototype.sayName===", this.name);
            }
        }

        class B extends A {
            constructor(age, name) {
                super(name);
                this.name = name;
                this.age = age;
            }
            sayName(name) {
                console.log("B.prototype.sayName===", this.name);
            }
            sayAge() {
                console.log("B.prototype.sayAge===", this.age);
            }
        }

        var a = new A("aaa");
        var b = new B(22, "bbb");
        a.sayName();
        b.sayName();
        b.sayAge();

        console.log("a===", a);
        console.log("b===", b);

        console.log("a.__proto__", a.__proto__);
        console.log("b.__proto__", b.__proto__);

        */

        //

        /**
         * <<ES6标准入门 9.11>>
         * 实例之间的无构造函数的继承
         * 要产生多个对象需要克隆并一一改变它们的属性
         */

        /*
        var a = {
            name: "aaa",
            superName: "aaa_super",
            propertys: [{
                _a: "_a"
            }],
            sayName() {
                console.log("a.sayName:", this.name);
            }
        };
        var b = Object.create(a);
        // var b = Object.assign(
        //     Object.create(a), {
        //         name: 'bbb'
        //     }
        // );
        b.name = "bbb";
        b.age = 22;
        b.sayAge = function() {
            console.log("b.sayAge:", this.age);
        }


        a.sayName();
        b.sayName(); //能调用原型上的方法
        b.sayAge();

        b.propertys[0]._b = "_b"; //能改原型上的对象

        console.log("a===", a);
        console.log("b===", b);

        console.log("a.__proto__", a.__proto__); //Object.prototype
        console.log("b.__proto__", b.__proto__);
        */

        

        /** 
         * http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
         * 构造函数绑定
         * 通过子类构造函数中，绑定父类this上的方法：A.call(this, name);
         * 只能访问父类构造函数内定义的属性和方法，不能访问父类原型上的
         * 子级实例上的属性拥有父级实例一样的属性,实际上消耗了内存换取了速度,因为在原型上查询是耗时的
         */
        /*
        function A(name) {
            this.name = name;
            this.propertys = {
                sex: "F"
            };
            this._a = "_a";
        }
        A.prototype.sayName = function() {
            console.log("A.prototype.sayName===", this.name);
        };
        A.prototype.say = function() {
            console.log("A.prototype.say===", this._a);
        };

        function B(age, name) {
            //继承属性    使用借用构造函数实现对实例属性的继承
            A.call(this, name);
            this.name = name; //覆盖属性
            this.age = age; //父级构造函数中的this上不会有age属性
            this.propertys = {
                sex: "M"
            };
        }
        B.prototype.sayName = function() { //覆盖方法
            console.log("B.prototype.sayName===", this.name);
        };
        B.prototype.sayAge = function() { //自定义方法
            console.log("B.prototype.sayAge===", this.age);
        };
        */

        /**
         * http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
         * prototype模式
         * 通过子级构造函数的prototype设置为父级实例，并改变constructor指向
         * B.prototype = new A();　　
         * B.prototype.constructor = B;
         * 子集对象的原型上有父级对象上的构造函数中的方法和属性,子级对象可以使用父级对象构造函数和原型上的方法属性
         * 子级原型上有一个父级构造函数中相同的副本,额外增加了内存消耗,也容易发生命名冲突
         */

        /*
        function A(name) {
            this.name = name;
            this.propertys = {
                sex: "F"
            };
            this._a = "_a";
        }
        A.prototype.sayName = function() {
            console.log("A.prototype.sayName===", this.name);
        };
        A.prototype.say = function() {
            console.log("A.prototype.say===", this._a);
        };

        function B(age, name) {
            this.name = name;
            this.age = age;
            this.propertys = {
                sex: "M"
            };
        }

        B.prototype = new A("aa");　　
        B.prototype.constructor = B;

        B.prototype.sayName = function() { //覆盖方法
            console.log("B.prototype.sayName===", this.name);
        };
        B.prototype.sayAge = function() { //自定义方法
            console.log("B.prototype.sayAge===", this.age);
        };
        B.prototype.name = "B.prototype.name";
        */

        /**
         * http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
         * 直接继承prototype(共享prototype)
         * 子级的构造函数的prototype上定义的东西会覆盖父级的,他们相互影响
         * 省内存
         */

        /*
        function A(name) {
            this.name = name;
            this.propertys = {
                sex: "F"
            };
            this._a = "_a";
        }
        A.prototype.sayName = function() {
            console.log("A.prototype.sayName===", this.name);
        };
        A.prototype.say = function() {
            console.log("A.prototype.say===", this._a);
        };

        function B(age, name) {
            this.name = name;
            this.age = age;
            this.propertys = {
                sex: "M"
            };
        }

        B.prototype = A.prototype;　　
        B.prototype.constructor = B;

        B.prototype.sayName = function() { //覆盖方法
            console.log("B.prototype.sayName===", this.name);
        };
        B.prototype.sayAge = function() { //自定义方法
            console.log("B.prototype.sayAge===", this.age);
        };
        B.prototype.name = "B.prototype.name";
        */

        /**
         * http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html
         * 直接继承prototype(空函数中介)
         * 父子(实例/原型)上的属性和方法都泾渭分明
         * 调用父级原型上的方法this会错误,需显式改变this指向
         */


        /*
        function A(name) {
            this.name = name;
            this.propertys = {
                sex: "F"
            };
            this._a = "_a";
        }
        A.prototype.sayName = function() {
            console.log("A.prototype.sayName===", this.name);
        };
        A.prototype.say = function() {
            console.log("A.prototype.say===", this._a);
            console.log("A.prototype.say | this===", this);
        };

        function B(age, name) {
            this.name = name;
            this.age = age;
            this.propertys = {
                sex: "M"
            };
        }

        var F = function() {};
        F.prototype = A.prototype
        B.prototype = new F();　　
        B.prototype.constructor = B;

        B.prototype.sayName = function(a) {
            console.log("B.prototype.sayName===", this.name);
        };
        B.prototype.sayAge = function() {
            console.log("B.prototype.sayAge===", this.age);
        };
        B.prototype.name = "B.prototype.name";
        */




        
        // var a = new A("aaa");
        // var b = new B(22, "bbb");
        // a.sayName();
        // b.sayName();
        // b.sayAge();


        // console.log("a===", a);
        // console.log("b===", b);

        // // console.log("A.name===", A.name);
        // // console.log("B.name===", B.name);

        // console.log("a.__proto__", a.__proto__);
        // console.log("b.__proto__", b.__proto__);

不足

1、没考虑混入（多继承）。
2、具体应用场景。
3、更多的继承方式。