【JavaScript由浅入深】实现继承的方法

【JavaScript由浅入深】实现继承的方法

一、ES5实现继承

1.1 原型链继承

// 定义父类构造函数
function Person(name, age) {
    this.name = name
    this.age = age
}

// 父类原型上添加内容
Person.prototype.running = function() {
    console.log(`${this.name} running`)
}


// 3.定义子类构造函数
function Student(name, age, sno) {
    this.name = name
    this.age = age
    //name,age删除,则只能继承person中的name,age
    this.sno = sno
}
// 方法一:直接将父类的prototype赋值给子类的prototype
// 缺点:子类与父类共享一个原型对象,修改了任意一个,另一个也被修改了
// Student.prototype = Person.prototype


// 创建一个父类的实例对象(new Person()),并且作为子类的原型对象
//缺点:1)子类的实例对象继承过来的属性是在原型上的,无法打印
//     2)没有完美的实现属性的继承(子类的实例对象可以从弗雷继承属性,也可以拥有自己的属性)
let p = new Person("zhang", 20)
Student.prototype = p

// 5.在子类原型添加内容
Student.prototype.studying = function() {
    console.log(`${this.name} studying`)
}

let stu1 = new Student("lisa", 18, 111)
let stu2 = new Student("bob", 25, 112)
stu1.studying()
stu2.running()
console.log(stu1.name, stu1.age)
console.log(stu2)

原型链继承的内存图:

在这里插入图片描述

原型链继承的弊端:

  • 目前有一个很大的弊端:某些属性其实是保存在p对象上的;

    • 第一,我们通过直接打印对象是看不到这个属性的;

    在这里插入图片描述

    • 第二,这个属性会被多个对象共享,如果这个对象是一个引用类型,那么就会造成问题;
    • 第三,不能给Person传递参数(让每个stu有自己的属性),因为这个对象是一次性创建的(没办法定制化)

1.2 借用构造函数

  • 借用继承的做法非常简单:在子类型构造函数的内部调用父类型构造函数.
    • 因为函数可以在任意的时刻被调用;
    • 因此通过apply()call()方法也可以在新创建的对象上执行构造函数;
// 定义person构造函数
function Person(name, age) {
    this.name = name
    this.age = age
}

Person.prototype.running = function() {
    console.log(`${this.name} running`)
}

// 定义student类
function Student(name, age, sno) {
    // 借用构造函数
    Person.call(this, name, age)
    this.sno = sno
}

Student.prototype.studying = function() {
    console.log(`${this.name} studying`)
}

let stu1 = new Student("lisa", 18, 111)
let stu2 = new Student("bob", 25, 112)

console.log(stu1.name, stu1.age)
console.log(stu2)
console.log(stu2.__proto__);

借用构造函数的弊端:

  • 不能继承父类的原型对象上的方法
    • 此时调用Person原型上的方法
stu2.running()

控制台会报错:Uncaught TypeError: stu2.running is not a function

在这里插入图片描述

1.3 组合式继承

  • 原型链继承和构造函数继承都存在各自的问题和优势,结合两种继承方式便生成了组合继承
// 定义person构造函数
function Person(name, age) {
    this.name = name
    this.age = age
}

Person.prototype.running = function() {
    console.log(`${this.name} running`)
}

// 定义student类
function Student(name, age, sno) {
    // 借用构造函数
    Person.call(this, name, age)
    this.sno = sno
}

// 原型链方法
var p = new Person("zhang", 18)
Student.prototype = p

Student.prototype.studying = function() {
    console.log(`${this.name} studying`)
}


let stu1 = new Student("lisa", 18, 111)
let stu2 = new Student("bob", 25, 112)

stu1.studying()
stu2.running()
console.log(stu1.name, stu1.age)
console.log(stu2)

组合式继承的弊端:

  • 调用两次父类构造函数
    • 一次在创建子类原型的时候;
    • 另一次在子类构造函数内部(也就是每次创建子类实例的时候);
  • 所有的子类实例事实上会拥有两份父类的属性
    • 一份在当前的实例自己里面
    • 另一份在子类对应的原型对象中

