构造函数实现继承的几种方案（深入）

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量4.7k 收藏 8
点赞数 1
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liushiliu104/article/details/124357586
版权
  • 什么是继承及继承的好处
  • 实现继承的几种方式
    • 原型链继承
    • 接用构造函数实现继承
    • 寄生式继承
    • 寄生组合式继承(最终的继承方案)

什么是继承及继承的好处：

​ 面向对象中的三大特性：封装，继承，多态，继承就是继承父构造函数的属性和方法。这样的话就可以实现代码的复用，且继承是多态的前提。
开篇说重点：

  1. 文中Person为父构造函数，Stundet为子构造函数，我们现在要做的事情就是让Stundet的实例对象继承父构造函数定义的属性和方法。
  2. 每个函数都有一个显示原型prototype属性，每个对象都有一个隐式原型__proto__属性,且函数也是一个对象所以它也会有__proto__属性。
  3. 查看文本首先需要你具体原型链的知识，new创建实例对象的过程，call（）的作用。
  4. 文本介绍实现继承的几种方式，各种的优劣，最终会有完美实现继承的方案。
  5. 本人是菜鸡一枚，欢迎大家指正，共同进步，谢谢~
// 父类：公共的属性和方法
function Person() {
  this.name = 'lhq'
}

Person.prototype.eating = function() {
  console.log(this.name + 'eating')
}

// 子类: 特有的属性和方法
function Student() {
  this.sno = '111'
}

Student.prototype.studying = function() {
  console.log(this.name + ' studying')
}

const stu = new Student()
 // 这个显然是取不到值的，因为Student构造函数中并没有定义name属性，那他的实例对象中必然是没有该属性的
 // 那我们如果想要继承Person构造函数中的name属性该如何做呢？
console.log(stu.name)
stu.studying()

​ 下图是上面这边代码在内存中的引用关系：在这里插入图片描述

​ stu对象查找name属性，现在自己对象上找，找不到的话会去Student的原型对象上找，再找不到会向Obejct的原型对象中找，因为Obejct原型对象是最顶层的对象，若再找不到则会返回最终的结果。

原型链的继承方案

​ 下面这边代码还是使用上面的那段代码，只是做了一个微小的调整。

​ 1.在我们定义Student这个构造函数后，实例化Person构造函数，实例化构造函数会返回一个实例对象，将这个实例对象赋值给Student的prototype属性，让这个属性的引用指向这个对象。

​ 2.当我们通过new关键字实例化Student构造函数的时候，会返回一个实例对象stu，因为stu是一个对象，它会有一个隐式的原型对象，而这个隐式的原型对象的指向是有Student.prototype决定的。

​ 3.因为我们在实例化创建stu之前，已经将Student.prototype指向了Person的实例对象p，所以stu的隐式原型对象会指向p这个对象。

// 父类：公共的属性和方法
function Person() {
  this.name = 'lhq'
}

Person.prototype.eating = function() {
  console.log(this.name + 'eating')
}

// 子类: 特有的属性和方法
function Student() {
  this.sno = '111'
}

// 创建出Student类后做这个赋值操作
const p = new Person()
Student.prototype = p

Student.prototype.studying = function() {
  console.log(this.name + ' studying')
}

const stu = new Student()
console.log(stu.name)
stu.studying()

// 第一个弊端： 只打印本对象上的属性，继承的属性看不到
console.log(stu)

// 第二个弊端：创建出来两个实例对象

const stu1 = new Student()
const stu2 = new Student()

// 直接修改对象上的属性，是给本对象上添加一个新属性，不会修改原型引用上的name
stu1.name = 'zhangsan'

console.log(stu2.name)

// 获取引用，修改应用中的值，会互相影响

stu1.friends.push('lisi')
console.log(stu2.friends)

// 第三个弊端：无法传递参数

​ 注意：Student的实例对象并不是一定要指向Student默认的原型对象的，这个要看构造函数中的prototype指向谁，在创建实例对象的过程中，prototype的引用会赋值给实例对象的隐式原型对象

当Student的默认原型对象没人引用它的时候，gc会将其删除

将Perosn的实例对象赋值给Stundent.prototype后的内存引用关系图：
在这里插入图片描述

借用构造函数实现继承的方案

这个方案决解了，原型链继承存在的弊端，但是该方案也产生了一些弊端。

// 父类：公共的属性和方法
function Person(name, age, friends) {
  this.name = name
  this.age = age
  this.friends = friends
}

Person.prototype.eating = function() {
  console.log(this.name + 'eating')
}

