js基于原型和class的面向对象-继承

简介: js基于原型和class的面向对象-继承

本文不讲原理,直接上实例代码

一、基于原型的类继承

1、父类

// 父类构造方法
function Animal(name) {
    // 属性
    this.name = name
}

// 父类方法
Animal.prototype.echoName = function () {
    console.log(this.name);
}

2、子类

// 子类构造方法

function Dog(name, age) {
// 调用父类构造函数
Animal.call(this, name)
this.age = age
}

// 子类继承父类的原型
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 子类方法
Dog.prototype.sayHello = function () {
console.log(this.name, this.age);
}

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()

二、基于class的类继承

JavaScrip从ES6开始正式引入关键字class

1、父类

class Animal {
// 构造方法
constructor(name) {
// 属性
this.name = name
}

// 父类方法
echoName() {
console.log(this.name);
}
}

2、子类

class Dog extends Animal {
// 构造方法
constructor(name, age) {
// 调用父类构造函数
super(name)
this.age = age
}

sayHello() {
console.log(this.name, this.age);
}

}

3、实例化

// 实例化父类
var animal = new Animal('Tom')
animal.echoName()

// 实例化子类
var dog = new Dog('Tom', 23)
dog.echoName()
dog.sayHello()

参考

  1. 对象的继承
  2. 面向对象编程
            </div>
目录
相关文章
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
31 0
|
1月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
22 2
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
19 0
|
1月前
|
JavaScript
JS数组增删方法的原理,使用原型定义
JS数组增删方法的原理,使用原型定义
|
1月前
|
JavaScript
JS原型对象prototype
JS原型对象prototype
|
1月前
|
设计模式 JavaScript 前端开发
JavaScript中继承的优缺点
JavaScript中继承的优缺点
13 3
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中实现继承?
如何在 JavaScript 中实现继承?
11 2
|
1月前
|
JavaScript 前端开发
js继承的超详细讲解:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
js继承的超详细讲解:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、class继承
55 0
|
1月前
|
JavaScript 前端开发
深入理解 JavaScript 对象原型,解密原型链之谜(下)
深入理解 JavaScript 对象原型,解密原型链之谜(下)
|
1月前
|
JavaScript 前端开发
深入理解 JavaScript 对象原型,解密原型链之谜(上)
深入理解 JavaScript 对象原型,解密原型链之谜(上)