JS中的对象的相关概念

1.对象的概念:引用类型,无序键值对的集合

2.新建空对象:{ }

3.对象的属性:

访问属性:object.属性名/object属性名(用于包含特殊字符的属性名)

新建属性:object.新属性名=值(会修改原对象)/{...obj, 新属性名: 值}(不修改原对象)

删除属性:delete object.属性名

属性描述符:描述对象属性的特征(元数据),本质是一个对象

设置某个属性的属性描述符:Object.defineProperty(obj,属性,属性描述符对象)

属性描述符对象的值:

数据属性:value wirtable

访问器属性:get:func() set:func() configurable(是否可更改)

enumerable(是否可枚举)

vue的双向绑定原理:访问器属性在被更改时,执行函数通过一些列操作重新渲染页面,使得页面也同步呈现修改后的属性

获取某个属性的属性描述符:Object.getOwnPropertyDescriptor(obj,属性名)

获取全部属性的属性描述符:Object.getOwnPropertyDescriptors(obj)

4.对象的原型链:

构造函数是用于创建实例对象的一个工具函数,用new标识新建实例对象的操作

构造函数有一个属性prototype,该属性指向其原型对象

对象实例也有一个属性\[prototype]/proto(已弃用),该属性指向创建其实例的构造函数的原型对象

原型对象又有一个属性constructor,指回其构造函数

原型对象也是一个实例对象,它至少是Object构造函数的实例对象,所以也有一个\[prototype]指向Object构造函数的原型对象,到Object.prototype后就终止了

这样就形成了链条,叫原型链

意义:实例对象都可以访问构造函数的原型对象中存的方法和属性(即公共的)

5.原型对象的继承:

将一个构造函数的原型对象,指向另一个构造函数的原型对象的副本,实现继承

继承时,要注意子类的原型对象的constructor的指向

组合继承:父类原型对象的副本是父类的实例

注意,继承父类的非原型链上的资源时,非原型链上的方法的this指向的仍旧是父类,要指向子类自身,则需调用一次父类的构造函数,重新绑定this到自身:父类构造函数.call(this,参数列表)

寄生组合继承:父类原型对象的副本是新建父类的拷贝对象:

Object.create(prototype)该方法创建一个新对象,并指定其隐式原型

寄生组合解决了需要两次调用父类构造函数的缺点

6.对象混合:将两个对象混合,产生一个新对象

Object.assign({},o1,o2,...)该方法将第一个参数对象,后面的参数对象的属性,依次赋值给第一个参数对象(从左到右,若属性同名,则后处理的覆盖掉先处理的),然后返回第一个参数对象

可用于设置默认值,第二个对象放默认对象,第三个对象放用户输入的值,第一个对象仍是空对象

7.对象克隆:

浅克隆:创建一个新对象,循环遍历克隆的原对象的每一项(如果是引用类型,也克隆其引用,即引用是相同的)

深克隆:在对象的属性也是引用类型的时候,也要深克隆那个引用类型(通过递归,某个值是引用类型的时候,把这个值当做一个对象,然后这个对象进行克隆,即新建一个对象,然后把引用类型的值(非地址)放到这个新建的对象里,这样属性克隆就完成,最后深克隆拿到的是这个新建对象属性的地址(新的副本而非相同引用)。但一般递归是不考虑如何做的,只需要知道逻辑,引用类型要深克隆,那就递归调用把那个值进行深克隆就行了,非引用类型就直接赋值,这样就完成了深克隆)

克隆函数传两参数,一个是克隆原对象或原数组,一个是判断是否深克隆,若深克隆,则引用类型的属性也要使用这个克隆函数,传的俩参数一个是克隆原对象的属性(引用类型,也是一个对象或数组),一个是true(确认深克隆)

相关推荐
mONESY1 小时前
DeepSeek-R1 WebGPU(六):浏览器本地跑推理的完整实现
javascript
新时代牛马1 小时前
Vue.js 响应式原理详解
前端·javascript·vue.js
jaysee-sjc1 小时前
【JavaWeb】Tlias智能学习辅助系统|后端Web实战(登录认证)
java·开发语言·前端·学习·mybatis
BreezeJiang1 小时前
为什么 Next.js 要把组件切成两半?从一个 SEO 死穴说起
javascript·react.js
Molecular_Chat1 小时前
Biotin SNA 生物素偶联凝集素结合特异性、生物素标记效率定量表征研究
javascript·python
进击的蛋蛋1 小时前
JS对象的遍历
javascript·面试
mONESY1 小时前
React 前端如何不傻等后端接口?
前端·javascript·后端
xiaominlaopodaren1 小时前
three.js地图数学基础(七):地图相机
javascript·gis·three.js
淡海水1 小时前
C#与常用数据结构源码剖析-全篇导览
开发语言·数据结构·unity·面试·职场和发展·c#