vue数据双向绑定原理(面试必问)

ES6 之 对象属性的可枚举性和遍历
1.Object.getOwnPropertyDescriptor()
解释：获取对对象属性的描述对象。

let obj = { foo: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, ‘foo’))
显示结果：

复制代码
{
configurable: true
enumerable: true
value: 123
writable: true
proto: Object
}
复制代码
enumerable属性，称为可枚举性，如果为 false 时，就表示某些操作会忽略当前属性。

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

for…in循环：只遍历对象自身的和继承的可枚举的属性。
Object.keys()：返回对象自身的所有可枚举的属性的键名。使用这个遍历对象！
JSON.stringify()：只串行化对象自身的可枚举的属性。
Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性
Object.getOwnPropertyDescriptor(Object.prototype, ‘toString’).enumerable // false

Object.getOwnPropertyDescriptor([], ‘length’).enumerable // false

// toString和length属性的enumerable都是false，因此for…in不会遍历到这两个继承自原型的属性。
2. Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors 方法，返回指定对象所有自身属性（非继承属性）的描述对象。
复制代码
const obj = { foo: 123, get bar() { return ‘abc’ } };

Object.getOwnPropertyDescriptors(obj)

// { foo:
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar:
// { get: [Function: bar],
// set: undefined,
// enumerable: true,
// configurable: true } }
复制代码
上面代码中，Object.getOwnPropertyDescriptors(obj)方法返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象。

3. Object.setPrototypeOf()
   用于设置一个对象的原型对象。
   复制代码
   // 格式
   Object.setPrototypeOf(object, prototype)

// 用法
const o = Object.setPrototypeOf({}, null);

// 该方法等同于下面的函数。
function (obj, proto) {
obj.proto = proto;
return obj;
}
复制代码
例子：

复制代码
let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;

obj.x // 10
obj.y // 20
obj.z // 40
复制代码
注意：

如果第一个参数不是对象，会自动转为对象。但是由于返回的还是第一个参数，所以这个操作不会产生任何效果。

由于undefined和null无法转为对象，所以如果第一个参数是undefined或null，就会报错。

4. Object.getPrototypeOf()
   该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。
   Object.getPrototypeOf(obj);
   如果参数不是对象，会被自动转为对象。

如果参数是undefined或null，它们无法转为对象，所以会报错。

5. super关键字
   我们知道，this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

复制代码
const proto = { foo: ‘hello’ };

const obj = {
find() {
return super.foo;
}
};

Object.setPrototypeOf(obj, proto);
obj.find() // “hello”
// 上面代码中，对象obj的find方法之中，通过super.foo引用了原型对象proto的foo属性。
复制代码
注意，super关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错。

JavaScript 引擎内部，super.foo等同于Object.getPrototypeOf(this).foo（属性）或Object.getPrototypeOf(this).foo.call(this)（方法）。

例题：

复制代码
const proto = {
x: ‘hello’,
foo() {
console.log(this.x);
},
};

const obj = {
x: ‘world’,
foo() {
super.foo();
}
}

Object.setPrototypeOf(obj, proto);

obj.foo() // “world”

// 上面代码中，super.foo指向原型对象proto的foo方法，但是绑定的this却还是当前对象obj，因此输出的就是world。