<pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html">首先解釋一下什麼是對象:
<span> </span>在JS中對象是對一種具體的事物的抽象。與別的語言不同,JS中沒有class類這種說法,所以也就沒有類的對象這種說法。
面向對象和基於對象的區別:
<span> </span>JS的對象是基於對象,無法創建自定義類型,不能很好地支持繼承和多態。
<span> </span>C,C++,JAVA,C#.....這些語言是面向對象的,與JS相反,能夠創建自定義類型,也很好地支持繼承和多態。
JS不支持繼承和多態:
<span> </span>繼承:函數名相同,函數的參數或類型不同
<span> </span>多態:相同的消息賦給不同的對象會有不同的執行結果。
下面讓我們跟着下面的代碼學會如何一步一步學會使用構造函數創建對象:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//第一 步:創建一個對象,並給對象添加屬性和方法
<span> </span>// 使用new關鍵字,通過調用構造函數Object()來創建一個student學生“空對象”(這樣說其實並不嚴謹)
// var student = new Object();
<span> </span>// 給對象添加屬性和方法
// student.name = "za";
// student.age = "19";
// student.height = "183cm";
// student.speak = function (word) {
// console.log(word + "姓名:" + student.name + "年齡:" + student.age + "身高:" + student.height);
// }
//<span> </span>輸出對象屬性
// console.log(student);
//<span> </span>調用對象方法
// student.speak("這是我的學生信息:");
這樣創建一個一般的對象的工作就完成了。那麼如果又有一個新的學生加入,爲了記錄這個新學生的一些屬性和方法是不是又要將上面的代碼重寫一遍呢???答案很顯然,如果照上面的做法,要是有一萬個學生,那上面的代碼是不是就要寫一萬遍?!!這樣很顯然是很不科學的做法。爲了解決這個問題,我們肯定就要找方法!那麼說到方法,方法?我們是不是可以通過函數來解決這個問題?那麼接下來第二步就小試牛刀一把。
//第二步:使用函數創建多個對象
<span> </span>//<span> </span> 先定義一個創建對象的函數,輸入對象的屬性作爲參數
// function createOb(name, age, height) {
<span> </span>// 依然是通過new關鍵字和Object()構造函數創建一個“空對象”
// var student = new Object();
// student.name = name;
// student.age = age;
// student.height = height;
<span> </span>//<span> </span> 使用函數表達式的方法給student對象創建一個行爲,也就是函數
// student.speak = function (word) {
// console.log(word + "姓名:" + student.name + "年齡:" + student.age + "身高:" + student.height);
// };
<span> </span>// 函數的三要素之一:返回值,返回我們創建的對象
// return student;
// }
<span> </span>// 使用我們創建的函數創建對象
// var c1 = createOb("za", 19, "183cm");
// var c2 = createOb("ls", 10, "100cm");
// 輸出對象屬性
// console.log(c1);
// console.log(c2);
// 調用對象方法
// c1.speak("這是我的信息");
// c2.speak("這是我的信息");
通過以上代碼,我們就學會使用函數創建對象。但是我們會發現,無論是使用直接創建對象的方法來創建對象還是通過使用函數來創建對象,我們都會用到這樣一個語句:var 對象名 = new Object();之前我們也說了這是通過構造函數來創建對象,只是這個構造函數是系統的,而不是我們自己的。經過研究發現使用new關鍵字+構造函數創建對象會經過如下四步:
<p><span> </span>1、首先,內存開闢空間,存儲新創建的對象</p><p><span> </span>2、然後,會把<span style="font-family: Calibri;">this</span><span style="font-family: 宋體;">設置爲當前對象</span></p><p><span> </span>3、接下來,執行函數內部的代碼,設置對象的屬性和方法</p><p><span> </span>4、最後,返回創建的對象</p> 我們發現兩點:構造函數方法創建對象,系統會自動返回創建對象,所以我們就不用return 對象,加上this又可以指代當前對象,綜合這兩點我們發現我們可以不用再函數內部創建空對象,再返回這個對象,但是爲了表示函數內部的屬性指的是對象的屬性,因此我們就用到了this
經過以上分析,我們可以試着使用構造函數的方法來創建對象:
//第三步:使用構造函數創建多個對象
<span> </span>// 依然是先創建一個函數,將對象的屬性作爲參數
// function CreateOb(name, age, height) {
<span> </span>// 使用this指代對象,來爲對象的屬性賦值
// this.name = name;
// this.age = age;
// this.height = height;
<span> </span>// 同樣的道理創建對象的方法
// this.speak = function (word) {
// console.log(word + "姓名:" + this.name + "年齡:" + this.age + "身高:" + this.height);
// }
// }
<span> </span>// 使用我們的創建的構造函數創建對象,因爲我們使用的是構造函數,千萬記得new(程序媛的對象都是new出來的)
// var C1 = new CreateOb("za", 19, "183cm");
// var C2 = new CreateOb("ls", 10, "100cm");
// //輸出對象屬性
// console.log(C1);
// console.log(C2);
// //調用對象方法
// C1.speak("這是我的信息:");
// C2.speak("這是我的信息:");
</script>
</head>
<body>
</body>
</html>
總結:
<p>使用函數創造對象跟使用構造函數創建對象在書寫上的區別:</p><p>函數名:構造函數的函數名首字母必須大寫!</p><p>函數體:<span style="background: rgb(255, 255, 0);">普通函數</span>的函數體必須先創建一個空對象,然後對空對象添加屬性和方法,最後返回這個對象,並且在給這個對象添加屬性時可以使用:對象名<span style="font-family: Calibri;">.</span><span style="font-family: 宋體;">屬性</span><span style="font-family: Arial, Helvetica, sans-serif;">的方法。</span><span style="font-family: Arial, Helvetica, sans-serif; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="background-color: rgb(255, 255, 0);">構造函</span><span style="background-color: rgb(255, 255, 255);"><span style="font-family: 宋體;"> </span></span><span style="background-color: rgb(255, 255, 0);">數</span></span><span style="font-family: Arial, Helvetica, sans-serif;">剛開始不用定義空對象,同樣最後也不用返回這個對象,只需添加對象的屬性和方法,但是在添加屬性和方法的時候爲了顯示是當前對象的</span><span style="font-family: Arial, Helvetica, sans-serif;">,所以就用到了:</span><span style="font-family: Calibri;">this.</span><span style="font-family: 宋體;">屬<span> </span>性這種方法。</span></p><p>使用函數構造對象的時候:</p><p><span> </span>普通函數只需定義對象(也就是定義普通變量的方法)然後調用普通函數即可。 構造函數需要先定義對象,再通過<span style="font-family: Calibri;">new</span><span style="font-family: 宋體;">方法調用構造函數。</span></p><p>相同點:</p><p><span> </span>無論普通函數還是構造函數,在函數內部都是通過<span style="background: rgb(255, 255, 0);">函數表達式創建對象的方法</span>的。</p><p><span> </span>其他在屬性的使用上和對象的方法的調用上並沒有太大區別。</p>