本博文源於js基礎,主要探討對象的五種創建方式。分別是:花括號創建、使用點操作符創建、Object的create方法、Object的create方法、Object的defineProperty、defineProperties方法還有通過prototype屬性創建。
使用花括號創建
這種方式可類比成java的創建方式。看一個例子就能加深影響:
<script>
var obj = {
v;1.0,
getV:function() {
return this.v;
},
_name:"object",
get name() {
this._name;
}
set name(name){
this._name = name;
}
}
</script>
這裏包含直接屬性(v)、function對象屬性(getV)以及訪問器屬性(name).
使用點操作符創建
這種我們在其他面向對象的語言中經常使用,只需一個例子點名就行:
var person = {name:"張三"};
person.name = "李四";
person.age = 88;
創建屬性,定義屬性賦值,如果之前有屬性那就修改,如果沒有那就添加相應的屬性。
Object的create方法
這個前面講過,可以參考這篇博文:
Object是ES中內置的一個function類型的對象,create的Object對象的一個屬性方法,其作用是根據傳入的參數創建object類型的對象。create方法的調用語法如下。
Object.create(prototype, [propertiesObject])
其中,第一個參數prototype是創建的對象所對應的prototype,相當於使用function創建時function的prototype屬性對象,創建出來的object對象實例可以直接調用,如果這裏第一個參數爲null,prototype屬性就不能調用。
第二個參數propertiesObject爲屬性描述對象,是可選參數,用於描述所創建對象的自身屬性。比如下面:
var obj = Object.create(
{
type:"by create";
},
{
color: {
value:"red",
enumerable:true
},
size: {
value:"37",
enumerable:true
}
}
);
console.log(obj.type);
console.log(obj.color);
console.log(obj.size);
console.log(Object.getOwnPropertyNames(obj));
Object的defineProperty、defineProperties方法
我們可以使用Object的defineProperty和defineProperties方法給對象添加屬性。defineProperty方法可添加單個屬性,defineProperties方法可以添加多個屬性。
Object的defineProperty方法一共有三個參數,第一個是要添加屬性的對象,第二個是要添加屬性的屬性名,第三個是屬性的描述。先看其使用方式
<script>
var obj = {};
Object.defineProperty(obj,"color",{
enumerable:true,
value:"green"
});
console.log(Object.getOwnPropertyNames(obj));
console.log(obj.color);
</script>
例子中使用defineProperty方法給obj對象添加了color屬性。
Object的defineProperties方法可以創建多個屬性,它有兩個參數,第一個參數是要添加屬性的對象,第二個參數是屬性描述對象,和create方法中的第二個參數一樣,例如下面
<script>
var obj = {};
Object.defineProperties(obj,{
name:{
enumerable:true,
writable:false,
value:"lucy"
},
color: {
enumerable:true;
value:"green"
}
});
console.log(Object.getOwnPropertyNames(obj));
obj.name = "peter";
console.log(obj,name);
</script>
這個例子使用Object的defineProperties方法給obj對象添加了name和color兩個屬性。在這個例子種,因爲name屬性的writable爲false,所以obj的name屬性不可以修改,因此打印lucy。
通過prototype屬性創建
關於prototype屬性,專門一篇博文談這個
JavaScript|1篇博文探尋prototype屬性與繼承
因爲此屬性function對象的prototype中的屬性並不會添加到創建的實例對象中,但創建的對象可以調用,這樣就相當於可以將prototype中的屬性添加到創建的對象中。 也可以看個例子:
因爲此屬性function對象的prototype中的屬性並不會添加到創建的實例對象中,但創建的對象可以調用,這樣就相當於可以將prototype中的屬性添加到創建的對象中。 也可以看個例子:
<script>
function Shop(){}
var shop = new Shop();
Shop.prototype.type = "網絡銷售";
console.log(shop.type);
</script>