【转载】JavaScript5种对象的命名属性创建(含测试源码)

【转载】JavaScript5种对象的命名属性创建(含测试源码)

JavaScript5种对象的命名属性创建(含测试源码)

执念斩长河 2020-05-26 10:22:02 1028 收藏 2 原力计划

分类专栏： JS基础

				</div>
			</div>
			<div class="up-time" style="left: 117.9px; display: none;"><span>最后发布:2020-05-26
					10:22:02</span><span>首发:2020-05-26 10:22:02</span></div>
			<div class="slide-content-box">
				<div class="all-tags-box">
				</div>
				<div class="article-copyright">
					<div class="creativecommons">
						<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"></a>
					</div>
					<div class="creativecommons">
						版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank"
							rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。 </div>
					<div class="article-source-link">
						本文链接：<a
							href="https://blog.csdn.net/m0_37149062/article/details/106348725">https://blog.csdn.net/m0_37149062/article/details/106348725</a>
					</div>
				</div>
			</div>
			<div class="operating">
				<a class="href-article-edit slide-toggle">版权</a>
			</div>
		</div>
	</div>
</div>
<!--python安装手册结束-->
<article class="baidu_pl">
	<div id="article_content" class="article_content clearfix">
		<link rel="stylesheet"
			href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-211130ba7a.css">
		<div id="content_views" class="markdown_views prism-atom-one-dark">
			<!-- flowchart 箭头图标 勿删 -->
			<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
				<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block"
					style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
			</svg>
			<p>本博文源于js基础，主要探讨对象的五种创建方式。分别是：花括号创建、使用点操作符创建、Object的create方法、Object的create方法、Object的defineProperty、defineProperties方法还有通过prototype属性创建。
			</p>
			<h2><a name="t0"></a><a name="t0"></a><a id="_1"></a>使用花括号创建</h2>
			<p>这种方式可类比成java的创建方式。看一个例子就能加深影响：</p>
			<pre
				class="prettyprint"><code class="prism language-javascript has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;"><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
	v<span class="token punctuation">;</span><span class="token number">1.0</span><span class="token punctuation">,</span>
	getV<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>v<span class="token punctuation">;</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	_name<span class="token punctuation">:</span><span class="token string">"object"</span><span class="token punctuation">,</span>
	<span class="token keyword">get</span> <span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>_name<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token keyword">set</span> <span class="token function">name</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>_name <span class="token operator">=</span> name<span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>			

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

这里包含直接属性(v)、function对象属性(getV)以及访问器属性(name).

使用点操作符创建

这种我们在其他面向对象的语言中经常使用，只需一个例子点名就行：

var person = {name:"张三"};
person.name = "李四";
person.age = 88;

 
 

 
 
1
2
3

创建属性，定义属性赋值，如果之前有属性那就修改，如果没有那就添加相应的属性。

Object的create方法

这个前面讲过，可以参考这篇博文：
js|3种方式创建object类型对象(含测试源码)。这种方式有两个参数，第一个参数中的属性为创建的对象[[Prototype]]属性，第二个参数为属性描述对象。

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

例子中使用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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

这个例子使用Object的defineProperties方法给obj对象添加了name和color两个属性。在这个例子种，因为name属性的writable为false，所以obj的name属性不可以修改，因此打印lucy。

通过prototype属性创建

关于prototype属性，专门一篇博文谈这个
JavaScript|1篇博文探寻prototype属性与继承
因为此属性function对象的prototype中的属性并不会添加到创建的实例对象中，但创建的对象可以调用，这样就相当于可以将prototype中的属性添加到创建的对象中。 也可以看个例子：

<script>
	function Shop(){}
	var shop = new Shop();
	Shop.prototype.type = "网络销售";
	console.log(shop.type);
</script>

 
 

 
 
1
2
3
4
5
6

		</div>
		<div
			data-report-view="{&quot;mod&quot;:&quot;1585297308_001&quot;,&quot;dest&quot;:&quot;https://blog.csdn.net/m0_37149062/article/details/106348725&quot;,&quot;extend1&quot;:&quot;pc&quot;,&quot;ab&quot;:&quot;new&quot;}">
			<div></div>
		</div>
		<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
	</div>
</article>

原文链接：https://blog.csdn.net/m0_37149062/article/details/106348725?utm_medium=distribute.pc_category.328892.nonecase&depth_1-utm_source=distribute.pc_category.328892.nonecase 原文作者：执念斩长河