1.4 寄生组合式继承

组合寄生式继承可完美解决上述问题,这也是ES6之前所有继承方式中最优的继承方式

完整代码如下:

// 创建对象的过程
function createObject(o) {
    function F() { }
    F.prototype = o
    return new F()
}

// 将Subtype和Supertype联系在一起
// 寄生式函数
function inherit(Subtype, Supertype) {
    Subtype.prototype = createObject(Supertype.prototype)
    Object.defineProperty(Subtype.prototype, "constructor", {
        enumerable: false,
        configurable: true,
        writable: true,
        value: Subtype
    })
}

function Person(name, age) {
    this.name = name
    this.age = age
}

Person.prototype.running = function () {
    console.log(`${this.name} running`)
}

// 定义student类
function Student(name, age, sno) {
    // 借用构造函数
    Person.call(this, name, age)
    this.sno = sno
}

inherit(Student, Person)
Student.prototype.studying = function() {
    console.log(`${this.name} studying`)
}


// 创建实例对象
let stu1 = new Student("lisa", 18, 111)
let stu2 = new Student("bob", 25, 112)

stu1.studying()
stu2.running()
console.log(stu1.name, stu1.age)
console.log(stu2)

在这里插入图片描述

优化:利用Object.create()

// 寄生式函数
function inherit(Subtype, Supertype) {
    Subtype.prototype = Object.create(Supertype.prototype)
}

二、ES6实现继承

在ES6中新增了使用extends关键字,可以方便的帮助我们实现继承;

  • extends 关键字用于类声明或者类表达式中,以创建一个类,该类是另一个类的子类。
  • 语法:class ChildClass extends ParentClass { ... }
  • super 关键字用于访问对象字面量或类的原型([[Prototype]])上的属性,或调用父类的构造函数。
class Person {
    constructor (name, age) {
        this.name = name
        this.age = age
    }

    running() {
        console.log(this.name + "running")
    }
}

class Student extends Person{
    constructor(name, age, sno) {
        super(name, age)
        this.sno = sno
    }

    studying() {
        console.log(this.name + "studying");
    }
}

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
JavaScript 中,实现继承方法有以下几种方式: 1. 原型继承:利用原型链实现继承。通过将父类的实例作为子类的原型,子类就可以访问到父类的属性和方法。例如: ```javascript function Parent() { this.name = 'parent'; } Parent.prototype.sayName = function() { console.log(this.name); } function Child() {} Child.prototype = new Parent(); var child = new Child(); child.sayName(); // 输出:parent ``` 2. 构造函数继承:利用 call 或 apply 方法将父类构造函数的作用域赋给子类。这种方式可以实现继承。例如: ```javascript function Parent(name) { this.name = name; } function Child(name) { Parent.call(this, name); } var child = new Child('child'); console.log(child.name); // 输出:child ``` 3. 组合继承:结合原型继承和构造函数继承,既可以继承父类的属性和方法,又可以实现子类实例的独立。例如: ```javascript function Parent(name) { this.name = name; } Parent.prototype.sayName = function() { console.log(this.name); } function Child(name, age) { Parent.call(this, name); this.age = age; } Child.prototype = new Parent(); Child.prototype.constructor = Child; var child = new Child('child', 18); console.log(child.name); // 输出:child console.log(child.age); // 输出:18 child.sayName(); // 输出:child ``` 4. 原型式继承:利用 Object.create() 方法创建一个新对象,以某个对象为原型,然后再对新对象进行修改。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; var child = Object.create(parent, { name: { value: 'child' } }); child.sayName(); // 输出:child ``` 5. 寄生式继承:与原型式继承类似,但是在增强对象的方法时使用了一个函数封装。例如: ```javascript var parent = { name: 'parent', sayName: function() { console.log(this.name); } }; function createChild(original) { var child = Object.create(original); child.sayName = function() { console.log('hello, ' + this.name); } return child; } var child = createChild(parent); child.sayName(); // 输出:hello, parent ``` 需要注意的是,在实现继承时应该注意避免出现属性和方法的重复定义,以及避免在父类的原型上修改引用类型的属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端程序员小张

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值