全面解析JavaScript的对象创建和继承

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 阿里巴巴前端工程师逸翾对JavaScript中的对象进行了详细讲解。首先从理解对象谈起,说明了对象中的两个关键点key和prototype,其次介绍了对创建对象的三种方式,包括字面量、构造函数、Object.create和class person,最后对JavaScript的继承进行了详细解析。

阿里巴巴前端工程师逸翾对JavaScript中的对象进行了详细讲解。首先从理解对象谈起,说明了对象中的两个关键点key和prototype,其次介绍了对创建对象的三种方式,包括字面量、构造函数、Object.create和class person,最后对JavaScript的继承进行了详细解析。

数十款阿里云产品限时折扣中,赶快点击这里,领券开始云上实践吧!

直播视频精彩回顾

以下是精彩视频内容整理:

理解对象

对象是无序属性的集合,其属性可以包含基本值、对象或者函数,对象的每个属性或者方法都有一个Key,而每个名字都映射到一个Value。

af6cd52d62adb4ebcf38a74d7aa696939c457487

对象结构中比较关键的两个点是key和prototype,key有自己的数据属性,比如writable、value以及设置或读取key值的方法等;prototype是JavaScript与其它语言最大不同的地方,继承主要是通过原型特性来实现的。如图所示,定义一个对象,在原型上绑定了一个key,这个key打印出“say hi”。

创建对象

在日常工作中常用的JavaScript创建对象的常用方式有很多,JavaScript是怎样创建对象的呢?

848a9c11885bcf207eb033fb17510be16ee4807c

最简单的方式是直接用字面量创建,定义一个变量,变量中有key-value,value可以是函数、可以是其它对象,能够定义出一个对象,打印出来如图的三个key(action、name和son),son中又有两个key,_proto_叫做隐式原型。

72ca12e77fbac56d1ccf4ce5f723051dc2f4a693

创建对象还有一种方式就是通过构造函数来创建,创建对象和继承关系很紧密。如图所示,创建一个构造函数person,有两个构造属性name和age,创建对象person1和person2,最后生成打印出来。Person1和person2这两个方法做的事情是完全相同的,浪费了资源,通过原型方式,让它们共用同一个方法,person1的隐式原型指向了person原型,person原型的构造函数是person,person指向person原型。

a5acee5954a39e170a473b36baa65c414252bdd8

我们还可以通过Object.create创建对象,Object.create相当于Object.prototype的一个语法糖,可以节省很多资源,只生成了中转对象,所有对象都会指向Object.prototype,Object.prototype指向null。

3fa368721109ca192bd521651d07d85b49f212e0

在ES6中出现什么样的创建对象方式呢?创建一个简单方法即是class person,如图所示。ES6中的class可以看作构造函数的另一种写法;构造函数的prototype属性,在ES6的“class”上面继续存在;class中定义的方法实际上也是挂载到原型上,而static静态属性则是挂载到构造函数本身上;class中定义的方法默认是不可枚举的。

JavaScript中的继承

JavaScript中最简单的继承是从构造函数通过new命令生成实例,比如:

function Dog(name){

this.name = name;

}

Var bigdog = new Dog(‘金毛’);

Console.log(biglog.name);

金毛;

Bindog直接继承了Dog的属性,打印出bindog在父类中的key,这种方法的缺点是每一个实例对象都有自己的属性和副本,不仅无法共享属性和方法,而且造成极大浪费资源。

0efd7f05e8eeb1bc0fa24d6898f0405b3a5e03bf

在ES6之前,最通用的方式是引入prototype属性,通过原型链实现继承,这也是最复杂的实现继承方式。prototype属性包含一个对象(prototype对象),所有实例对象需要共享的属性和方法,都放在这个对象里面,不需要共享的属性和方法,就放在构造函数里。如图所示,首先定义了supertype,在supertype的原型上挂载了一个方法getsupervalue,它会返回supertype的property属性。接着又定义了另外一个构造函数subtype,它的subproperty属性为false,使得supertype.prototype等于new supertype,supertype的隐式原型指向supertype的原型,supertype的原型对象构造函数是supertype,supertype的proto指向supertype的原型对象。然后将subtype的原型属性挂载getsubvalue的方法,此处原理与上面supertype一样。然后又实例化subtype对象,instance从supertype这里继承来了getsupervalue方法。此时,subtype prototype指向了subtype原型对象,instance隐式原型指向了subtype原型。

2633b5ed73acb97ff8732e6fec83a81f0f1449bd

在ES6中引入了extends关键字,但extends其实也是ES6众多语法糖之一而已,其本质仍是原型链,只是看起来清晰方便了很多。

ES5先创建子类的实例对象,ES6先创建父类的实例对象,然后再通过子类的构造函数修改this。如图所示,左侧代码中两个class中,stu继承了person全部的属性和方法,person中有一个构造函数和一个方法,stu也有自己的构造函数和方法,其中super关键字可以当作函数使用,代表父类的构造函数,继承父类name的属性,super也可以当作对象使用,指向父类的原型对象。

本文由云栖志愿小组毛鹤整理,编辑百见

 

相关文章
|
4天前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
2天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
2天前
|
Rust JavaScript 前端开发
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
|
6天前
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
29 11
|
4天前
|
运维 Cloud Native JavaScript
云端新纪元:云原生技术深度解析深入理解Node.js事件循环及其在异步编程中的应用
【8月更文挑战第27天】随着云计算技术的飞速发展,云原生已成为推动现代软件开发和运维的关键力量。本文将深入探讨云原生的基本概念、核心价值及其在实际业务中的应用,帮助读者理解云原生如何重塑IT架构,提升企业的创新能力和市场竞争力。通过具体案例分析,我们将揭示云原生技术背后的哲学思想,以及它如何影响企业决策和操作模式。
|
5天前
|
JSON JavaScript 前端开发
JS逆向 AST 抽象语法树解析与实践
JS逆向 AST 抽象语法树解析与实践
14 2
|
5天前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
18 2
|
5天前
|
算法 JavaScript 前端开发
国标非对称加密:RSA算法、非对称特征、js还原、jsencrypt和rsa模块解析
国标非对称加密:RSA算法、非对称特征、js还原、jsencrypt和rsa模块解析
50 1
|
8天前
|
JavaScript 前端开发 开发者
揭开JavaScript的神秘面纱:原型链背后隐藏的继承秘密
【8月更文挑战第23天】原型链是JavaScript面向对象编程的核心特性,它使对象能继承另一个对象的属性和方法。每个对象内部都有一个[[Prototype]]属性指向其原型对象,形成链式结构。访问对象属性时,若当前对象不存在该属性,则沿原型链向上查找。
16 0
|
8天前
|
自然语言处理 前端开发 JavaScript
前端进阶必读:JS闭包深度解析,掌握这一特性,你的代码将焕然一新!
【8月更文挑战第23天】闭包是JavaScript的一项高级功能,让函数能够访问和操作外部函数作用域中的变量。本文深入解析闭包概念、组成及应用场景。闭包由函数及其词法环境构成,通过在一个函数内定义另一个函数来创建。它有助于封装私有变量、维持状态和动态生成函数。然而,不当使用闭包可能导致内存泄漏或性能问题。掌握闭包对于实现模块化代码和成为优秀前端开发者至关重要。
20 0

热门文章

最新文章

推荐镜像

更多
下一篇
云函数