JS創(chuàng)建對(duì)象的四種方式
創(chuàng)建對(duì)象的4種方式:
- 1.字面量的方式去創(chuàng)建對(duì)象
- 2.使用
new
字符創(chuàng)建對(duì)象 - 3.自定義構(gòu)造函數(shù)
- 4.工廠模式創(chuàng)建對(duì)象
對(duì)象是指:具有屬性和方法
1.通過(guò)字面量的方式去創(chuàng)建對(duì)象
var person1={ name:'柯南', age:12, sex:'男', eat:function(){ console.log("我餓了,想吃飯") }, say:function(){ console.log("我叫柯南") } } console.log("person.eat輸出函數(shù)",person.eat) person.eat(); //直接輸出 我餓了,想吃飯
我們需要注意的是:person.eat和person.eat()的區(qū)別
- person.eat是輸出函數(shù)
- person.eat()是調(diào)用函數(shù)
2.使用new字符創(chuàng)建對(duì)象
var person2=new Object(); person2.name='柯南' person2.age='21' person2.sex='男' person2.eat=function(){ console.log("我餓了,想吃飯") } person2.say=function(){ console.log("我叫柯南") } console.log( '性別',person2.sex ) //輸出男
上面這兩種方式去創(chuàng)建對(duì)象的缺點(diǎn):
雖然上面這兩種都可以去創(chuàng)建對(duì)象
但是我們創(chuàng)建出來(lái)的對(duì)象壓根就不知道是什么類(lèi)型?
當(dāng)然我們知道他們是OBject類(lèi)型
這個(gè)時(shí)候我們就需要使用自定義構(gòu)造函數(shù)去創(chuàng)建對(duì)象了
3.自定構(gòu)造函數(shù)創(chuàng)建對(duì)象
function Person(name,age,sex,like){ console.log('沒(méi)有給like形參傳遞值就是undeined',like) // 這里的this指向的是Person這個(gè)對(duì)象 console.log('this',this) this.name=name; this.age=age; this.sex=sex; this.say=function(){ console.log("我叫",name) } } //這一行代碼表示的是創(chuàng)建一個(gè)對(duì)象 //同時(shí)實(shí)例化一個(gè)對(duì)象 //并且給這個(gè)對(duì)象的屬性進(jìn)行初始化 //所以這一行代碼并不簡(jiǎn)單 let per1=new Person('柯南',19,'男'); per1.say(); console.log(per1 instanceof Person);//true
現(xiàn)在我們知道了per1
是屬于Person
類(lèi)型的,這就是自定構(gòu)造函數(shù)創(chuàng)建對(duì)象的優(yōu)勢(shì),我們知道它創(chuàng)建的對(duì)象是哪個(gè)類(lèi)型的
ps:構(gòu)造函數(shù)通常首字母大寫(xiě)
當(dāng)我們new一個(gè)對(duì)象的時(shí)候做了四件事情:
通過(guò)創(chuàng)建自定義對(duì)象我們明白了當(dāng)我們new一個(gè)對(duì)象的時(shí)候做了四件事情
- 1.開(kāi)辟空間存儲(chǔ)當(dāng)前對(duì)象
- 2.把
this
設(shè)置為當(dāng)前對(duì)象 - 3.設(shè)置屬性和方法
- 4.把
this
對(duì)象返回
4.工廠模式創(chuàng)建對(duì)象
function createObj(name,age) { let obj=new Object(); obj.name=name; obj.age=age; obj.sayHi=function(){ console.log(obj.name) } return obj; } let per=createObj('司藤',200) console.log(per.age); //200 per.sayHi(); //司藤
到此這篇關(guān)于 JS創(chuàng)建對(duì)象的四種方式的文章就介紹到這了,更多相關(guān) JS創(chuàng)建對(duì)象的四種方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS創(chuàng)建對(duì)象常用設(shè)計(jì)模式工廠構(gòu)造函數(shù)及原型
- JS對(duì)象創(chuàng)建與繼承的匯總梳理
- java鏈?zhǔn)絼?chuàng)建json對(duì)象的實(shí)現(xiàn)
- JavaScript函數(shù)this指向問(wèn)題詳解
- 詳解JavaScript原型對(duì)象的this指向問(wèn)題
- JavaScript 中this指向問(wèn)題案例詳解
- JavaScript函數(shù)中this指向問(wèn)題詳解
- JavaScript中的this指向問(wèn)題詳解
- JavaScript創(chuàng)建對(duì)象的幾種方式及關(guān)于this指向問(wèn)題
相關(guān)文章
微信小程序中使用Promise進(jìn)行異步流程處理的實(shí)例詳解
這篇文章主要介紹了微信小程序中使用Promise進(jìn)行異步流程處理的實(shí)例詳解的相關(guān)資料,這里詳細(xì)說(shuō)明該如何使用Promise 來(lái)進(jìn)行異步流程的處理,提供具體實(shí)現(xiàn)步驟,需要的朋友可以參考下2017-08-08gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐
這篇文章主要為大家介紹了gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例
這篇文章主要介紹了微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01uniapp五分鐘實(shí)現(xiàn)刷抖音小程序教程示例
這篇文章主要為大家介紹了uniapp五分鐘實(shí)現(xiàn)刷抖音小程序教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序 input輸入框詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 input輸入框詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序 wx.request方法的異步封裝實(shí)例詳解
這篇文章主要介紹了微信小程序 wx.request方法的異步封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05JS實(shí)現(xiàn)簡(jiǎn)單的操作桿旋轉(zhuǎn)示例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)簡(jiǎn)單的操作桿旋轉(zhuǎn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01