js創(chuàng)建對(duì)象的方法匯總
js一個(gè)有三種方法創(chuàng)建對(duì)象,這里做一個(gè)總結(jié).
1.對(duì)象直接量
所謂對(duì)象直接量,可以看做是一副映射表,這個(gè)方法也是最直接的一個(gè)方法,個(gè)人比較建議,
//創(chuàng)建簡(jiǎn)單對(duì)象 var obj1 = {}; //空對(duì)象 var obj2 = { name: "ys", age: 12 }; //創(chuàng)建復(fù)雜對(duì)象 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); //object
有的人可能會(huì)發(fā)現(xiàn),這里的鍵值名怎么沒(méi)有引號(hào)”“,好細(xì)心,其實(shí)這個(gè)引號(hào)(單引雙引號(hào),js一樣)加不加都行,但是個(gè)人建議加上,為什么能,因?yàn)榧由现?,鍵值名可以很隨意….當(dāng)然如果你不亂定義名字的話,第一個(gè)比較好,因人而異,
var obj4 = { "my name": "ys", //鍵值名中間有空格 "my-age": 12, //鍵值名中間有連字符 "while": 111 //鍵值名是關(guān)鍵字 } console.log(obj4['my name']); //ys console.log(obj4['my-age']); //12 console.log(obj4.while); //111 console.log(typeof obj3); //object
通過(guò)上面的例子,大家可以看出”.”和”[]”訪問(wèn)屬性的區(qū)別了吧
對(duì)象直接量創(chuàng)建的對(duì)象,鍵值對(duì)的值支持表達(dá)式,如下
var obj3 = { name: "ys", age: obj2.age, //引用obj2.age like: { drink: "water", eat: "food" } }; console.log(obj3.age); //100
2.new創(chuàng)建對(duì)象
1).系統(tǒng)內(nèi)置對(duì)象
var obj1 = new Object(); var obj2 = new Array(); var obj3 = new Date(); var obj4 = new RegExp("ys"); console.log(typeof obj1); //object console.log(typeof obj2); //object console.log(typeof obj3); //object console.log(typeof obj4); //object
2).自定義對(duì)象
function Person(name, age){ this.name = name; this.age = age; } var obj1 = new Person("ys", 12); console.log(Object.prototype.toString.call(obj1)); //object console.log(Person instanceof Object); //true console.log(typeof obj1); //object console.log(obj1.age); //12
3.Object.create()創(chuàng)建
該方法有兩個(gè)參數(shù),我就只解釋下第一參數(shù),第二個(gè)參數(shù)不常用(對(duì)對(duì)象的屬性進(jìn)行進(jìn)一步描述)
第一個(gè)參數(shù):傳入要繼承的原型(prototype)對(duì)象
怎樣理解這句話呢?
var obj1 = Object.create({ name: "ys", age: 12 }); console.log(obj1); //{} console.log(obj1.age); //12
obj1為{},為什么可以訪問(wèn)到屬性值呢?我們理解下第一個(gè)參數(shù)的意義“傳入要繼承的原型對(duì)象”
console.log(obj1.__proto__); //Object {name: "ys", age: 12}
對(duì)象本身為空,但是原型鏈上數(shù)據(jù)不為空,存在obj1.age,所以可以訪問(wèn)到。
1).當(dāng)?shù)谝粋€(gè)參數(shù)為null時(shí)
var obj2 = Object.create(null); //不繼承對(duì)象應(yīng)有的屬性和方法 console.log(obj2 + "abc"); //報(bào)錯(cuò) ,失去 + 功能
為什么會(huì)報(bào)錯(cuò)呢?正常參數(shù)下生成的圖如下:
通過(guò)圖可以看出,要繼承的原型對(duì)象(即參數(shù))又繼承了Object的原型對(duì)象,關(guān)鍵原因來(lái)了,Object的原型對(duì)象包含了一些js對(duì)象的基本方法(indexOf(),toString(),'+'功能……)而這個(gè)時(shí)候,如果參數(shù)為null,那么這條繼承鏈就斷了。
這個(gè)時(shí)候大家應(yīng)該理解了一句話了吧,JavaScript中所有的對(duì)象都繼承自O(shè)bject,以為Object處于繼承鏈的最頂端。
2).創(chuàng)建空對(duì)象
var obj3 = Object.create(Object.prototype); console.log(obj3); //{},(空對(duì)象,與前兩個(gè)方法 {},new Object 相同) console.log(obj3.__proto__); //如下圖 ,只包含了基本對(duì)象的方法
代碼的圖:
這樣創(chuàng)建的對(duì)象,只包含了對(duì)象的基本方法。
3).最后大家看下面的代碼,希望能更深刻的理解Object.create()方法,大家可以參考這篇文章:《一種新的javascript對(duì)象創(chuàng)建方式Object.create()》
var obj1 = { name: "ys", age: 12 }; obj1.prototype = { sayName: function(){ return console.log(this.name); } };
/*①對(duì)象參數(shù),只繼承對(duì)象*/ var obj2 = Object.create(obj1); console.log(obj2); //{} console.log(obj2.name); //ys /*console.log(obj2.sayName());*/ /* 報(bào)錯(cuò) obj2.sayName is not a function*/ console.log(obj2.__proto__.prototype.sayName()); //ys 理解原型的原型
如果不理解的話,看下面的圖
/*②對(duì)象原型,繼承對(duì)象原型*/ var obj3 = Object.create(obj1.prototype); console.log(obj3); //{} console.log(obj3.name); //undefined,沒(méi)有繼承對(duì)象本身 obj3.name = "ys"; console.log(obj3.name); //ys console.log(obj3.sayName()); //ys
代碼不理解看圖(設(shè)置name后的圖):
這個(gè)時(shí)候相信大家都理解第一個(gè)參數(shù)了吧。
以上就是本文的全部?jī)?nèi)容,希望可以幫助大家更好的創(chuàng)建對(duì)象。
- JavaScript 三種創(chuàng)建對(duì)象的方法
- JS 創(chuàng)建對(duì)象(常見(jiàn)的幾種方法)
- JavaScript 創(chuàng)建對(duì)象
- js中創(chuàng)建對(duì)象的幾種方式示例介紹
- JS對(duì)象創(chuàng)建的幾種方式整理
- js創(chuàng)建對(duì)象的幾種常用方式小結(jié)(推薦)
- javascript轉(zhuǎn)換字符串為dom對(duì)象(字符串動(dòng)態(tài)創(chuàng)建dom)
- JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例
- js中常見(jiàn)的4種創(chuàng)建對(duì)象方式與優(yōu)缺點(diǎn)
相關(guān)文章
js實(shí)現(xiàn)的類marquee水平循環(huán)滾動(dòng)
marquee (水平)循環(huán)滾動(dòng)的js實(shí)現(xiàn) ,需要的朋友可以參考下。2010-03-03一文總結(jié)JavaScript中Promise遇到的問(wèn)題
Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。本文將總結(jié)一下在Promise中容易遇到的一些問(wèn)題,感興趣的同學(xué)可以參考下2023-05-05js實(shí)現(xiàn)Select列表內(nèi)容自動(dòng)滾動(dòng)效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)Select列表內(nèi)容自動(dòng)滾動(dòng)效果的方法,涉及javascript簡(jiǎn)單遞歸調(diào)用遍歷select及時(shí)間函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2015-08-08實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離減少JS
本教程旨在實(shí)現(xiàn)lightBox時(shí)的樣式與行為分離,減少JS在各方面(全屏遮蔽、ie6中遮蔽select、雙向居中、高度自適應(yīng)內(nèi)容等)的工作。2009-07-07對(duì)layer彈出框中icon數(shù)字參數(shù)的說(shuō)明介紹
今天小編就為大家分享一篇對(duì)layer彈出框中icon數(shù)字參數(shù)的說(shuō)明介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09JavaScript中三個(gè)等號(hào)和兩個(gè)等號(hào)的區(qū)別(== 和 ===)淺析
javascript中比較運(yùn)算符'=='與'==='可能大家用的比較多,但是大家對(duì)他的區(qū)別不是很清楚,接下來(lái)小編給大家介紹下js中三個(gè)等號(hào)和兩個(gè)等號(hào)的區(qū)別(== 和 ===),感興趣的朋友可以參考下2016-09-09前后端常見(jiàn)的幾種鑒權(quán)方式(小結(jié))
這篇文章主要介紹了前后端常見(jiàn)的幾種鑒權(quán)方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08