JavaScript新的物件建立方式---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.
2.propertiesObject 引數的詳細解釋:(預設都為false)
資料屬性
- writable:是否可任意寫
- configurable:是否能夠刪除,是否能夠被修改
- enumerable:是否能用 for in 列舉
- value:值
- get(): 訪問
- set(): 設定
3.例子:直接看例子就知道怎麼用。
<!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>
結果為:
相關文章
- javascript一種新的物件建立方式-Object.create()JavaScript物件Object
- JavaScript 建立物件的方式JavaScript物件
- JavaScript物件與建立物件的方式JavaScript物件
- javascript建立物件的三種方式JavaScript物件
- JavaScript 建立物件的七種方式JavaScript物件
- javascript建立物件的幾種方式JavaScript物件
- JavaScript 建立類/物件的幾種方式JavaScript物件
- JavaScript物件的建立方式有幾種?JavaScript物件
- [轉載]javascript建立物件的幾種方式JavaScript物件
- 好程式設計師分享JavaScript建立物件的方式!程式設計師JavaScript物件
- js建立物件的方式JS物件
- JavaScript建立物件JavaScript物件
- JavaScript 深入之建立物件的多種方式以及優缺點JavaScript物件
- JavaScript深入之建立物件的多種方式以及優缺點JavaScript物件
- java建立物件的五種方式Java物件
- Object 提供的物件建立方式Object物件
- js建立物件的幾種方式JS物件
- 【JavaScript學習】JavaScript物件建立JavaScript物件
- js物件導向設計---建立物件的方式JS物件
- JavaScript物件導向—物件的建立和操作JavaScript物件
- JavaScript類建立的幾種方式JavaScript
- JavaScript建立物件的多種方法JavaScript物件
- Java中建立物件的5種方式Java物件
- js中建立物件的幾種方式JS物件
- javascript使用new建立物件JavaScript物件
- JavaScript巢狀物件的全新方式JavaScript巢狀物件
- js中建立物件的幾種常用方式JS物件
- javascript如何建立一個物件JavaScript物件
- JavaScript 基礎(二) – 建立 function 物件的方法, String物件, Array物件JavaScriptFunction物件
- javascript:建構函式模式(為什麼這種方式也可以建立物件)JavaScript函式模式物件
- 談談JavaScript中建立物件(Object)JavaScript物件Object
- JavaScript建立物件(一)——工廠模式JavaScript物件模式
- JavaScript建立物件(三)——原型模式JavaScript物件原型模式
- javascript建立物件簡單介紹JavaScript物件
- 在JavaScript中建立新物件(轉)JavaScript物件
- jQuery如何建立一個新的元素物件jQuery物件
- Javascript建立陣列的方式你瞭解了嗎JavaScript陣列
- JS 基礎篇(一):建立物件的四種方式JS物件