Object.create()的介绍
Object.create是es6里面新增加的一个对象的操作方法,当你了解它之后,你会发现非常的好用,我就先给大家介绍一下它的基本用法和常见的使用例子,深入的用法在以后会继续挖掘:
1. 语法:
Object.create(proto, [propertiesObject])
//方法创建一个新对象,使用现有的对象来提供新创建的对象的**proto**。
2. 参数:
- proto : 必须。表示新建对象的原型对象,即该参数会被赋值到目标对象(即新对象,或说是最后返回的对象)的原型上。该参数必须是是
null
或者是对象
(创建空的对象时需传null , 否则会抛出TypeError
异常)。 - propertiesObject : 可选。 添加到新创建对象的可枚举属性(即其自身的属性,而不是原型链上的枚举属性)对象的属性描述符以及相应的属性名称。
3 返回值:
在指定原型对象上添加新属性后的对象。
//举个简单的例子
var obj=Object.create({id:1,name:2})
大家可以清楚地看到当只传第一个参数的时候,会默认创建一个空对象,但是一定要注意不是把参数赋值到目标对象上,而是赋值到目标对象的proto上,这点一定要搞清楚。
下面我们举一个传递两个参数的例子:
var obj=Object.create({id:2,name:"测试"},{age:{value:18}})
大家可以看到,当使用第二个参数给对象赋值的时候,不能像普通得对象一样直接赋值,要通过一个对象包裹,里面写上各种的参数。但是有一点,如果你只是简单的给个value,那么这个属性是只读的,这跟普通得对象赋值不一样。当对它做写操作的时候,完全是无效的。所以说,我们可以利用这个特点去封装一些具有只读属性的函数。如果你想要这个属性跟普通的对象一样,那你配置一个writable:true即可。给个例子:
大家可以看到当配置了writable参数之后,属性就变成可写的了。当然它还有很多参数可以配置,这里就不在详述,有具体需求的大家可以自己去查一下详细的文档。
介绍到这,其实Object.create()的用法已经介绍完毕,是不是觉得很简单。下面我就给几个具体例子来加深大家的理解:
1.组合继承:
function Parent(name,age){
this.name=name;
this.age=age;
}
Parent.prototype.test=function(){
console.log(this.name)
}
function Parent1(type,sex){
Parent.call(this,"小花",18)
this.type=type;
this.sex=sex;
}
Parent1.prototype=Object.create(Parent.prototype)
Parent1.prototype.constructor=Parent1;
Parent1.prototype.test1=function(){
console.log(this.age)
}
大家可以发现我们简单的使用一下Object.create()就可以实现原型的继承,并且不会引起引用改变导致原型改变的问题。
2.手写一个new函数
//使用proto实现new函数
function Mynew(fn,...arg){
var obj={}
fn.apply(obj,arg);
obj.__proto__=fn.prototype
return obj
}
function Cons(name,age){
this.name=name;
this.age=age;
}
Cons.prototype.test=function(){
console.log(this.name)
}
var testObj=Mynew(Cons,"小明",18)
console.log(testObj) //小明
//使用Object.create()实现new函数
function Mynew(fn,...arg){
var obj={}
obj=Object.create(fn.prototype) //把构造函数的原型挂到实例对象的proto上
fn.apply(obj,arg);
return obj
}
function Cons(name,age){
this.name=name;
this.age=age;
}
Cons.prototype.test=function(){
console.log(this.name)
}
var testObj=Mynew(Cons,"小明",18)
console.log(testObj)