function Student(name, age, friends, sno) {

	// 通过call方法调用Person对象，并传递参数，call方法的作用就是改变函数内部的this指向
	// 当我们通过new Student的时候会执行这个函数的调用
  Person.call(this, name, age, friends)
  this.sno = sno
}

const p = new Person()
Student.prototype = p

Student.prototype.studying = function() {
  console.log(this.name + ' studying')
}

const stu = new Student('lhq', 18, 'zhangsan', 1110)
console.log(stu)

const stu1 = new Student('lhq', 18, 'zhangsan', 1110)
console.log(stu1)

/**
 * 借用构造函数存在的弊端
 * 
 * 1.第一个弊端：Person函数至少会被调用两次 person.call（）   new Person()
 * 2.第二个弊端：p的原型对象上会多出一些属性，但是这些属性是没有存在的必要的在我们new Person创建实例对象的时候添加
 */

上述代码在内存中的引用关系图：
在这里插入图片描述

寄生式继承

​ 实现对象和对象之间的继承。

// 原型式
const personObj = {
  running() {
    console.log('running')
  }
}

// 工厂函数
function createStudent(name) {
  const stu = Object.create(personObj)
  stu.name = name
  stu.studying = function() {
    console.log('studying')
  }
}

const stuObj = createStudent('lhq')
const stuObj1 = createStudent('zhangsan')

弊端：创建出来的对象都有一个重复的方法
寄生组合式继承：（继承的最终方案）
function Person(name, age, height) {
  this.name = name
  this.age = age
  this.height = height
}

Person.prototype.running = function() {
  console.log('running')
}

Person.prototype.eating = function() {
  console.log('eating')
}

function Student(name, age, height, sno, score) {
  Person.call(this, name, age, height)
  this.sno = sno
  this.score = score
}

// 创建一个对象，这个对象的隐式原型指向Person的原型对象，将创建出来的对象赋值给Student的原型对象
Student.prototype = Object.create(Person.prototype)

// 将constructor的指向该回Student
// Student.prototype.constructor = Student
Object.defineProperty(Student.prototype, 'constructor', {
  enumerable: false,
  configurable: true,
  writable: true,
  value: Student
})

Student.prototype.studying = function() {
  console.log('studying')
}


const stu = new Student('lhq', 18, 1.88, 1101, 100)
console.log(stu)

​ 将创建对象的函数封装：

// 工具函数
function inheritPrototype(SubType, SuperType) {
  SubType.prototype = Object.create(SuperType.prototype)
  // 将Student.prototype.constructor指会Student
  Object.defineProperty(SubType.prototype, 'constructor', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType
  })
}

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

Person.prototype.running = function() {
  console.log('running')
}

Person.prototype.eating = function() {
  console.log('eating')
}

function Student(name, age, height, sno, score) {
  Person.call(this, name, age, height)
  this.sno = sno
  this.score = score
}

// 调用工具函数
inheritPrototype(Student, Person)

Student.prototype.studying = function() {
  console.log('studying')
}


const stu = new Student('lhq', 18, 1.88, 1101, 100)
console.log(stu)

低版本使用：

​ 上面创建对象使用了Obejct.create(),低版本可能会出现问题，可以采用下面这种方案，功能是一致的。

function createObejct(O) {
  function Fn() {}
  Fn.prototype = O
  return new Fn()
}

// 工具函数
function inheritPrototype(SubType, SuperType) {
  SubType.prototype = createObejct(SuperType.prototype)
  Object.defineProperty(SubType.prototype, 'constructor', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: SubType
  })
}

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

Person.prototype.running = function() {
  console.log('running')
}

Person.prototype.eating = function() {
  console.log('eating')
}

function Student(name, age, height, sno, score) {
  Person.call(this, name, age, height)
  this.sno = sno
  this.score = score
}

// 调用工具函数，改变内存中的引用关系
inheritPrototype(Student, Person)

Student.prototype.studying = function() {
  console.log('studying')
}


const stu = new Student('lhq', 18, 1.88, 1101, 100)
console.log(stu)
stu.running()
stu.eating()
stu.studying()

上述代码在内存中的引用关系图：
在这里插入图片描述

欢迎大家评论指正，共同进步~

