一种新的javascript对象创建方式Object.create()
作者:bea
Object.create() 是什么? Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的。 例如: function Car (desc) { this.desc = desc; this.color = "red";} Car.prototype = { getInfo: f
Object.create() 是什么? Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的。 例如:
function Car (desc) {
this.desc = desc;
this.color = "red";
}
Car.prototype = {
getInfo: function() {
return 'A ' + this.color + ' ' + this.desc + '.';
}
};
//instantiate object using the constructor function
var car = Object.create(Car.prototype);
car.color = "blue";
alert(car.getInfo());
结果为:A blue undefined.
1、propertiesObject 参数的详细解释:(默认都为false) 数据属性:
writable:是否可任意写
configurable:是否能够删除,是否能够被修改
enumerable:是否能用 for in 枚举
value:值
访问属性:
get(): 访问
set(): 设置
2、例子:直接看例子就知道怎么用。
<!DOCTYPE html>
<html>
<head>
<title>yupeng's document </title>
<meta charset="utf-8"/>
</head>
<body>
<script type="text/javascript">
var obj = {
a:function(){
console.log(100)
},
b:function(){
console.log(200)
},
c:function(){
console.log(300)
}
}
var newObj = {};
newObj = Object.create(obj,{
t1:{
value:'yupeng',
writable:true
},
bar: {
configurable: false,
get: function() { return bar; },
set: function(value) { bar=value }
}
})
console.log(newObj.a());
console.log(newObj.t1);
newObj.t1='yupeng1'
console.log(newObj.t1);
newObj.bar=201;
console.log(newObj.bar)
function Parent() { }
var parent = new Parent();
var child = Object.create(parent, {
dataDescriptor: {
value: "This property uses this string as its value.",
writable: true,
enumerable: true
},
accessorDescriptor: {
get: function () { return "I am returning: " + accessorDescriptor; },
set: function (val) { accessorDescriptor = val; },
configurable: true
}
});
child.accessorDescriptor = 'YUPENG';
console.log(child.accessorDescriptor);
var Car2 = function(){
this.name = 'aaaaaa'
} //this is an empty object, like {}
Car2.prototype = {
getInfo: function() {
return 'A ' + this.color + ' ' + this.desc + '.';
}
};
var newCar = new Car2();
var car2 = Object.create(newCar, {
//value properties
color: { writable: true, configurable:true, value: 'red' },
//concrete desc value
rawDesc: { writable: true, configurable:true, value: 'Porsche boxter' },
// data properties (assigned using getters and setters)
desc: {
configurable:true,
get: function () { return this.rawDesc.toUpperCase(); },
set: function (value) { this.rawDesc = value.toLowerCase(); }
}
});
car2.color = 'blue';
console.log(car2.getInfo());
car2.desc = "XXXXXXXX";
console.log(car2.getInfo());
console.log(car2.name);
</script>
</body>
</html>
结果为: 100 yupeng yupeng1 201 I am returning: YUPENG A blue PORSCHE BOXTER. A blue XXXXXXXX. aaaaaa
以上就是针对javascript一种新的对象创建方式Object.create()的详细介绍,希望对大家的学习有所帮助。
有用 | 无用
function Car (desc) {
this.desc = desc;
this.color = "red";
}
Car.prototype = {
getInfo: function() {
return 'A ' + this.color + ' ' + this.desc + '.';
}
};
//instantiate object using the constructor function
var car = Object.create(Car.prototype);
car.color = "blue";
alert(car.getInfo());
结果为:A blue undefined.
1、propertiesObject 参数的详细解释:(默认都为false) 数据属性:
writable:是否可任意写
configurable:是否能够删除,是否能够被修改
enumerable:是否能用 for in 枚举
value:值
访问属性:
get(): 访问
set(): 设置
2、例子:直接看例子就知道怎么用。
<!DOCTYPE html>
<html>
<head>
<title>yupeng's document </title>
<meta charset="utf-8"/>
</head>
<body>
<script type="text/javascript">
var obj = {
a:function(){
console.log(100)
},
b:function(){
console.log(200)
},
c:function(){
console.log(300)
}
}
var newObj = {};
newObj = Object.create(obj,{
t1:{
value:'yupeng',
writable:true
},
bar: {
configurable: false,
get: function() { return bar; },
set: function(value) { bar=value }
}
})
console.log(newObj.a());
console.log(newObj.t1);
newObj.t1='yupeng1'
console.log(newObj.t1);
newObj.bar=201;
console.log(newObj.bar)
function Parent() { }
var parent = new Parent();
var child = Object.create(parent, {
dataDescriptor: {
value: "This property uses this string as its value.",
writable: true,
enumerable: true
},
accessorDescriptor: {
get: function () { return "I am returning: " + accessorDescriptor; },
set: function (val) { accessorDescriptor = val; },
configurable: true
}
});
child.accessorDescriptor = 'YUPENG';
console.log(child.accessorDescriptor);
var Car2 = function(){
this.name = 'aaaaaa'
} //this is an empty object, like {}
Car2.prototype = {
getInfo: function() {
return 'A ' + this.color + ' ' + this.desc + '.';
}
};
var newCar = new Car2();
var car2 = Object.create(newCar, {
//value properties
color: { writable: true, configurable:true, value: 'red' },
//concrete desc value
rawDesc: { writable: true, configurable:true, value: 'Porsche boxter' },
// data properties (assigned using getters and setters)
desc: {
configurable:true,
get: function () { return this.rawDesc.toUpperCase(); },
set: function (value) { this.rawDesc = value.toLowerCase(); }
}
});
car2.color = 'blue';
console.log(car2.getInfo());
car2.desc = "XXXXXXXX";
console.log(car2.getInfo());
console.log(car2.name);
</script>
</body>
</html>
结果为: 100 yupeng yupeng1 201 I am returning: YUPENG A blue PORSCHE BOXTER. A blue XXXXXXXX. aaaaaa
以上就是针对javascript一种新的对象创建方式Object.create()的详细介绍,希望对大家的学习有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- Underscore源码分析
- Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
- javascript实现禁止复制网页内容汇总
- jquery实现树形菜单完整代码
- javascript设置页面背景色及背景图片的方法
- js获取及修改网页背景色和字体色的方法
- 基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
- jQuery中attr()与prop()函数用法实例详解(附用法区别)
- 使用OpenLayers3 添加地图鼠标右键菜单
- javascript实现下拉提示选择框
- 基于JavaScript如何实现ajax调用后台定义的方法
- js+css简单实现网页换肤效果
- Jquery使用小技巧汇总
- js为什么不能正确处理小数运算?
- javascript从作用域链谈闭包
- 你有必要知道的25个JavaScript面试题
- JavaScript仿支付宝密码输入框
- js实现商城星星评分的效果
- 原生js配合cookie制作保存路径的拖拽