浅谈JavaScript中的继承

最新推荐文章于 2025-08-23 11:44:58 发布

原创最新推荐文章于 2025-08-23 11:44:58 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文详细讲解了原型继承原理，组合继承的运用（包括call和apply方法），以及寄生组合继承的优化。重点介绍了ES6中class的继承机制，通过实例演示了`Person`和`Student`类的继承过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原型继承：

通过改造原型链，利用原型链的特性，实现继承方法
（需要掌握原型、原型链）

在这里插入图片描述

组合继承：

将原型链和借用构造函数技术组合到一起，通过原型链实现对原型属性和方法的继承（主要是方法），而通过借用构造函数来实现对实例属性的继承
(需要掌握call、apply方法的用法和区别)

  function Person(name,age){
        this.name = name 
        this.age = age
    }
    Person.prototype.say = function(){
        console.log('会说话');
    }

    function Student(name,age,className){
        // this.name = name
        // this.age = age

// 借用构造函数Person,通过call方法
// 1. 调用构造函数
// 2. 让执行构造函数时的this指向Student的实例stu
        Person.call(this,name,age)

        // 如果构造函数中的实例属性很多，也可以用apply方法，里面的第二个参数用arguments表示所有的属性
        // Person.apply(this,arguments)
        this.className = className
    }

// 改造原型链   
    Student.prototype = new Person()


    Student.prototype.study = function(){
        console.log('学生在学习');
    }

    let stu = new Student('zs',18,'大一')
    stu.say()
    stu.study()
    console.log(stu);

寄生组合继承：

Student实例上有name，age属性，而__proto__上不需要再有这些属性，所以利用 Object.create 优化下
Object.create(参数对象) :

Object.create 会创建一个新对象
并且这个新对象的__proto__会指向传入的新对象

在这里插入图片描述
寄生组合继承，其实是在组合继承的基础上，优化一下代码逻辑。

ES6—class实现继承

着重记住三个关键点：class、extends、super

// 人类
    class Person {  // class其实是一个语法糖  类似于之前的构造函数，不过把实例属性和方法都
    				//集中到了一起管理维护，注意Person后面是没有括号的，固定格式

        // 构造器 里面存放实例属性
        constructor(name,age){
            this.name = name
            this.age = age
        }
        // 底层=> 这两个方法，添加到Person.prototype
        say(){
            console.log('会说话');
        }
        //注意方法之间是没有逗号的
        jump(){
            console.log('会跳');
        }
    }
    const p = new Person('zs',18)
    p.say()

// 学生类
    class Student extends Person{   
        //如果没有提供构造器，在继承时，会默认借调父构造函数
       constructor(name,age,className){
        //super()触发调用父构造函数，进行实例的属性初始化，
        //注意要先继承再添加自己的属性，也就是super要写在className的声明前面
        super(name,age) 
        this.className = className
       }
    }
    const stu = new Student('ls',22,'大四')
    stu.jump()
    console.log(stu);