ES6新特性---对象扩展方法Object.assign、Object.is、Proxy与Object.defineProperty
对象扩展方法Object.assign、Object.is
ES2015中为对象提供了一些扩展方法,我们来看几个最主要的方法。
assign
这个方法可以将多个源对象中的属性复制到一个目标对象中去
如果对象之间存在相同的属性,源对象中的属性会覆盖目标对象中的属性
我们是从源对象中取然后往目标对象里面放
该方法常用来复制一个对象,除此之外assign方法用来为options去设置默认值也是一个非常常见的应用场景。
is
is方法用来判断两个值是否相等。之前我们常用==运算符和 ===严格相等运算符,==运算符会在比较之前自动转换数据类型。这就导致0和false用双等运算符结果为true是成立的,而三等运算符严格去对比两者之间的类型和数值是否相同。
Proxy
如果我们想要监视某个对象中的属性读写,可以用Object.defineProperty来捕获属性的读写过程,在vue3.0以前的版本就是使用这样的一个方法来去实现的数据响应从而实现双向数据的绑定,在ES2015中全新增加了一个Proxy的类型,他就是专门用来为对象设置访问代理器的。通过该属性可以轻松监视到对象的读写过程,相比于defineProperty,功能更加强大,使用更加方便。
如图所示,get方法最简单的可以接受两个参数,分别是目标对象,外部访问的属性的属性名,这个方法的返回值将会作为外部访问该属性所得到的结果。假如访问的属性在目标对象中不存在的话,可以进行逻辑判断并且输出你所需要的结果。
在set方法中需要新加一个value属性作为传入的值,并且在这中间可以加一些判断例如age属性必须为int类型。
在以后Proxy使用的会越来越多,Vue3.0就开始使用Proxy去实现数据的内部响应了。
Proxy与defineProperty的区别
Proxy更为强大,这个强大体现在三个方面:
-
defineProperty只能监视属性的读写,proxy能够监视更多对于对象的操作,例如delete,对于方法的调用等。
-
Proxy更好的支持数组对象的监视
以往为了使用Object.defineProperty去见识数组对象,常见的一种方式是重写数组的操作方法,这也是vue中的实现方式,大体的思路是,通过自定义的方法去覆盖掉数组原型对象上的例如push,shift等一些方法,以此来劫持对于方法调用的过程。
push操作会自动识别值所应该放入的下标,假如再push一次,就会将值放入索引为1的位置处。 -
Proxy是以非侵入的方式监管了对象的读写
一个已经定义好的对象我们不需要对对象本身做任何操作,就可以做到对对象属性的监视,而Object.defineProperty的方式就要求我们必须要以特定的方式单独定义对那些需要被监视的属性。
- JavaScript对象扩展(Object.is(), assign(), 对象遍历keys, es6原型介绍)
- ECMAScript6(ES6)标准之对象Object扩展方法及新特性
- ES6 的Object.assign(target, source_1, ···)方法与对象的扩展运算符
- 对象方法Object.defineProperty()
- includes方法 使用 Object.defineProperty 扩展 ,解决不兼容问题
- ES6对象方法Object.assign()
- 对象属性特性Object.defineProperty
- 步步为营VS 2008 + .NET 3.5(3) - C# 3.0新特性之Automatic Properties(自动属性)、Object Initializers(对象初始化器)、Collection Initializers(集合初始化器)和Extension Methods(扩展方法)
- ES6对象方法Object.assign()
- es6 javascript对象方法Object.assign()
- VS 2008 + .NET 3.5 - C# 3.0新特性之Automatic Properties(自动属性)、Object Initializers(对象初始化器)、Collection Initializers(集合初始化器)和Extension Methods(扩展方法)
- ES5 中对象方法扩展:Object.create()、Object.defineProperties()、对象本身的 get 与 set 详解
- es6 javascript对象方法Object.assign()
- JavaScript 之 对象属性的特性 和defineProperty方法
- ES6-对象的扩展-Object.is()
- ES6-对象的扩展-Object.getOwnPropertyDescriptors()
- js 将多个对象合并成一个对象 assign方法。ES6新特性有哪些
- es6 javascript对象方法Object.assign()
- 双向绑定实现,对比defineProperty与es6对象Proxy不同
- 3、步步为营VS 2008 + .NET 3.5(3) - C# 3.0新特性之Automatic Properties(自动属性)、Object Initializers(对象初始化器)、Collection Initializers(集合初始化器)和Extension Methods(扩展方法)