對象
- JavaScript 是一門面向?qū)ο竽_本語言骗污,在 JavaScript 中适肠,萬物皆對象。而對象只是帶有屬性和方法的特殊數(shù)據(jù)類型制圈,它擁有屬性和方法;
- 屬性畔况,可以理解為對象的特征鲸鹦;
- 方法,是能夠在對象上執(zhí)行的動作跷跪,也就是對象能夠做什么馋嗜,其實也就是寫在對象里的函數(shù)。如果我們把汽車當(dāng)成一個對象吵瞻,那么汽車的顏色和大小就是對象的屬性葛菇,汽車的啟動和剎車就是對象的方法。
創(chuàng)建對象的方法
關(guān)于原型橡羞、原型鏈和原型繼承請看 這里眯停。
方法一:通過字面量創(chuàng)建對象
代碼:
<script>
// 1. 聲明一個空對象
var person1 = {};
// 2. 給對象添加屬性和方法
person1.name = 'Li Si 01';
person1.say = function () {
console.log('Hello, I am ' + this.name + '.');
};
// 3. 訪問對象的屬性和方法
console.log(person1.name);
person1.say();
</script>
也可以這樣寫:
<script>
// 聲明一個對象
var person1 = {
name: 'Li Si 01',
say: function () {
console.log('Hello, I am ' + this.name + '.');
}
};
</script>
效果演示:
字面量.png
方法二:通過 new 關(guān)鍵字來創(chuàng)建對象
代碼:
<script>
// 1. 聲明一個對象
var person2 = new Object();
// 2. 為對象添加屬性和方法
person2.name = 'Li Si 02';
person2.say = function () {
console.log('Hello, I am ' + this.name + '.');
};
// 3. 訪問對象的屬性和方法
console.log(person2.name);
person2.say();
</script>
方法一和方法二不夠智能,每次實例化一個對象都要寫一大堆的代碼卿泽,在實際中比較少用莺债。
效果演示:
new.png
方法三:通過工廠模式創(chuàng)建對象
代碼:
<script>
function createPerson(name) {
// 1. 聲明一個空對象
var obj = {};
// 2. 為對象添加屬性和方法
obj.name = name;
obj.say = function () {
console.log('Hello, I am ' + obj.name + '.');
};
// 3. 返回對象
return obj;
}
// 4. 實例化對象
var person3 = createPerson('Li Si 03');
// 5. 訪問對象的屬性和方法
console.log(person3.name);
person3.say();
</script>
效果演示:
工廠模式.png
方法四:通過構(gòu)造函數(shù)創(chuàng)建對象
在 JavaScript 中,通過定義構(gòu)造函數(shù)來定義一個類签夭,這時的構(gòu)造函數(shù)就是一個類齐邦。
代碼:
<script>
// 1. 聲明一個有參構(gòu)造函數(shù)
function Person(name) {
// 2. 為對象添加屬性和方法
this.name = name;
this.say = function () {
console.log('Hello, I am ' + this.name + '.');
}
}
// 3. 實例化對象
var person4 = new Person('Li Si 04');
// 4. 訪問對象的屬性和方法
console.log(person4.name);
person4.say();
</script>
效果演示:
構(gòu)造函數(shù).png
方法四咋一看是不錯,但是太耗內(nèi)存第租,每次實例化一個對象都要再一次聲明所有的屬性和方法措拇,假如有一些屬性或方法是相同的,這樣做就很消耗內(nèi)存慎宾,也沒必要丐吓。
方法五:通過原型模式創(chuàng)建對象
代碼:
<script>
// 1. 聲明一個無參構(gòu)造函數(shù)
function Person() {
}
// 2. 為對象添加屬性和方法
Person.prototype.name = 'Li Si 05';
Person.prototype.say = function () {
console.log('Hello, I am ' + this.name + '.');
};
// 3. 實例化對象
var person5 = new Person();
// 4. 訪問對象的屬性和方法
console.log(person5.name);
person5.say();
</script>
通過原型創(chuàng)建對象的好處就是可以將一些對象公有的屬性和方法移到這些實例共有的原型上浅悉,缺點就是這樣寫會導(dǎo)致對象所有的屬性值和方法都是相同的。
效果演示:
原型模式.png
方法六:構(gòu)造函數(shù)和原型組合模式
代碼:
<script>
// 1. 聲明一個有參構(gòu)造函數(shù)
function Person(name) {
this.name = name;
}
// 2. 為對象的原型添加屬性和方法
Person.prototype.what = 'Hello';
Person.prototype.say = function () {
console.log(this.name + ' say ' + this.what + ' to you.');
};
// 3. 實例化對象
var person6 = new Person('Li Si 06');
// 4. 訪問對象的屬性和方法
console.log(person6.name);
person6.say();
</script>
效果演示:
構(gòu)造函數(shù)和原型組合模式.png
方法六結(jié)合了構(gòu)造函數(shù)和原型模式的優(yōu)點汰蜘,將對象共有的屬性和方法移到原型里仇冯,對象特有的屬性和方法寫在構(gòu)造函數(shù)里。
參考資料: