JavaScript类继承

迈不过友情╰ 2022-04-24 13:58 257阅读 0赞

1.  和其他功能一样，ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者，你有权决定最适用的继承方式。
2.  创建的子类将继承超类的所有属性和方法，包括构造函数及方法的实现。记住，所有属性和方法都是公用的，因此子类可直接访问这些方法。子类还可添加超类中没有的新属性和方法，也可以覆盖超类的属性和方法。
3.  继承的方式：

*  对象冒充方式方式一

--------------------

/*被继承类*/
        function Animal_1(name) {
            this.name = name;
            this.printName = function () {
                console.log(this.name);
            }
        }
        function Person_1(name,age) {
            this.method1 = Animal_1;
            this.method1(name);
            this.age = age;
            this.printAge = function () {
                console.log(this.age);
            }
        }
        var o1 = new Person_1("ysw",18);
        var o2 = new Animal_1("ysw");
        console.log(o1);
        console.log(o2);
        console.log(o1 instanceof Animal_1);
        console.log(o1 instanceof Person_1);
        console.log(o2 instanceof Animal_1);
        console.log(o2 instanceof Person_1);

*  对象冒充方式方式二：利用call方法和apply方法

--------------------

*  原型链方式

--------------------

/*被继承类*/
        function Animal_3() {
        }
        Animal_3.prototype.name = "ysw";
        Animal_3.prototype.printName = function () {
            console.log(this.name);
        };
        function Person_3() {
        }
        Person_3.prototype = new Animal_3();
        Person_3.prototype.age = 18;
        Person_3.prototype.printAge = function () {
            console.log(this.age);
        };
        o1 = new Person_3();
        o2 = new Animal_3();
        console.log(o1);
        console.log(o2);
        console.log(o1 instanceof Animal_3);
        console.log(o1 instanceof Person_3);
        console.log(o2 instanceof Animal_3);
        console.log(o2 instanceof Person_3);

*  混合方式：结合对象冒充方式和原型链方式的优点，是ES6之前最常用的继承方式

--------------------

/*被继承类*/
        function Animal_4(name) {
            this.name = name;
        }
        Animal_4.prototype.printName = function () {
            console.log(this.name);
        };
        function Person_4(name,age) {
            Animal_4.call(this,name);
            this.age = age;
        }
        Person_4.prototype = new Animal_4();
        Person_4.prototype.printAge = function () {
            console.log(this.age);
        };
        o1 = new Person_4("晏沈威",22);
        o2 = new Animal_4("晏沈威");
        console.log(o1);
        console.log(o2);
        console.log(o1 instanceof Animal_4);
        console.log(o1 instanceof Person_4);
        console.log(o2 instanceof Animal_4);
        console.log(o2 instanceof Person_4);

*  ES6语法 class extends继承

--------------------

/*被继承类*/
        class Animal_5 {
            constructor(name){
                this.name = name;
            }
            printName(){
                console.log(this.name);
            }
        }
        class Person_5 extends Animal_5{
            constructor(name,age){
                super(name);
                this.age = age;
            }
            printAge() {
                console.log(this.age);
            };
        }
        o1 = new Person_5("晏沈威",22);
        o2 = new Animal_5("晏沈威");
        console.log(o1);
        console.log(o2);
        console.log(o1 instanceof Animal_5);
        console.log(o1 instanceof Person_5);
        console.log(o2 instanceof Animal_5);
        console.log(o2 instanceof Person_5);