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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值