当前位置:网站首页>js的继承方式
js的继承方式
2022-07-23 05:39:00 【Vivqst】
1.原型链继承
特点:
1.子类型的原型是父类型的实例
2.可以继承构造函数和原型链上的属性和方法
缺点:
1.引用类型的属性会被所有实例共享;
2.在创建Child 的实例时, 不能向Parent传参
function Parent() {
this.name = "张三"
this.subject = {
sex: "男", age: 40}
}
Parent.prototype.getName = function() {
console.log(this.name)
}
function Child() {
}
Child.prototype = new Parent()
var child = new Child()
var child2 = new Child()
var person = new Parent()
child.subject.sex = '女'
console.log(child.subject) // {sex: '女', age: 40}
console.log(child2.subject) // {sex: '女', age: 40}
child.name = 'wang'
console.log(child.name) // wang
console.log(child2.name) // 张三
child2.getName() // 张三
console.log(child instanceof Parent) // true
2.构造函数继承
缺点:
1.继承构造函数内部的属性和方法,不能继承原型链上的方法和属性;
2.属性和方法都在构造函数中定义,每次创建实例都会创建一遍属性和方法
3.只是子类的实例,不是父类的实例
优点:
1.child可以向parent传参;
2.引用类型的属性不会被所有实例共享
function Parent() {
this.firstName = "张"
this.lastName = "三"
this.getFirstName = function() {
console.log(this.firstName)
}
this.subject = {
sex: '男', age: 10}
}
Parent.prototype.getName = function() {
console.log(this.firstName + this.lastName)
}
function Child() {
Parent.call(this)
this.lastName = "四"
this.id = "student"
}
var child1 = new Child()
var child2 = new Child()
child1.subject.sex = '女'
console.log(child1.firstName) // 张
console.log(child1.subject) // {sex: '女', age: 10}
console.log(child2.subject) // {sex: '男', age: 10}
child2.getFirstName() // 张
console.log(child instanceof Parent) // false
child1.getName() // Uncaught TypeError: child1.getName is not a function
3.组合继承
组合 原型链继承 和 借用构造函数继承
function Parent(name) {
this.name = name
this.subject = {
sex: '男', age: 15}
}
Parent.prototype.getName = function() {
console.log(this.name)
}
function Child(name) {
Parent.call(this, name)
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
var child = new Child('xiaoxiao')
var child2 = new Child('linlin')
console.log(child.name)
child.subject.age = 18
console.log(child2.subject)
child.getName()
4.原型式继承
特点:以一个对象为原型创建新的对象
缺点:
1.引用类型的属性会被所有实例共享;同原型链继承
function createObject(o) {
function F() {
}
F.prototype = o
return new F()
}
var person = {
name: '王琳',
subject: {
sex: '女',
age: 18
}
}
var child = createObject(person)
var child2 = createObject(person)
console.log(child.name) // 王琳
console.log(child.subject) // {sex: '女', age: 18}
child.name = '张小花'
child.subject.age = 20
console.log(child.name) // 张小花
console.log(child2.name) // 王琳
console.log(child.subject) // {sex: '女', age: 20}
console.log(child2.subject) // {sex: '女', age: 20}
ES5通过Object.create()方法规范了原型式继承,可以接受两个参数,一个是用作新对象原型的对象和一个可选的为新对象定义额外属性的对像
var person = {
name: '王琳'
}
var child = Object.create(person, {
sex: {
value: 16}})
console.log(child)
5.寄生式继承
在原型式继承的基础上添加新的属性和方法来增强对象
function CreateObj(o){
var newob = Object.create(o)
newob.getName = function(){
// 增强对象
console.log(this.name);
}
return newob; // 指定对象
}
var ob = {
name: 'xiaoxiao'}
var p1 = CreateObj(ob);
p1.getName(); // xiaoxiao
6.寄生式组合继承
使用寄生式继承来复制原型对象,使用组合继承来继承增强过的原型对象和实例属性
基本思路:不必为了指定子类型的原型而调用父类的构造函数,创建一个父类原型的副本
function Parent(name) {
this.name = name
}
Parent.prototype.getName = function () {
console.log(this.name)
}
function Child(name, job) {
Parent.call(this, name)
this.job = job
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
var sub = new Child('张三', 'student')
sub.getName()
ES6新增了一个方法,Object.setPrototypeOf,可以直接创建关联,而且不用手动添加constructor属性
Object.setPrototypeOf(SubType.prototype, SuperType.prototype)
console.log(SubType.prototype.constructor === SubType) // true
边栏推荐
- 混入视图基类
- Markdown常用语法记录
- Project deployment (simplified version)
- Large factory interview machine learning algorithm (0): Feature Engineering | data preprocessing
- Keras saves the best model in the training process
- Keras保存训练过程中的最好模型
- After the formula in word in WPS is copied, there is a picture
- The super simple face recognition API can realize face recognition in just a few lines of code
- [Doris]配置和基本使用contens系统(有时间继续补充内容)
- JDBC数据库连接池
猜你喜欢

【文献调研】在Pubmed上搜索特定影响因子期刊上的论文
![[python flask notes 5] blueprint is easy to use](/img/0a/00b259f42e2fa83d4871263cc5f184.png)
[python flask notes 5] blueprint is easy to use

JDBC的学习以及简单封装

使用cmd安装pygame

Pytorch white from zero uses North pointing

Data Lake: introduction to Apache iceberg

Flask蓝图

systemctl-service服务添加环境变量及模板

初识Flask

How to merge the website content with video and audio separated? How to write batch download code?
随机推荐
使用cmd安装pygame
PyGame realizes the airplane war game
大规模后台导出Excel无法并发
Flask源码剖析(一)请求入口
Copy a project /project in idea
Using pytorch to realize the flower recognition classifier based on VGg 19 pre training model, the accuracy reaches 97%
项目部署(简版)
主从同步步骤读写分离+自遇错误分享
【Pyradiomics】提取的影像组学特征值不正常(很多0和1)
视图集及路由
Partial usage of C #
排序、限流
Summary of common commands of vim
Sorting out common SQL interview questions and answers
Data Lake: introduction to Apache iceberg
Cell sends SMS asynchronously
Rice mall registration
3. Threads in flask
After the formula in word in WPS is copied, there is a picture
大厂面试机器学习算法(6)时间序列分析