狮子歌歌_丶
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
继承类的构造函数
10-24
详细介绍了继承类的构造函数，基类的构造函数是不能继承的，在声明派生类时，派生类并没有把基类的构造函数继承过来，因此，对继承过来的基类成员初始化的工作也要由派生类的构造函数承担。
继承构造函数
yaoyaohyl的博客
11-05 1440
另外我们还需要了解的一些规则是，如果基类的构造函数被声明为私有成员函数，或者派生类是从基类中虚继承的，那么就不能够在派生类中声明继承构造函数。多个基类中的部分构造函数可能导致派生类中的继承构造函数的函数名、参数（有的时候，我们也称其为函数签名）都相同，那么继承类中的冲突的继承构造函数将导致不合法的派生类代码，如代码清单3-7所示。可以看到，在代码清单3-6中，我们的基类的构造函数A（inta=3，double=2.4)有一个接受两个参数的构造函数，且两个参数均有默认值。变量b的定义应该是不能够通过编译的，
构造函数继承
weixin_55711841的博客
08-05 908
构造函数继承
c++继承构造函数
热门推荐
digitalkee的博客
12-18 1万+
【1】为什么需要继承构造函数？ 首先，看看如下代码片段： 1 struct A 2 { 3 A(int i) 4 {} 5 }; 6 7 struct B : A 8 { 9 B(int i) : A(i) 10 {} 11 }; 在C++中非常常见：B派生于A，B在构造函数中调用A的构造函数，从而完成构造函数的“传递”。 有时候，基类可能拥有数量众多的不同版本的构造函数（这样的情况并不少见）。 那么，倘若基类中有大量的构造函数
构造函数--继承
qq_41831345的博客
09-17 1406
构造函数的理解 构造函数在通过new关键字调用的过程中会创建一个对象，并作为参数传递给构造函数。 如果构造函数返回值是 一般的数据类型， 构造函数就会忽略这个值，实例不会改变 如果构造函数的返回值是引用数据类型，构造函数就会忽略this，实例就会变成构造函数返回的对象 var button = { clicked: false, click: () => { co...
构造函数的继承
FavoriteStudent的博客
05-10 231
instancof运算符 instanceof运算符返回一个布尔值，表示对象是否为某个构造函数的实例。 function Vehicle() { } var v = new Vehicle() console.log(v instanceof Vehicle) // true 上面代码中，对象v是构造函数Vehicle的实例，所以返回true。 instancof...
继承的构造函数
weixin_43471255的博客
07-04 1011
继承的构造函数不能初始化派生类的成员,可以使用类内初始化，或则追加构造函数C++11 标准规定，继承构造函数与类的一些默认函数（默认构造、析构、拷贝构造函数等）一样，是隐式声明，如果一个继承构造函数不被相关代码使用，编译器不会为其产生真正的函数代码。这样比通过派生类构造函数“透传构造函数参数”来完成基类初始化的方式，总是需要定义派生类的各种构造函数更加节省目标代码空间。......
亮剑.NET深入体验与实战精要3
04-02
1.3.10 几个常用的数学函数 27 1.4 .NET的面向对象之门 27 1.4.1 继承——“子承父业” 28 1.4.2 委托——“任务书” 35 1.4.3 事件——“年终分红” 42 1.4.4 反射——“解剖” 49 1.5 .NET开发几把小刀 52 1.5.1 ...
亮剑.NET深入体验与实战精要2
04-02
1.3.10 几个常用的数学函数 27 1.4 .NET的面向对象之门 27 1.4.1 继承——“子承父业” 28 1.4.2 委托——“任务书” 35 1.4.3 事件——“年终分红” 42 1.4.4 反射——“解剖” 49 1.5 .NET开发几把小刀 52 1.5.1 ...
二十三种设计模式【PDF版】
05-30
有几种画法?艺术大家通常是创造出自己的套路,比如明末清初,水墨画法开始成熟,这时画树就不用勾勒这个模式了,而是一笔 下去,浓淡几个叶子,待毛笔的水墨要干枯时,画一下树干,这样,一个活生写意的树就画出来. 我上面...
传智播客扫地僧视频讲义源码
04-03
11_copy构造函数调用时机4_函数返回值是匿名对象的去和留的剖析_传智扫地僧 12_构造和析构的重点整理 13_构造和析构总结 14_中午课程复习 15_构造函数的调用规则研究 16_浅拷贝问题抛出 17_浅拷贝问题分析_传智扫地...
asp.net知识库
06-18
静态构造函数 忽略大小写Replace效率瓶颈IndexOf 随机排列算法 理解C#中的委托[翻译] 利用委托机制处理.NET中的异常 与正则表达式相关的几个小工具 你真的了解.NET中的String吗？ .NET中的方法及其调用（一） 如何...
element-ui的bug记录
nick_zhang的博客
04-29 459
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 757
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 828
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 92
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 791
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
用js es5的语法实现构造函数的继承
06-02
好的，以下是用 ES5 的语法实现构造函数的继承的例子： ```javascript function Animal(name) { this.name = name; } Animal.prototype.sayHello = function() { console.log(`Hello, my name is ${this.name}.`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值