JavaScript5種對象的命名屬性創建(含測試源碼)

本博文源於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>

在這裏插入圖片描述

文章來源: https://blog.csdn.net/m0_37149062/article/details/106348725?utm_medium=distribute.pc_category.361550.nonecase&depth_1-utm_source=distribute.pc_category.361550.nonecase

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章