类继承javascript-人人都能看懂的JS学习笔记——JS面向对象编程(二)

2023-09-01 0 9,443 百度已收录

本文转载自极客大学就业课Q&A区,Web后端工程师蓝筹,已获得原作者授权:)

本文接续JS面向对象编程(一)(二)

一如既往,文章希望能让JS编程知识变得通俗易懂,适合初学者学习(虽然我也是编程新手)

为了阅读本文,您需要了解基本的Javascript句型和一些函数知识。 此外,您可能还需要先阅读(1)。

【先写后读】

最近在看ECMAScript6,发现ES6已经实现了Class类的定义。 这意味着JavaScript面向对象编程与其他OOP语言一样,不再变形。 事实上,你可能会想,“我还需要学习这些构造函数和原型链句型吗?”

这是一个见仁见智的问题。 如果你追求最新,现在就可以阅读ES6标准。 如果你认为ES5 OO编程仍然很重要,那么请继续耐心阅读。

我个人觉得目前大部分原生对象的方法和属性一直都是ES5标准下的,所以学习ES5标准下的面向对象编程可以极大的帮助你理解原生JS的属性和技巧。

【审查】

上一篇文章我们讲了ES5标准下的JS。 面向对象编程主要使用构造函数和原型。 目前最流行的创建对象的方式是混合模式,它利用了构造函数和原型各自的优点。 组合模式。

我们通过构造函数创建的实例对象可以继承构造函数上面的初始化属性和方法。 这是继承特性的一部分,很容易理解。 那么,如果我们想写一个新的构造函数,又想继承其他构造函数或者现有的对象,该怎么办呢?

这里我要提一下JS面向对象编程的第三个特点:【继承】

哪些是遗传的?

也许字面意思是一个构造函数继承了另一个构造函数的属性和技能。 这里继承的称为父类,继承的称为基类。 不过想象一下兄妹之间的关系就很容易理解了。

【我给你举个例子? 】

从之前的案例中我们可以发现,丈夫继承了母亲的欧洲血统,尽管他是法国人,他也有欧洲血统。 这是怎么做到的?

关键在于孙正义的原型。

我们将Father构造函数生成的实例对象传递给Son构造函数的原型,这样,虽然Son构造函数的原型看起来指向Father构造函数生成的匿名实例对象,但这个对象是有属性和技能的。

[什么? 你说的和绕口令一样】

是的,因为有一个重要的概念还没有提到,叫做“原型链”。 你是什​​么意思? 即实例对象的原型对象所指向的对象也包含一个原型对象类继承javascript,原型链就可以理解了。

要理解原型链,需要回顾一下上一篇文章中提到的重要知识,即当调用实例对象的属性和技巧时,JS 是如何找到它的执行流程的。 我们再回顾一下:

1、首先将实例对象的__proto__属性指向构造函数的prototype原型属性对象

2. 在构造函数中执行实例属性和实例技术。

3.实例对象创建

4.当调用实例对象中的属性或方法时,程序会首先查找构造函数生成的实例属性或方法。 如果没有找到,则会沿着 __proto__ 指针进入原型对象中进行搜索。 。

根据JS的搜索流程,刚才兄妹俩的反例可以理出一个搜索优先级:

1、实例对象中的实例属性和实例方法(最高优先级查询)

2、实例对象中原型对象中的实例属性和实例方法

3、实例对象中原型对象中的实例属性和实例方法

4. 依次无限下去。 。 。

这就形成了一个原型链。 我们通过一张图来感受一下:

在图中,你可以将SuperType视为父亲,将SubType视为儿子。 这里新创建的实例的构造函数指向Father而不是Son,虽然这是因为Son构造函数的原型对象被重绘了,而这个重绘的实例对象源自Father,并且包含了一个指向Father的指针。 构造函数属性。

【最终的母亲是谁? 】

答案是:对象。 所有引用类型默认都会继承Object,因此它是最早的祖先。

好吧,如果你读过上一篇文章,你应该会觉得这不是最好的方法。 (笑)是的,这绝对不是最合理的方式。 问题当然出在原型上。 由于原型指向一个实例对象,通过引用传递的副作用是,当你做任何操作时,操作的结果都会映射到所有泛型上去。

[借用构造函数]

为了解决原型链的财产和技能共享带来的负面影响,一种称为构造函数窃取的技术诞生了。 这些技术的核心思想是在泛型构造函数内部调用父类构造函数。 它使用apply()或call()方法来实现(这里的apply和call方法需要自己理解):

可以发现instance1改变colors引用属性并没有影响instance2的颜色。 这确实解决了原型链属性和技能共享带来的负面后果。 另外,借用构造函数的另一个好处是是否可以方便地将参数传递给构造函数,例如:

在上面的例子中,模仿了父亲为母亲和儿子命名的过程。

【别高兴得太早,借用构造函数也是有问题的】

同样,借用构造函数也有缺点。 如果您阅读了上一篇文章,您可以很容易地回忆起通过构造函数创建实例对象的缺点。 是的,就是代码的重复执行,严重影响了显存空间。 上面的例子中,如果父亲要给一万个儿子起名字,他就需要叫父亲一万次,这是不合理的。

【所以我们有一个合理的模型:组合继承】

组合继承,虽然是原型链和借用构造函数的结合类继承javascript,但却是取长补短。

通过组合,可以保证当改变一个实例对象的属性时,不会映射到其他实例对象,同时继承共享方法。

【继承构造函数这么复杂,为什么不创建一个新的呢】

如果您认为组合继承的方式对于您的需求来说比较复杂、繁琐。 Crockford 引入了一种原型继承:

这是一个思路,首先在函数中构建构造函数的副本,然后将传入的对象参数赋值给构造函数副本的原型,并返回副本的实例对象。 与原型链不同的是,通过构造副本,重新绘制新实例对象的原型。 是一种更方便的继承思路。

Object.create() 方法是 ES5 中的新方法。 其原理与原型继承是一致的。 您可以将两个对象作为参数传递给 Object.create() 方法。 第一个参数是新实例对象的原型。 对象,第二个(可选)是您希望新对象定义的附加属性的对象。

并非所有浏览器版本都支持Object.create()方法,请查看详情。

因此,如果您只是希望一个对象与另一个对象相似,则无需特意创建构造函数。 原型继承是完全有能力的。

【总结】

好了,到此为止我就讲完了JS面向对象编程的基础知识。 总结一下理解JS面向对象编程的关键知识点:

1.JS面向对象编程的特点:封装、多态、继承

2.构造函数和实例对象

3. 原型和原型链

4. 按值传递和按引用传递

5、构造函数的执行过程

6. 实例对象的属性和技术的调用查询序列

7.附加知识:作用域和this指针

也许JS面向对象编程还有很多知识点没有详细讲解,比如“寄生”。 第一个是我自己对此没有特别的理解和把握,所以我不会欺骗你。 二是真正能够自学。 抓牢。

就这样了,感谢您的耐心阅读。

结尾

觉得很棒吗? 欢迎转发或在本文下方留言讨论~

虽然下课了,我们还是聊两分钟吧……

极客贡献有什么好处?

这是整理想法和发现新想法的绝佳方式! 贡献的极客们根本停不下来~

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript 类继承javascript-人人都能看懂的JS学习笔记——JS面向对象编程(二) https://www.wkzy.net/game/186922.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务