創(chuàng)建對(duì)象的幾種方式
① 字面量的方式創(chuàng)建對(duì)象(@)
② 內(nèi)置構(gòu)造函數(shù)的方式來創(chuàng)建對(duì)象
③ 簡(jiǎn)單工廠函數(shù)的方式來創(chuàng)建對(duì)象
④ 自定義構(gòu)造函數(shù)的方式來創(chuàng)建對(duì)象
-
字面量方式創(chuàng)建對(duì)象
基本寫法
var book1 = {
name:"聲名狼藉者的生活",
price:42.00,
author:"福柯",
press:"北京大學(xué)出版社",
read:function () {
console.log("我的書名為:聲名狼藉者的的生活,作者為福柯....");
}
};
-
①字面量的方式來創(chuàng)建對(duì)象示例
<script>
var book1 = {
name:"聲名狼藉者的生活",
price:42.00,
author:"福柯",
press:"北京大學(xué)出版社",
read:function () {
console.log("我的書名為:聲名狼藉者的的生活,作者為福柯....");
}
};
var book2 = {
name:"人性的枷鎖",
price:49.00,
author:"毛姆",
press:"華東師范大學(xué)出版社",
read:function () {
console.log("我的書名為:華東師范大學(xué)出版社,作者為毛姆....");
}
};
var book3 = {
name:"悟空傳",
price:28.00,
author:"今何在",
press:"湖南文藝出版社",
read:function () {
console.log("我的書名為:悟空傳,作者為今何在....");
}
};
//02 打印對(duì)象的屬性,調(diào)用對(duì)象的方法
console.log(book1.name);
console.log(book1.author);
console.log(book1.price);
console.log(book1.press);
book1.read();
console.log("_______________");
console.log(book2.name);
console.log(book2.author);
console.log(book2.price);
console.log(book2.press);
book2.read();
console.log("_______________");
console.log(book3.name);
console.log(book3.author);
console.log(book3.price);
console.log(book3.press);
book1.read();
console.log("_______________");
</script>
03 思考:以字面量的方式創(chuàng)建對(duì)象有哪些利弊?
存在的問題
[01] 代碼復(fù)用性差
[02] 如果要?jiǎng)?chuàng)建大量的同類型對(duì)象，則需要些大量重復(fù)性代碼
-
JS中有哪些內(nèi)置構(gòu)造函數(shù)
String
Number
Boolean
注意：(區(qū)別于string number boolean)
Date
Array
Function
Object
RegExp
基本寫法
var book1 = new Object();
book1.name = "聲名狼藉者的生活";
book1.price = 42.00;
book1.author = "福柯";
book1.press = "北京大學(xué)出版社";
book1.read = function () {
console.log("我的書名為:聲名狼藉者的的生活,作者為福柯....");
};
問題
1 創(chuàng)建的對(duì)象無法復(fù)用,復(fù)用性差
02 如果需要?jiǎng)?chuàng)建多個(gè)同類型的對(duì)象,如(書籍)則需要寫大量重復(fù)的代碼,代碼的冗余度高
-
②內(nèi)置構(gòu)造函數(shù)的方式來創(chuàng)建對(duì)象
<script>
//01 使用內(nèi)置構(gòu)造函數(shù)的方式來創(chuàng)建對(duì)象
var book1 = new Object();
book1.name = "聲名狼藉者的生活";
book1.price = 42.00;
book1.author = "福柯";
book1.press = "北京大學(xué)出版社";
book1.read = function () {
console.log("我的書名為:聲名狼藉者的的生活,作者為福柯....");
};
var book2 = new Object();
book2.name = "人性的枷鎖";
book2.price = 49.00;
book2.author = "毛姆";
book2.press = "華東師范大學(xué)出版社";
book2.read = function () {
console.log("我的書名為:人性的枷鎖,作者為毛姆....");
};
var book3 = new Object();
book3.name = "悟空傳";
book3.price = 28.00;
book3.author = "今何在";
book3.press = "湖南文藝出版社";
book3.read = function () {
console.log("我的書名為:悟空傳,作者為今何在....");
};
//02 打印對(duì)象的屬性,調(diào)用對(duì)象的方法
console.log(book1.name);
console.log(book1.author);
console.log(book1.price);
console.log(book1.press);
book1.read();
console.log("_______________");
console.log(book2.name);
console.log(book2.author);
console.log(book2.price);
console.log(book2.press);
book2.read();
console.log("_______________");
console.log(book3.name);
console.log(book3.author);
console.log(book3.price);
console.log(book3.press);
book3.read();
console.log("_______________");
思考:能夠把創(chuàng)建同類型對(duì)象的過程封裝起來,提高代碼的復(fù)用性?
</script>
問題:使用內(nèi)置構(gòu)造函數(shù)的方式和字面量的方式來創(chuàng)建對(duì)象差不多,都存在以下問題:
01 創(chuàng)建的對(duì)象無法復(fù)用,復(fù)用性差
02 如果需要?jiǎng)?chuàng)建多個(gè)同類型的對(duì)象,如(書籍)則需要寫大量重復(fù)的代碼,代碼的冗余度高
-
③ 簡(jiǎn)單工廠函數(shù)的方式來創(chuàng)建對(duì)象
簡(jiǎn)單工廠函數(shù)的方式來創(chuàng)建對(duì)象 (本質(zhì)就是對(duì)之前創(chuàng)建對(duì)象的過程進(jìn)行封裝)
<script>
//01 封裝創(chuàng)建對(duì)象的過程
function createBook () {
var book = new Object();
book.name = "聲名狼藉者的生活";
book.price = 42.00;
book.author = "福柯";
book.press = "北京大學(xué)出版社";
book.read = function () {
console.log("我的書名為:聲名狼藉者的的生活,作者為福柯....");
};
return book;
}
//02 使用封裝好的工廠函數(shù)來創(chuàng)建對(duì)象
var book1 = createBook();
var book2 = createBook();
//03 打印對(duì)象的屬性并調(diào)用對(duì)象的方法
console.log(book1.name);
console.log(book2.name);
book1.read();
book2.read();
console.log("_________________________");
//04 說明:以上代碼確實(shí)能夠快速簡(jiǎn)單的創(chuàng)建出新的對(duì)象,但是創(chuàng)建出來的對(duì)象內(nèi)部的屬性和方法相同,這并不是我們想要的。
//05 對(duì)上面的工廠函數(shù)進(jìn)行改進(jìn)
//改進(jìn)思路:封裝不變的部分,提取變化的部分作為參數(shù)
function createBookNew (name,price,author,press) {
var book = new Object();
book.name = name;
book.price = price;
book.author = author;
book.press = press;
book.read = function () {
console.log("我的書名為:"+book.name+",作者為"+book.author+"....");
};
return book;
}
//06 使用新的工廠函數(shù)來創(chuàng)建對(duì)象
var book1 = createBookNew("聲名狼藉者的的生活","42.00","福柯","北京大學(xué)出版社");
var book2 = createBookNew("人性的枷鎖","49.00","毛姆","華東師范大學(xué)出版社");
var book3 = createBookNew("悟空傳","28.00","今何在","湖南文藝出版社");
//07 打印對(duì)象的屬性,調(diào)用對(duì)象的方法
console.log(book1.name);
console.log(book2.name);
console.log(book3.name);
book1.read();
book2.read();
book3.read();
</script>
工廠函數(shù)說明
工廠函數(shù)方式創(chuàng)建對(duì)象其本質(zhì)是對(duì)內(nèi)置構(gòu)造函數(shù)創(chuàng)建對(duì)象的過程進(jìn)行了封裝
適用于大規(guī)模“批量生產(chǎn)”同類型的對(duì)象
function createBook (name,price,author,press) {
//001 參數(shù) = 原料
var book = new Object();
//002 創(chuàng)建對(duì)象并設(shè)置對(duì)象的屬性和方法 = 對(duì)原料進(jìn)行加工
book.name = name;
book.price = price;
book.author = author;
book.press = press;
book.read = function () {
console.log("我的書名為:"+book.name+",作者為"+book.author+"....");
};
//003 把處理好的對(duì)象返回給我們 == 產(chǎn)品出廠
return book;
}
-
封裝思路
使用函數(shù)把固定不變的部分封裝起來，變化的部分提取為函數(shù)的參數(shù)
-
工廠函數(shù)創(chuàng)建對(duì)象的實(shí)現(xiàn)過程
① 提供一個(gè)創(chuàng)建對(duì)象的函數(shù)（參數(shù)）
② 在該函數(shù)內(nèi)部使用new 關(guān)鍵字和Object構(gòu)造器創(chuàng)建對(duì)象
③ 設(shè)置對(duì)象的屬性
④ 設(shè)置對(duì)象的方法
⑤ 返回對(duì)象
-
④ 自定義構(gòu)造函數(shù)的方式來創(chuàng)建對(duì)象
<script>
//00 回顧:簡(jiǎn)單工廠函數(shù)創(chuàng)建對(duì)象
function createBook (name,price,author,press) {
//001 參數(shù) = 原料
var book = new Object();
//002 創(chuàng)建對(duì)象并設(shè)置對(duì)象的屬性和方法 = 對(duì)原料進(jìn)行加工
book.name = name;
book.price = price;
book.author = author;
book.press = press;
book.read = function () {
console.log("我的書名為:"+book.name+",作者為"+book.author+"....");
};
//003 把處理好的對(duì)象返回給我們 == 產(chǎn)品出廠
return book;
}
var book1 = createBook("聲名狼藉者的的生活","42.00","福柯","北京大學(xué)出版社");
var book2 = createBook("人性的枷鎖","49.00","毛姆","華東師范大學(xué)出版社");
var book3 = createBook("悟空傳","28.00","今何在","湖南文藝出版社");
//01 相關(guān)說明
//001 構(gòu)造函數(shù)和普通函數(shù)的區(qū)別:首字母大寫
//002 構(gòu)造函數(shù)的作用:用于完成對(duì)象的初始化
//003 new關(guān)鍵字的作用:創(chuàng)建對(duì)象
//02 自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象的基本寫法
function CreateBook (name,price,author,press) {
//var book = new Object(); //外部使用new關(guān)鍵字,則內(nèi)部會(huì)自動(dòng)創(chuàng)建對(duì)象并賦值給this
this.name = name;
this.price = price;
this.author = author;
this.press = press;
this.read = function () {
console.log("我的書名為:"+this.name+",作者為"+this.author+"....");
};
//return book; //創(chuàng)建出來的對(duì)象默認(rèn)自動(dòng)返回
}
var b1 = new CreateBook("聲名狼藉者的的生活","42.00","福柯","北京大學(xué)出版社");
var b2 = new CreateBook("人性的枷鎖","49.00","毛姆","華東師范大學(xué)出版社");
var b3 = new CreateBook("悟空傳","28.00","今屬性,并調(diào)用對(duì)象的方法測(cè)試
console.log("________________________");
console.log(b1.author);
console.log(b2.author);
console.log(b3.author);
b1.read();
b2.read();
b3.read();
//08 自定義構(gòu)造函數(shù)通用寫法
function 構(gòu)造函數(shù)名(參數(shù)1,參數(shù)2,參數(shù)3...) {
//設(shè)置對(duì)象的屬性
this.屬性01 = 參數(shù)1;
this.屬性02 = 參數(shù)2;
//設(shè)置對(duì)象的方法
this.方法01 = function () {
//.....
};
this.方法02 = function () {
//.....
}
}
//09 自定義構(gòu)造函數(shù)方式創(chuàng)建對(duì)象
var 對(duì)象01 = new 構(gòu)造函數(shù)名(實(shí)參01,實(shí)參02,實(shí)參03...);
var 對(duì)象02 = new 構(gòu)造函數(shù)名(實(shí)參01,實(shí)參02,實(shí)參03...);
</script>
-
04 自定義構(gòu)造函數(shù)和簡(jiǎn)單工廠函數(shù)的區(qū)別
① 函數(shù)的首字母大寫(用于區(qū)別構(gòu)造函數(shù)和普通函數(shù))
② 創(chuàng)建對(duì)象的過程是由new關(guān)鍵字實(shí)現(xiàn)
③ 在構(gòu)造函數(shù)內(nèi)部會(huì)自動(dòng)的創(chuàng)建新對(duì)象,并賦值給this指針
④ 自動(dòng)返回創(chuàng)建出來的對(duì)象 -
05 構(gòu)造函數(shù)的執(zhí)行過程:
① 使用new關(guān)鍵字創(chuàng)建對(duì)象
② 把新創(chuàng)建出來的對(duì)象賦值給this
③ 在構(gòu)造函數(shù)內(nèi)部,使用this為新創(chuàng)建出來的對(duì)象設(shè)置屬性和方法
④ 默認(rèn)返回新創(chuàng)建的對(duì)象(普通函數(shù)如果不顯示的return則默認(rèn)返回undefined)。//06 思考:在構(gòu)造函數(shù)內(nèi)部,可以寫其他"無關(guān)的代碼"嗎?
-
07 構(gòu)造函數(shù)的返回值說明:
- 01 如果在構(gòu)造函數(shù)中沒有顯示的return,則默認(rèn)返回的是新創(chuàng)建出來的對(duì)象
- 02 如果在構(gòu)造函數(shù)中顯示的re何在","湖南文藝出版社");
- 03 打印對(duì)象的turn,則依照具體的情況處理
- [01] return 的是對(duì)象,則直接返回該對(duì)象,取而代之本該默認(rèn)返回的新對(duì)象
- [02] return 的是null或基本數(shù)據(jù)類型值,則返回新創(chuàng)建的對(duì)象
-
構(gòu)造函數(shù)方式創(chuàng)建對(duì)象存在的問題
每次創(chuàng)建對(duì)象,都會(huì)重新創(chuàng)建函數(shù)，那么如果創(chuàng)建的對(duì)象數(shù)量很多,而對(duì)象方法內(nèi)部的實(shí)現(xiàn)一模一樣,則造成了資源浪費(fèi)
