JavaScript 类继承

简介: 和其他功能一样,ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的,而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者,你有权决定最适用的继承方式。
  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_2(name) {
        this.name = name;
        this.printName = function () {
            console.log(this.name);
        }
    }
    function Person_2(name,age) {
        Animal_2.call(this,name);
        // Animal_2.apply(this,new Array(name));
        this.age = age;
        this.printAge = function () {
            console.log(this.age);
        }
    }
    o1 = new Person_2("ysw",18);
    o2 = new Animal_2("ysw");
    console.log(o1);
    console.log(o2);
    console.log(o1 instanceof Animal_2);
    console.log(o1 instanceof Person_2);
    console.log(o2 instanceof Animal_2);
    console.log(o2 instanceof Person_2);
  • 原型链方式

        /*被继承类*/
    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);
目录
相关文章
|
26天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
28天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
28天前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
31 1
|
3月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
3月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
23 2
JavaScript 类(class)
|
3月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
38 1
JavaScript基础知识-构造函数(也称为"类")定义
|
3月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
3月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26