ES中对象的扩展

吐槽君 分类:javascript

属性的可枚举性

可枚举性

对象的每个属性都有一个描述对象(Desciprtor),用来控制该属性的行为。Object.getOwnPropertyDescriptor 方法可以获取该属性的描述对象

	let obj = {foo: 'foo'}
	Object.getOwnPropertyDescriptor(obj, 'foo')
	/*
		{
			value: 'foo',
			writable: true,
			enumerable: true,
			configurable: true
		}
	*/ 
 

描述对象的enumerable属性,称为’可枚举性’, 如果该属性为false,表示某些操作会忽略当前属性

目前,有四个操作会忽略enumerable为false的属性

  • for in 只遍历对象自身和继承的可枚举属性
  • object.keys 只返回可遍历的属性名
  • Json.stringify 只串行化对象自身的可枚举的属性
  • Object.assign 忽略enumerable为false的属性,只拷贝对象自身的可枚举属性

引入可枚举性这个概念的最初目的,就是让某些属性可以避免被for…in,否则内部的方法,属性都会被遍历到。比如对象的tostring,数组的length

	Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumable
	// false

	Object.getOwnPropertyDescriptor([], 'length').enumable
	// false
 

上面代码对象的toString 和数组的length 属性的enumable 都是false,所以不会被for…in遍历到

ES6规定所有class的继承属性都是不可枚举的

	Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
	// false
 

由于for…in总是引入继承的属性,所以尽量使用Object.keys

属性的遍历

ES6一共有五种方法,可以遍历对象的属性

(1)for…in
for…in遍历对象自身和继承的可枚举的属性(不包含Symbol)

(2)Object.keys(obj)
Object.keys返回一个数组,包含自身所有(不含继承)可枚举的属性(不含Symbol)键名

