欢迎光临散文网 会员登陆 & 注册

JS中的安全类、继承与内置构造函数

2020-05-24 11:04 作者:MagnumHou  | 我要投稿

一、安全类

无论外部如何调用(使用new关键字 或  当作普通函数)该类,都会返回一个类的实例化对象

解决办法:利用this指向进行判断

安全类


二、继承

继承是面向对象语言中最显著的一个特征。

它是从已有的类中派生出新的类,新的类能吸收已有类(基类、父类)的数据(特征和行为),并拓展属于自己的新的能力。


类:具有相同特征和行为的集合。

比如:人类有姓名、年龄、性别、身高、体重等属性,吃饭、睡觉、走路等等行为,所以人可以划为一类。

人类这个大的范围太广了,我们还可以进行细分,根据不同的划分标准可以划分出不同的小类:

按照肤色:黄种人   白种人   黑种人

按照国籍:中国人、法国人、美国人、俄罗斯等

按照工种:教师、学生、医生、工人、农民等等

........

在传统的JS中不存在类的概念,我们使用构造函数模拟类,并通过一些方式实现类与类之间的继承。


对象:从类中拿出的具体特性和行为的个体。

比如:张三丰   年龄23  性别男  黄种人   国籍中华人民共和国   是一个医生


类和对象关系:

类是对象的抽象化;

对象是类的具体化。


传统JS中提供了几种继承的方式:类式继承(原型继承)、构造函数式继承(apply和call方法)、组合式继承(前面两种组合)、寄生式继承(类式继承的优化)、寄生组合式继承(寄生继承和组合继承的结合)


2.1 类式继承

类式继承也叫原型继承,将子类的原型指向父类实例化对象。

类式继承


类式继承浏览器操作

观察上面控制台信息,还是有一些地方需要优化:

子类的构造函数指向了父类需要优化为指向子类自己的构造函数(上面代码中解决)。

原型中有空的参数undefined需要优化;

父类和子类有一些共同的参数,需要优化;



2.2 构造函数式继承

利用 apply 和 call 方法

构造函数式继承

构造函数式继承浏览器操作


这种方式对   父类和子类有一些共同的参数,进行了优化;

当调用父类原型中的方法时,报错。

说明,这种方式不是真正的继承。

但是,如果是在父类函数中自带的本地属性和方法,可以直接调用。



2.3 组合式继承

原型继承 +  aplly继承

组合式继承


组合式继承

组合式继承浏览器操作

这种方式解决的问题:父子类参数相同问题,实现真正的继承可以调用父类原型中的方法。

依旧存在的问题:在实例化对象的原型上,存在空的属性。


2.4 寄生式继承

封装一个函数,解决原型上空参数问题。

寄生式继承
寄生式继承浏览器操作

解决的问题:空参数

依旧存在的问题:父子参数重复


2.5 寄生组合式继承

这是我们建议的最终形态,优化程度较高。

寄生组合式继承

寄生组合式继承 浏览器操作

优化了:空参数问题  父子重复参数的问题


2.5 ES5优化

利用 Object.create() 方法优化

Object.create()


2.6、ES6中的继承

利用关键字 extends 和 super

 extends 实现继承



三、内置构造函数

一种是由宿主环境所提供的构造函数:宿主环境就是JS代码执行的环境。目前所谓的宿主环境其实是浏览器环境。

Image对象

Image对象

另外一种就是ECMAScript核心语法提供的构造函数:Object    Array   String    RegExp    Date   Function  Number    Boolean  

内置构造函数一
内置构造函数二


内置构造函数之间的关系

JS中除了undefined之外所有的东西都可以看作是对象,函数也是对象;

所有的对象又都可以看作是构造函数Object的实例,Object构造函数也是函数;

所有的函数又是Function的实例;

内置构造函数之间的关系


如果你感觉up写的还不错,请在下方点个赞,就是对up的最大支持;

如果在某些知识点上,有什么意见和建议,也可以提出来进行探讨。

个人微信公众号:前端知识分享喵

JS中的安全类、继承与内置构造函数的评论 (共 条)

分享到微博请遵守国家法律