JS 7种继承方式
文章平均质量分 96
这阵子在整理JS的7种继承方式,发现很多文章跟视频,讲解后都不能让自己理解清晰,索性自己记录一下,希望个位发表需要修改的意见,共勉之。
Penk是个码农
工作了那么多年,之前一直没写博客,一个怕误导别人,一个怕发布一些垃圾文章影响IT环境。
现在开始逐渐写一些文章,一方面是自己记录知识点,一方面是希望能帮助一些有需要的人。
有错误的或者好的建议,大大们就不要吝啬笔墨,望共同进步 ;)
展开
-
javascript 7种继承-- new操作符的原理以及实现
new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。创建一个空的简单 JavaScript 对象(即 {});为步骤 1 新创建的对象添加属性 proto,将该属性链接至构造函数的原型对象;将步骤 1 新创建的对象作为 this 的上下文;如果该函数没有返回对象,则返回 this。new操作符的实现手动写一个new操作符功能的函数new constructor[([arguments])]原创 2023-07-26 21:32:45 · 291 阅读 · 0 评论 -
javascript 7种继承-- JavaScript 中的 [[Prototype]] 与 __proto__ 与 .prototype 为什么 JavaScript 中有这么多类型的原型?
为什么 JavaScript 中有这么多类型的原型?它们都有什么作用?当您开始学习 JavaScript 中的原型时,这似乎非常令人畏惧。很多混乱源于这样一个事实:JavaScript 中有两种不同的原型,它们引用了不同的概念。让我解释。.prototype是所有函数都具有的特殊属性,其中包含对对象的引用。当构造函数用来实例化一个新对象时,ConstructorName.prototype被设置为新对象的原型。原创 2023-07-25 11:46:50 · 91 阅读 · 0 评论 -
javascript 7种继承-- 原型链继承分析(1)
对于JS继承不熟悉的同学,感觉可以先从class继承开始,了解其结构,因为那个是最简单实现,并且最标准的格式了,大概了解了JS继承逻辑、prototype、__proto__、[[prototype]]、constructor 在实例中的结构再逐步学习对比其他继承,当然如果不去面试的话,直接用class就好了...原创 2023-07-24 11:22:19 · 102 阅读 · 0 评论 -
javascript 7种继承-- 构造函数继承分析(2)
原型链:就是实例对象和原型对象之间的链接,每一个对象都有原型,原型本身又是对象,原型又有原型,以此类推形成一个链式结构,称为原型链。这阵子在整理JS的7种继承方式,发现很多文章跟视频,讲解后都不能让自己理解清晰,索性自己记录一下,希望个位发表需要修改的意见,共勉之。父类的数据以及方法要给子类继承,通过了子类构造函数继承的原理,实例化子类的时候,调用父类构造函数,并且将作用域指向子类实例。* 原型:原型就是一个对象,也叫原型对象,不同的人叫法不一样,很容易搞懵逼初学者,原型===原型对象。原创 2023-07-24 13:45:21 · 97 阅读 · 0 评论 -
javascript 7种继承-- 组合式继承分析(3)
但是又产生了新问题,就是会多初始化一次,不过也可以从这里看出来,原型链在某些场景还是挺好的,只会触发一次父类,只要设计的时候,不会修改复合数据类型的话,对于一些大型应用还是挺关键的。* 原型链:就是实例对象和原型对象之间的链接,每一个对象都有原型,原型本身又是对象,原型又有原型,以此类推形成一个链式结构,称为原型链。父类的数据以及方法要给子类继承,通过了JS的原型链的原理,将子类的prototype,指向了实例化的父类。// 这里还不能直接打印对象出来,因为是一个指针,总是指向最新的数据...原创 2023-07-24 15:06:19 · 108 阅读 · 0 评论 -
javascript 7种继承-- 原型式继承分析(4)
道格拉斯·克罗克福德在一篇文章中介绍了一种实现继承的方法,这种方法并没有使用严格意义上的构造函数。它的想法是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。原型式继承,返回一个空的构造函数所创建的实例,并该构造函数的prototype指向需要继承的对象,说白了就是直接**浅拷贝**copy一个新的对象给你用,可以参考原型式继承的一句话代码:`let parent2 = Object.create(obj); `。原创 2023-07-25 21:25:08 · 174 阅读 · 0 评论 -
javascript 7种继承-- 寄生式继承分析(5)
说的寄生式继承,不得不提到上一篇文章的原型式继承,因为原型式继承无法传参,对父类部分属性重写只能在上下文中,通过 .操作符操作。而寄生式继承就是封装好一个函数,对原型式继承的实例化对象进行再加工,也是通过.操作符,不过环境上下文切换到了函数。这个也就是我们熟悉的设计模式之一工厂模式,既美化了代码,也实现了复用。即原型式继承+工厂模式=寄生式继承工厂模式:定义一个创建对象的方法,让其子类自己决定实例化哪一个工厂类,工厂模式使其创建过程延迟到子类进行。原创 2023-07-26 11:15:58 · 153 阅读 · 0 评论 -
javascript 7种继承-- 寄生组合式继承(6)
组合式继承 = 原型链继承 + 构造函数继承。寄生组合式继承 = 寄生功能 + 组合式继承 = 寄生功能 + 原型链继承 + 构造函数继承。这边回顾一下组合式继承有什么缺点,主要是实例化了父类的次数 = 子类实例化次数 + 1 (子类原型指向了父类的实例)。其实就目前电脑的配置,这点也无关紧要,实例化一个父类能造成多大的性能损耗呢。但还是有强迫症换成相处了解决方案,因为父类的上下文已经用构造函数继承了,只要再继承父类的原型链就好了,实现的方案就是将子类的原型指向父类的原型。原创 2023-07-26 22:31:46 · 193 阅读 · 0 评论 -
javascript 7种继承-- class继承(7)
class 不仅仅是简化了之前讲解的6种继承方式,也更加严谨,提供了更多的更像面向对象变成的方法(读取器,静态方法等)。JS一开始的初衷就是为了方便开发者,当初的开发也比较简单就是单纯的页面,随着浏览器不断地发展,现在功能越来越多了,所以,才有7种继承的进化史。这阵子在整理JS的7种继承方式,发现很多文章跟视频,讲解后都不能让自己理解清晰,索性自己记录一下,希望个位发表需要修改的意见,共勉之。调用了类中的静态方法,静态方法一般不是用于对对象的操作,这边的功能是比较2个名字的长短,虽然有点不实用…原创 2023-08-03 23:19:55 · 510 阅读 · 0 评论