spread
拓展运算符用的比较多,他的特性有哪些呢?
代码是最直观的了。
basic example
1
const man = {
2
name: 'xhs',
3
age: 18
4
}
5
6
const company = {
7
name: 'pinee',
8
depart: {
9
name: 'dev'
10
}
11
}
Copied!
example1
1
Object.defineProperty(man, 'sex', {
2
value: 'nan',
3
writable: true,
4
configurable: true
5
})
6
man //{name: "xhs", age: 18, sex: "nan"}
7
{...man} //{name: "xhs", age: 18}
Copied!
由上面可以发现 扩展运算符不支持enumerable: false的属性
1
const man2 = Object.create(man, {
2
gf: {
3
value: 'lucia',
4
enumerable: true
5
}
6
});
7
man2 //{gf: "lucia"}
8
man2.name // xhs
9
man2.hasOwnProperty('name') // false
10
man2.hasOwnProperty('gf') // true
11
12
const man3 = {...man2}
13
man3 // {gf: "lucia"}
Copied!
由上面可以发现,扩展运算符只会显示出自有的属性,不会展示继承的属性
example3
1
const company2 = {...company}
2
company2 === company // false
3
company2.depart === company.depart // true
Copied!
可以发现,嵌套的引用的是一个对象。因为 他是一个浅拷贝,只克隆对象本身,不会拷贝嵌套实例。
当然,也可以嵌套解决
1
c3 = {...company, depart: {...company.depart}}
2
c3.depart === company.depart //false
Copied!
example3
1
class Bar {
2
constructor(){
3
this.name = 'bar-name'
4
this.age = 18
5
}
6
7
info() {
8
return `name is ${this.name}, age is ${this.age}`
9
}
10
}
11
const b = new bar
12
b.name // bar-name
13
b.info() // "name is bar-name, age is 18"
14
Bar.prototype.info() // "name is bar-name, age is 18"
15
b.constructor.name // Bar
16
17
b2 = {...b}
18
b2.name // 'bar-name'
19
b2.info() //error
20
b2.constructor // Object
Copied!
可以发现,扩展运算符存在原型属性丢失的情况 。 因为b的构造函数是Bar, b2的构造函数是Object, info是存在Bar的原型的对象上。
  • 扩展运算符不会扩展enumerable: false的属性.
  • 只会扩展自有属性,不会扩展继承的属性
  • 他是一个浅拷贝
  • 原型属性丢失
Last modified 3yr ago
Copy link