(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身所有属性(不含Symbol,含有不可枚举)属性的键名

(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols 返回一个数组,包含自身所有包含Symbol属性的键名

(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身所有属性(不含继承),不管键名是否是Symbol,不管是否可枚举

以上的5种方法遍历对象的键名,都遵循同样的属性遍历的次序规则

首先遍历所有数值键,按照数值升序排列
其次遍历所有字符串键,按照加入时间升序排列
最后遍历所有Symbol键,按照加入时间升序排列

	let obj = {
		[Symbol()]: 0,
		b: 0,
		3: 9,
		10: 20,
		a: 9
	}
	Reflect.ownKeys(obj)
	// [3, 10, b, a, Symbol()]
 

Reflect.ownKeys方法会返回一个数组,这个数组的返回次序是这样的,

首先是数值3和10,其次是字符串b和a,最后是symbol

super关键字

this总是指向函数所在的当前对象,ES6新增了super关键字,它指代的是当前对象的原型对象

this --> 当前对象
super --> 当前对象的原型对象

	let person = {
		name: 'person'
	}

	let son = {
		name: 'sun',
		printPerson () {
			return super.name
		}
	}
	
	Object.setPrototypeOf(son, person)
	son.printPerson()
	// 'person'
 

上面通过设置son的原型,调用son方法来找到原型的属性

super表示原型对象时,只能用在对象的方法之中,用在其他地方会报错

	let obj = {
		foo: super.foo
	}
	// 用在了属性上

	let obj1 = {
		foo: () => super.foo
	}
	// 用在了方法

	let obj2 = {
		foo: function () {
			return super.foo
		}
	}
 

上面三种都会报错,因为对于js引擎而言,根本没有用到super。

第一种属于用在属性中
第二种和第三种属于用在函数中,但又赋值给了foo属性

现在只有简写的对象方法才能让js引擎确认,定义的是对象的方法

js引擎内部,super.foo等同于
Object.getPrototypeOf(this).foo 属性 或 Object.getPrototypeOf(this).foo.call(this) 方法。

	let father = {
		name: 'person',
		sayHello () {
			return this.name
		}
	}

	let son = {
		name: 'son',
		sayHi () {
			return super.sayHello();
		}
	}
	
	Object.setPrototypeOf(son, father);
	son.sayHi();
	// 'son'
 

上面代码分为三步

  • 第一步调用son.sayHi 函数返回了原型的sayHello方法
  • 第二步father自身调用sayHello方法,返回了this.name
  • 第三部this.name 此时的this,因为在son的环境执行的所以,this指向son,所以打印结果为’son’

如果改为father.sayHello() 就不一样了

对象的扩展运算符

数组中的扩展运算符(…)以及得心应手了,对象的写法与之功能基本类似

解构赋值

对象解构用于将一个对象的值全部取出来(可遍历的),并且没有被读取的属性,赋值到另一个对象身上,所有他们的键和值,最后形成一个新对象

	let {x, y, ...z} = {x: 1, y: 2, z: 3, u: 10, n: 20}
	x // 1
	y // 2
	z // {z: 3, u: 10, n: 20}
 

上面代码只有z是解构成功的对象,x和y属于被读取过后的值了,z会把x y没有读取到的键和值拷贝过来,返回一个新数组

解构赋值等号右边必须是一个对象,如果不是就会报错

	let {...y} = undefined // error
	let {...n} = null 	   // error 
 

解构赋值必须是最后一个参数,否则会报错

	let {...x, y} = obj; // error
	let {x, ...y, z} = obj; // error
 

解构赋值是浅拷贝,即如果拷贝的值是一个数组,对象,函数,那么拷贝的实际是引用,而不是副本

	let obj = { a: {b: 1} }
	let {...newObj} = obj
	newObj.a.b = 2;
	obj.a.b
	// 2
 

上面代码拷贝的是一个对象,由于解构只是浅拷贝,所以指向了同一个指针地址,导致新地址的数据改变,原地址指向的数据也要发生改变,因为他们的指向同一个房间。

解构赋值无法拿到原型的属性

	let a1 = {bar: 'bar'}
	let a2 = {foo: 'foo'}
	Object.setPrototypeOf(a1, a2)
	let {...a3} = a2
	a3
	// {foo: 'foo'}
	a3.bar
	// undefined
 

上面代码a2 继承a1,a3又拷贝了a2 ,但是解构赋值无法拿到原型属性,导致a3没有获取到a1这个祖先的属性

	// 创建一个obj的原型对象
	let obj = Object.create({x: 1, y: 2})
	// 自身添加一个z属性
	obj.z = 3
	
	let {x, ...newObj} = obj
	// x是单纯的解构赋值,所以可以读取继承属性。
	// y和z是扩展运算符解构赋值,只能读取对象自身的属性
	let {y, z} = newObj
	// y是继承属性,所以newObj中获取不到。
	x // 1
	y // undefined
	z // 3
 

可能有人觉得可以省事,会这么写

	let {x, ...{y, z}} = obj
	// error
 

ES6规定,变量声明语句中,如果使用解构赋值,扩展运算符后面必须是一个变量名,而不能是一个解构赋值表达式。

解构赋值的一个用处,是扩展某个函数的参数,传递给另一个函数或者引入其他操作

	function test (a, b) {
		return a + b
	}
	
	function bar (x, y, ...anther) {
		// 使用x y 进行内部操作
		// 把扩展运算符导出出去,提供给另一个函数,或者做别的操作
		console.log(x * y);
		return test(anther);
		
	}

	bar(1, 3, 9, 9)
 

扩展运算符

对象的扩展运算符,用于取出参数对象所有可遍历属性,拷贝到当前对象之中

	let z = {x: 1, y: 2}
	let n = {...z}
	n // {x: 1, y: 2}
 

由于数组是特殊的对象,所以对象扩展运算符也可以用于数组

	let foo = {...['x', 'y', 'z']}
	foo 
	// {0: 'x', 1: 'y', 2: 'z'}
 

如果扩展运算符后面是一个空对象,则没有任何效果

	let obj = {...{}, a: 1}
	obj
	// {a: 1}
 

如果不是个对象,会把他转换为对象

	// {...Object(1)} 等同于
	{...1}
	// {}
 

上面会调用包装类,转换为Number(1) 但该对象自身本就没有任何属性,所以返回空

还有一些类型

	{...true} // {}
	{...undefined} // {}
	{...null} // {}
	{...'es6'} // {0: 'e', 1: 's', 2: '6'}
 

前三个都会返回空对象,最后一个字符串,由于字符串会转换为类数组,所以返回的就是一组带索引的对象

对象的扩展运算符等同于使用Object.assign() 方法

	let aClone = {...a};

	// 等同于
	let aClone = Object.assign({}, a)
 

上面只是拷贝对象实例属性,想要拷贝原型属性,需要这样写

	// fn1 
	let clone1 = {
		// 拿到obj的原型,并赋给自己的proto, 自己的原型指向了obj的原型 
		__proto__ : Object.getPrototypeOf(obj),
		// obj的实例属性赋给自己原型,拷贝obj的实例属性和原型属性
		...obj
	}

	// fn2
	let clone2 = Object.assign(
		// 创建一个对象,该对象的原型是obj原型对象
		Object.create(Object.getPrototypeOf(obj)),
		// 把obj放到上面这个对象里
		obj
	)
	
	// fn3
	let clone3 = Object.create(
		// 创建参照对象,该对象为obj的原型对象
		Object.getPrototypeOf(obj),
		// 把obj的所有可枚举属性传递给参照对象
		Object.getOwnPropertyDescriptors(obj)
	)
 

扩展运算符,可以合并对象

	let obj1 = {...a, ...b}
	let obj2 = Object.assign({}, a, b)
 

如果扩展运算符后面还有用户自定义的属性,那么扩展运算符内部的同名属性会被覆盖掉

	let obj = {...a, x: 1, y: 2}
	// 等同于
	let obj1 = {...a, ...{x: 1, y: 2}}
	// 等同于
	let x = 1, y = 2, obj2 = {...a, x, y}
	// 等同于
	let obj3 = Object.assign({}, a, {x: 1, y: 2})
 

上面代码中,a对象中的x, y属性都会被 a后面的 x y都会在拷贝到新对象时覆盖掉

这样一来更改部分现有属性,很方便

	let newVersion = {
		...oldVersion,
		name: 'new Version'
	}
 

上面的旧版本 name会被替换掉

如果自定义属性放在扩展运算符前,就会变成设置新对象的默认属性值

	let obj = {x: 1, y: 2, ...a}
	==
	let obj1 = Object.assign({}, {x: 1, y: 2}, a
	== 
	let obj2 = Object.assign({x: 1, y: 2}, a)
 

对象扩展运算符后面也可以跟表达式

	let obj = {
		...(x > 1 : {name: 'wei'} ? {}),
		bar: 'foo'
	}
 

如果扩展运算符的参数对象之中,有取值函数get,它会自动执行的

	let obj = {
		get foo () {
			console.log(1)
		}
	}
	
	let newObj = {...obj}
	// 1
 

上面代码,在扩展结束后就会执行get函数的语句

一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容