JavaScript创建简单对象和多层对象的几种方法
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>1.对象直接量(对象字面量)</li><li>2.new创建对象(构造函数<strong style="font-size: 16px;">)</strong><ul class="second_class_ul"><li>1）.系统内置对象</li><li>2）.自定义对象</li></ul></li><li>3.Object.create()创建<ul class="second_class_ul"><li>1）.当第一个参数为null时</li><li>2）.创建空对象</li><li>3）.最后大家看下面的代码，希望能更深刻的理解Object.create()方法</li></ul></li></ul></div><p>在JavaScript中，我们可以使用多种方式来创建对象。对象是JavaScript中最重要的数据类型之一，它允许我们将相关的属性和方法组合在一起，以便更好地组织和管理代码。javascript面向对象创建多个对象的方法，哪个最好用？对象直接量(对象字面量)？new创建对象(构造函数)？Object.create()？原型方法？原型加构造函数方法？进来一看便知。</p><p class="maodian"></p><h2>1.对象直接量(对象字面量)</h2><div><div><div><div><div style="position: relative;"><div><div><p>JavaScript中的对象直接量（Object Literal）也被称为对象字面量。</p><p>对象直接量是用花括号{}来表示的，其内部包含了零或多个属性名-值对。每个属性之间使用逗号分隔，最后一个属性可以省略逗号。</p></div></div></div></div></div></div></div><p>所谓对象直接量，可以看做是一副映射表，这个方法也是最直接的一个方法，个人比较建议，<br/></p><p><code class="js comments"></code></p><div style="white-space: normal;"><pre class="brush:js;toolbar:false">//创建简单对象var obj1 = {}; //空对象
var obj2 = {
name: "ys",
age: 12
};
//创建复杂对象
var obj3 = {
name: "ys",
age: 12,
like: {
drink: "water",
eat: "food"
}
};
console.log(typeof obj1); //object
console.log(typeof obj2); //object
console.log(typeof obj3); //objec</pre><code class="js comments"></code></div><p>有的人可能会发现，这里的键值名怎么没有引号”“，好细心，其实这个引号（单引双引号，js一样）加不加都行，但是个人建议加上，为什么能，因为加上之后，键值名可以很随意….当然如果你不乱定义名字的话，第一个比较好，因人而异，</p><p><code class="js keyword"></code></p><div style="white-space: normal;"><pre class="brush:js;toolbar:false">var obj4 = {
"my name": "ys", //键值名中间有空格
"my-age": 12, //键值名中间有连字符
"while": 111 //键值名是关键字
}
console.log(obj4['my name']); //ys
console.log(obj4['my-age']); //12
console.log(obj4.while); //111
console.log(typeof obj3); //objec</pre><code class="js comments"></code></div><p>通过上面的例子，大家可以看出”.”和”[]”访问属性的区别了吧</p><p>对象直接量创建的对象，键值对的值支持表达式，如下</p><p><code class="js keyword"></code></p><div style="white-space: normal;"><pre class="brush:js;toolbar:false;">var obj3 = {
name: "ys",
age: obj2.age, //引用obj2.age
like: {
drink: "water",
eat: "food"
}
};
console.log(obj3.age); //100</pre></div><p class="maodian"></p><h2>2.new创建对象(构造函数<strong style="font-size: 16px;">)</strong></h2><p class="maodian"></p><h3>1）.系统内置对象</h3><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js keyword">var</code> <code class="js plain">obj1 = </code><code class="js keyword">new</code> <code class="js plain">Object();</code></div><div><code class="js keyword">var</code> <code class="js plain">obj2 = </code><code class="js keyword">new</code> <code class="js plain">Array();</code></div><div><code class="js keyword">var</code> <code class="js plain">obj3 = </code><code class="js keyword">new</code> <code class="js plain">Date();</code></div><div><code class="js keyword">var</code> <code class="js plain">obj4 = </code><code class="js keyword">new</code> <code class="js plain">RegExp(</code><code class="js string">"ys"</code><code class="js plain">);</code></div> <div><code class="js plain">console.log(</code><code class="js keyword">typeof</code> <code class="js plain">obj1); </code><code class="js comments">//object</code></div><div><code class="js plain">console.log(</code><code class="js keyword">typeof</code> <code class="js plain">obj2); </code><code class="js comments">//object</code></div><div><code class="js plain">console.log(</code><code class="js keyword">typeof</code> <code class="js plain">obj3); </code><code class="js comments">//object</code></div><div><code class="js plain">console.log(</code><code class="js keyword">typeof</code> <code class="js plain">obj4); </code><code class="js comments">//object</code></div></div></td></tr></tbody></table></div></div></div><p class="maodian"></p><h3>2）.自定义对象</h3><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js keyword">function</code> <code class="js plain">Person(name, age){</code></div><div><code class="js spaces"> </code><code class="js keyword">this</code><code class="js plain">.name = name;</code></div><div><code class="js spaces"> </code><code class="js keyword">this</code><code class="js plain">.age = age;</code></div><div><code class="js plain">}</code></div> <div><code class="js keyword">var</code> <code class="js plain">obj1 = </code><code class="js keyword">new</code> <code class="js plain">Person(</code><code class="js string">"ys"</code><code class="js plain">, 12);</code></div> <div><code class="js plain">console.log(Object.prototype.toString.call(obj1)); </code><code class="js comments">//object</code></div><div><code class="js plain">console.log(Person </code><code class="js keyword">instanceof</code> <code class="js plain">Object); </code><code class="js comments">//true</code></div><div><code class="js plain">console.log(</code><code class="js keyword">typeof</code> <code class="js plain">obj1); </code><code class="js comments">//object</code></div><div><code class="js plain">console.log(obj1.age); </code><code class="js comments">//12</code></div></div></td></tr></tbody></table></div></div></div><p class="maodian"></p><h2>3.Object.create()创建</h2><p>该方法有两个参数，我就只解释下第一参数，第二个参数不常用（对对象的属性进行进一步描述） <br/> 第一个参数：传入要继承的原型（prototype）对象 <br/> 怎样理解这句话呢？</p><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js keyword">var</code> <code class="js plain">obj1 = Object.create({</code></div><div><code class="js spaces"> </code><code class="js plain">name: </code><code class="js string">"ys"</code><code class="js plain">,</code></div><div><code class="js spaces"> </code><code class="js plain">age: 12</code></div><div><code class="js plain">});</code></div><div><code class="js plain">console.log(obj1); </code><code class="js comments">//{}</code></div><div><code class="js plain">console.log(obj1.age); </code><code class="js comments">//12</code></div></div></td></tr></tbody></table></div></div></div><p>obj1为{}，为什么可以访问到属性值呢？我们理解下第一个参数的意义“传入要继承的原型对象”</p><p>console.log(obj1.__proto__); //Object {name: "ys", age: 12}</p><p>对象本身为空，但是原型链上数据不为空，存在obj1.age，所以可以访问到。</p><p class="maodian"></p><h3>1）.当第一个参数为null时</h3><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js keyword">var</code> <code class="js plain">obj2 = Object.create(</code><code class="js keyword">null</code><code class="js plain">); </code><code class="js comments">//不继承对象应有的属性和方法</code></div><div><code class="js plain">console.log(obj2 + </code><code class="js string">"abc"</code><code class="js plain">); </code><code class="js comments">//报错 ，失去 + 功能</code></div></div></td></tr></tbody></table></div></div></div><p>为什么会报错呢？正常参数下生成的图如下：</p><p><img style="max-width:100%!important;height:auto!important;" src="https://zhuji.jb51.net/uploads/allimg/20240201/1-24020110533a22.png" alt="" class="medium-zoom-image"/></p><p>通过图可以看出，要继承的原型对象（即参数）又继承了Object的原型对象，关键原因来了，Object的原型对象包含了一些js对象的基本方法（indexOf()，toString()，'+'功能……）而这个时候，如果参数为null，那么这条继承链就断了。</p><p>这个时候大家应该理解了一句话了吧，JavaScript中所有的对象都继承自Object，以为Object处于继承链的最顶端。</p><p class="maodian"></p><h3>2）.创建空对象</h3><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div><div>3</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js keyword">var</code> <code class="js plain">obj3 = Object.create(Object.prototype); </code></div><div><code class="js plain">console.log(obj3); </code><code class="js comments">//{}，（空对象，与前两个方法 {}，new Object 相同）</code></div><div><code class="js plain">console.log(obj3.__proto__); </code><code class="js comments">//如下图 ，只包含了基本对象的方法</code></div></div></td></tr></tbody></table></div></div></div><p>代码的图：</p><p><img style="max-width:100%!important;height:auto!important;" src="https://zhuji.jb51.net/uploads/allimg/20240201/1-240201105339403.png" alt="" class="medium-zoom-image"/></p><p>这样创建的对象，只包含了对象的基本方法。</p><p class="maodian"></p><h3>3）.最后大家看下面的代码，希望能更深刻的理解Object.create()方法</h3><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js keyword">var</code> <code class="js plain">obj1 = {</code></div><div><code class="js spaces"> </code><code class="js plain">name: </code><code class="js string">"ys"</code><code class="js plain">,</code></div><div><code class="js spaces"> </code><code class="js plain">age: 12</code></div><div><code class="js plain">};</code></div><div><code class="js plain">obj1.prototype = {</code></div><div><code class="js spaces"> </code><code class="js plain">sayName: </code><code class="js keyword">function</code><code class="js plain">(){</code></div><div><code class="js spaces"> </code><code class="js keyword">return</code> <code class="js plain">console.log(</code><code class="js keyword">this</code><code class="js plain">.name);</code></div><div><code class="js spaces"> </code><code class="js plain">}</code></div><div><code class="js plain">};</code></div></div></td></tr></tbody></table></div></div></div><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js comments">/*①对象参数，只继承对象*/</code></div><div><code class="js keyword">var</code> <code class="js plain">obj2 = Object.create(obj1);</code></div><div><code class="js plain">console.log(obj2); </code><code class="js comments">//{}</code></div><div><code class="js plain">console.log(obj2.name); </code><code class="js comments">//ys</code></div><div><code class="js comments">/*console.log(obj2.sayName());*/</code> <code class="js comments">/* 报错 obj2.sayName is not a function*/</code></div><div><code class="js plain">console.log(obj2.__proto__.prototype.sayName()); </code><code class="js comments">//ys 理解原型的原型</code></div></div></td></tr></tbody></table></div></div></div><p>如果不理解的话，看下面的图</p><p><img style="max-width:100%!important;height:auto!important;" src="https://zhuji.jb51.net/uploads/allimg/20240201/1-24020110533a05.png" alt=""/></p><div class="jb51code"><div class="syntaxhighlighterjs"><div class="table-wrapper"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr class="firstRow"><td class="gutter" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></td><td class="code" style="border-width: 1px; border-style: solid; border-color: gainsboro;"><div class="container"><div><code class="js comments">/*②对象原型，继承对象原型*/</code></div><div><code class="js keyword">var</code> <code class="js plain">obj3 = Object.create(obj1.prototype);</code></div><div><code class="js plain">console.log(obj3); </code><code class="js comments">//{}</code></div><div><code class="js plain">console.log(obj3.name); </code><code class="js comments">//undefined，没有继承对象本身</code></div><div><code class="js plain">obj3.name = </code><code class="js string">"ys"</code><code class="js plain">;</code></div><div><code class="js plain">console.log(obj3.name); </code><code class="js comments">//ys</code></div><div><code class="js plain">console.log(obj3.sayName()); </code><code class="js comments">//ys</code></div></div></td></tr></tbody></table></div></div></div><p>代码不理解看图（设置name后的图）：</p><p><img style="max-width:100%!important;height:auto!important;" src="https://zhuji.jb51.net/uploads/allimg/20240201/1-240201105339193.png" alt=""/></p><p>这个时候相信大家都理解第一个参数了吧。</p><p><br/></p>
頁:
[1]