最近几天在看ES6的东东,看到了对象的扩展运算赋值解构部分,对被扩展操作符应用的赋值解构变量与对象实际属性解构时候的对应关系产生了一点疑惑,所以着手研究了一下,写一写心得,防止之后再忘记或者混淆可以再回头来看看这篇文章 ,看下面例子:
const o = Object.create({ x: 1, y: 2 });
o.z = 3;
let { x, ...{ y, z } } = o;
x // 1
y // undefined
z // 3
上面代码中,变量x是单纯的解构赋值,所以可以读取对象o继承的属性;变量y和z是扩展运算符的解构赋值,只能读取对象o自身的属性,所以变量z可以赋值成功,变量y取不到值。
根据上面这段代码,我查找了Object.create()
与new
操作符对于原型继承方面的知识。
这两个知识点涉及到__proto__
与prototype
,可以点击下面链接了解一下。
Javascript原型与原型链的理解
Object.create()
我们先来看一下Object.create()
在MDN上英文原话:
The Object.create() method creates a new object with the specified prototype object and properties.
- 语法
Object.create(proto[, propertiesObject])
- 参数描述
proto
The object which should be the prototype of the newly-created object
propertiesObject
Optional. If specified and not
undefined
, an object whose enumerable own properties (that is, those properties defined upon itself and not enumerable properties along its prototype chain) specify property descriptors to be added to the newly-created object, with the corresponding property names. These properties correspond to the second argument ofObject.defineProperties()
- 返回值
A new object with the specified prototype object and properties.
看着英文描述我们来模拟一下Object.create()
在执行过程中做了哪些操作呢?
①创建一个空对象{}
②指定空对象的原型(__proto__
)为Object.create()
的参数({}.__proto__ = proto
)
③返回这个对象
Object.create()的第一个参数可以是对象也可以是函数,返回值的类型实际上都是Object。
var Base = function () {}
var o2 = Object.create(Base);
//console info
Base => //ƒ () {}
o2.__proto__ => // ƒ () {}
o2.prototype === Base.prototype => //true
var obj = {s:1,b:2};
var ty = Object.create(obj)
//console info
obj => // {s: 1, b: 2}
ty.__proto__ => // {s: 1, b: 2}
obj 与 ty 都是Object对象 没有prototype属性
new操作符
MDN对于 new操作符是这样解释的:
The new operator creates an instance of a user-defined object type or of one of the built-in object types that has a constructor function.
- 语法
new constructor[([arguments])]
- 参数描述
constructor
A class or function that specifies the type of the object instance.
arguments
A list of values that the constructor will be called with.
接下来我们模拟一下var o = new Foo();
在执行过程中做了什么:
var o = new Object();
o.[[Prototype]] = Foo.prototype;
Foo.call(o);
①创建实例对象o
②指定o.__proto__ = Foo.prototype
③将 this 绑定到新创建的对象(Foo.call(o))
var Base = function () {}
var o1 = new Base();
//console info
Base.prototype === o1.__proto__ => //true
new 操作符只能对构造函数进行创建实例操作