JS創(chuàng)建對象的四種方式
創(chuàng)建對象的4種方式:
- 1.字面量的方式去創(chuàng)建對象
- 2.使用
new字符創(chuàng)建對象 - 3.自定義構(gòu)造函數(shù)
- 4.工廠模式創(chuàng)建對象
對象是指:具有屬性和方法
1.通過字面量的方式去創(chuàng)建對象
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)建對象
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)建對象的缺點:
雖然上面這兩種都可以去創(chuàng)建對象
但是我們創(chuàng)建出來的對象壓根就不知道是什么類型?
當(dāng)然我們知道他們是OBject類型
這個時候我們就需要使用自定義構(gòu)造函數(shù)去創(chuàng)建對象了
3.自定構(gòu)造函數(shù)創(chuàng)建對象
function Person(name,age,sex,like){
console.log('沒有給like形參傳遞值就是undeined',like)
// 這里的this指向的是Person這個對象
console.log('this',this)
this.name=name;
this.age=age;
this.sex=sex;
this.say=function(){
console.log("我叫",name)
}
}
//這一行代碼表示的是創(chuàng)建一個對象
//同時實例化一個對象
//并且給這個對象的屬性進行初始化
//所以這一行代碼并不簡單
let per1=new Person('柯南',19,'男');
per1.say();
console.log(per1 instanceof Person);//true
現(xiàn)在我們知道了per1是屬于Person類型的,這就是自定構(gòu)造函數(shù)創(chuàng)建對象的優(yōu)勢,我們知道它創(chuàng)建的對象是哪個類型的
ps:構(gòu)造函數(shù)通常首字母大寫

當(dāng)我們new一個對象的時候做了四件事情:
通過創(chuàng)建自定義對象我們明白了當(dāng)我們new一個對象的時候做了四件事情
- 1.開辟空間存儲當(dāng)前對象
- 2.把
this設(shè)置為當(dāng)前對象 - 3.設(shè)置屬性和方法
- 4.把
this對象返回
4.工廠模式創(chuàng)建對象
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)建對象的四種方式的文章就介紹到這了,更多相關(guān) JS創(chuàng)建對象的四種方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解
這篇文章主要為大家介紹了JS開發(fā)Blob和FileReader構(gòu)造函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
PerformanceObserver自動獲取首屏?xí)r間實現(xiàn)示例
今天給大家介紹一個非常好用的瀏覽器api:?PerformanceObserver?,?我們可以用它來獲取首屏、白屏的時間,就不用再麻煩地手動去計算了2022-07-07
Three.js?Interpolant實現(xiàn)動畫插值
這篇文章主要為大家介紹了Three.js?Interpolant實現(xiàn)動畫插值示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02
JS前端以輕量fabric.js實現(xiàn)示例理解canvas
這篇文章主要為大家介紹了JS前端以輕量fabric.js實現(xiàn)示例理解canvas可視化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08

