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>
目录
相关文章
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
3月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
8月前
|
JavaScript C#
js 面向对象封装与继承 COPY
js 面向对象封装与继承
99 0
|
8月前
|
JavaScript C#
js 面向对象封装与继承
js 面向对象封装与继承
384 0
|
12月前
|
JavaScript 前端开发 Java
都2022年了你不会还没搞懂JS原型和继承吧
最近笔者再面试过程中发现能把JS原型、原型链、JS继承问题说明白的寥寥无几。因此,今天笔者再带大家来复习一遍,希望小伙伴们能有意外收获。
98 0
|
JavaScript
js基于原型和class的面向对象-继承
js基于原型和class的面向对象-继承
59 0
|
JavaScript
JS案例:继承和深复制
JS案例:继承和深复制
88 0
JS案例:继承和深复制
|
JavaScript 前端开发 开发者
《JS原理学习 (2) 》深入理解原型链与继承(上)
《JS原理学习 (2) 》深入理解原型链与继承(上)
《JS原理学习 (2) 》深入理解原型链与继承(上)
|
JavaScript 前端开发
《JS原理学习 (2) 》深入理解原型链与继承(下)
《JS原理学习 (2) 》深入理解原型链与继承(下)
《JS原理学习 (2) 》深入理解原型链与继承(下)