定義類或對象

學習總結:

工廠方式

原始的方式(對象創建后動態定義對象的屬性)

var oCar = new Object;
oCar.color = "blue";
oCar.doors = 4;
oCar.mpg = 25;
oCar.showColor = function() {alert(this.color);
};



創建對象 car,屬性:它的顏色是藍色,有四個門,每加侖油可以跑 25 英里。最后一個屬性實際上是指向函數的指針,意味著該屬性是個方法。
有一個問題,就是可能需要創建多個 car 的實例。

解決方案:工廠方式(函數封裝)

function createCar(sColor,iDoors,iMpg) {var oTempCar = new Object;oTempCar.color = sColor;oTempCar.doors = iDoors;oTempCar.mpg = iMpg;oTempCar.showColor = function() {alert(this.color);};return oTempCar;
}var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);oCar1.showColor();		//輸出 "red"
oCar2.showColor();		//輸出 "blue"



這使兩個對象具有相同的屬性,卻有不同的屬性值。
每次調用函數 createCar(),都要創建新函數 showColor(),意味著每個對象都有自己的 showColor() 版本。而事實上,每個對象都共享同一個函數。

在工廠函數外定義對象的方法 可避免以上問題

function showColor() {alert(this.color);
}function createCar(sColor,iDoors,iMpg) {var oTempCar = new Object;oTempCar.color = sColor;oTempCar.doors = iDoors;oTempCar.mpg = iMpg;oTempCar.showColor = showColor;return oTempCar;
}var oCar1 = createCar("red",4,23);
var oCar2 = createCar("blue",3,25);oCar1.showColor();		//輸出 "red"
oCar2.showColor();		//輸出 "blue"



從功能上講,這樣解決了重復創建函數對象的問題;但是從語義上講,該函數不太像是對象的方法。

構造函數方式

function Car(sColor,iDoors,iMpg) {this.color = sColor;this.doors = iDoors;this.mpg = iMpg;this.showColor = function() {alert(this.color);};
}var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);



第一步選擇類名,即構造函數的名字。根據慣例,這個名字的首字母大寫,以使它與首字母通常是小寫的變量名分開。除了這點不同,構造函數看起來很像工廠函數。

與工廠方式的差別:
首先在構造函數內沒有創建對象,而是使用 this 關鍵字。
使用 new 運算符構造函數時,在執行第一行代碼前先創建一個對象,只有用 this 才能訪問該對象。
然后可以直接賦予 this 屬性,默認情況下是構造函數的返回值(不必明確使用 return 運算符)。

現在,用 new 運算符和類名 Car 創建對象,就更像 ECMAScript 中一般對象的創建方式了。
就像工廠函數,構造函數會重復生成函數,為每個對象都創建獨立的函數版本。
不過,與工廠函數相似,也可以用外部函數重寫構造函數,同樣地,這么做語義上無任何意義。這正是下面要講的原型方式的優勢所在。

原型方式

function Car() {
}Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.showColor = function() {alert(this.color);
};var oCar1 = new Car();
var oCar2 = new Car();



該方式利用了對象的 prototype 屬性,可以把它看成創建新對象所依賴的原型。
這里,首先用空構造函數來設置類名。然后所有的屬性和方法都被直接賦予 prototype 屬性。

在這段代碼中,首先定義構造函數(Car),其中無任何代碼。
接下來的幾行代碼,通過給 Car 的 prototype 屬性添加屬性去定義 Car 對象的屬性。
調用 new Car() 時,原型的所有屬性都被立即賦予要創建的對象,意味著所有 Car 實例存放的都是指向 showColor() 函數的指針。
從語義上講,所有屬性看起來都屬于一個對象,因此解決了前面兩種方式存在的問題。
此外,使用這種方式,還能用 instanceof 運算符檢查給定變量指向的對象的類型。

alert(oCar1 instanceof Car);	//輸出 "true"



原型方式的問題
這個構造函數沒有參數。
使用原型方式,不能通過給構造函數傳遞參數來初始化屬性的值,因為 Car1 和 Car2 的 color 屬性都等于 "blue",doors 屬性都等于 4,mpg 屬性都等于 25。
這意味著必須在對象創建后才能改變屬性的默認值,真正的問題出現在屬性指向的是對象,而不是函數時。
函數共享不會造成問題,但對象卻很少被多個實例共享。

function Car() {
}Car.prototype.color = "blue";
Car.prototype.doors = 4;
Car.prototype.mpg = 25;
Car.prototype.drivers = new Array("Mike","John");
Car.prototype.showColor = function() {alert(this.color);
};var oCar1 = new Car();
var oCar2 = new Car();oCar1.drivers.push("Bill");alert(oCar1.drivers);	//輸出 "Mike,John,Bill"
alert(oCar2.drivers);	//輸出 "Mike,John,Bill"



屬性 drivers 是指向 Array 對象的指針,該數組中包含兩個名字 "Mike" 和 "John"。
由于 drivers 是引用值,Car 的兩個實例都指向同一個數組。
這意味著給 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。
輸出這兩個指針中的任何一個,結果都是顯示字符串 "Mike,John,Bill"。
由于創建對象時有這么多問題,需要聯合使用構造函數和原型方式。

混合的構造函數/原型方式

function Car(sColor,iDoors,iMpg) {this.color = sColor;this.doors = iDoors;this.mpg = iMpg;this.drivers = new Array("Mike","John");
}Car.prototype.showColor = function() {alert(this.color);
};var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);oCar1.drivers.push("Bill");alert(oCar1.drivers);	//輸出 "Mike,John,Bill"
alert(oCar2.drivers);	//輸出 "Mike,John"



聯合使用構造函數和原型方式,就可像用其他程序設計語言一樣創建對象。
這種概念非常簡單,即用構造函數定義對象的所有非函數屬性,用原型方式定義對象的函數屬性(方法)。
結果是,所有函數都只創建一次,而每個對象都具有自己的對象屬性實例。

現在就更像創建一般對象了。
所有的非函數屬性都在構造函數中創建,意味著又能夠用構造函數的參數賦予屬性默認值了。
因為只創建 showColor() 函數的一個實例,所以沒有內存浪費。
此外,給 oCar1 的 drivers 數組添加 "Bill" 值,不會影響到 oCar2 的數組,所以輸出這些數組的值時,oCar1.drivers 顯示的是 "Mike,John,Bill",而 oCar2.drivers 顯示的是 "Mike,John"。
因為使用了原型方式,所以仍然能利用 instanceof 運算符來判斷對象的類型。

動態原型方法

function Car(sColor,iDoors,iMpg) {this.color = sColor;this.doors = iDoors;this.mpg = iMpg;this.drivers = new Array("Mike","John");if (typeof Car._initialized == "undefined") {Car.prototype.showColor = function() {alert(this.color);};Car._initialized = true;}
}



動態原型方法的基本想法與混合的構造函數/原型方式相同,即在構造函數內定義非函數屬性,而函數屬性則利用原型屬性定義。
唯一的區別是賦予對象方法的位置。

直到檢查 typeof Car._initialized 是否等于 "undefined" 之前,這個構造函數都未發生變化。
這行代碼是動態原型方法中最重要的部分。
如果這個值未定義,構造函數將用原型方式繼續定義對象的方法,然后把 Car._initialized 設置為 true。
如果這個值定義了(它的值為 true 時,typeof 的值為 Boolean),那么就不再創建該方法。
簡而言之,該方法使用標志(_initialized)來判斷是否已給原型賦予了任何方法。
該方法只創建并賦值一次,傳統的 OOP 開發者會高興地發現,這段代碼看起來更像其他語言中的類定義了。

混合工廠方式

這種方式通常是在不能應用前一種方式時的變通方法。
它的目的是創建假構造函數,只返回另一種對象的新實例。
這段代碼看起來與工廠函數非常相似:

function Car() {var oTempCar = new Object;oTempCar.color = "blue";oTempCar.doors = 4;oTempCar.mpg = 25;oTempCar.showColor = function() {alert(this.color);};return oTempCar;
}



與經典方式不同,這種方式使用 new 運算符,使它看起來像真正的構造函數:

var car = new Car();



由于在 Car() 構造函數內部調用了 new 運算符,所以將忽略第二個 new 運算符(位于構造函數之外),在構造函數內部創建的對象被傳遞回變量 car。
這種方式在對象方法的內部管理方面與經典方式有著相同的問題。
強烈建議:除非萬不得已,還是避免使用這種方式。

-------------------------------------
如前所述,目前使用最廣泛的是混合的構造函數/原型方式。
此外,動態原始方法也很流行,在功能上與構造函數/原型方式等價。
可以采用這兩種方式中的任何一種。
不過不要單獨使用經典的構造函數或原型方式,因為這樣會給代碼引入問題。

轉載于:https://www.cnblogs.com/hiuman/p/7347414.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/256416.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/256416.shtml
英文地址,請注明出處:http://en.pswp.cn/news/256416.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

七橋問題

怎么不重復地走完連接兩座島和陸地的七座橋? 簡化為以下: 答案是不能走完的。 奇點:這個點有奇數條線匯聚于此 偶點:這個點有奇數條線匯聚于此 七橋問題——一筆畫問題 若一個圖形全部是偶點或者只有2個奇點(沒有…

office2016打開PPT出現解決VBE6EXT.OLB不能被加載問題的解決辦法

第一步 打開路徑C:\Program Files (x86)\Microsoft Office\root\VFS\ProgramFilesCommonX86\Microsoft Shared\VBA。找到VBA只要是默認安裝路徑均一樣。 第二步 打開VBA6找到VBE6EXT.OLB將其復制到VBA7.1中。 第三步 打開VBA7.1找到VBE7.DLL將其復制到VBA6中。 第四步…

20151118小問題

1.模板引擎 百度百科:模板引擎(這里特指用于Web開發的模板引擎)是為了使 用戶界面與業務數據(內容)分享而產生的,它或以生成特定格式的文檔,用于網站的模板引擎就會產生一個標準的HTML文檔. 目的:生成一個標準的HTML文檔. 概念:模板引擎不屬于特定技術領域,它是跨領域跨平臺的概…

機器學習——人工神經網絡之發展歷史(神經元數學模型、感知器算法)

目錄 一、神經元的數學模型 ? 二、感知器算法(SVM算法前身) 1、目的 2、流程 >>>問題1:下圖w和b的調整是什么意思? 3、算法的有效性驗證 1)原算法 2)增廣矩陣 3)修改后的算法…

PHP 基礎知識-數組

PHP 的數組主要分為: 索引數組 - 帶有數字索引的數組關聯數組 - 帶有指定鍵的數組多維數組 - 包含一個或多個數組的數組 索引數組:有兩種創建索引數組的方法:索引是自動分配的(索引從 0 開始): 第一…

打開word2016總是出現很抱歉,此功能看似中斷需要修復。。問題解決辦法

第一步 打開運行窗口,在電腦桌面左下角有個圓圈點擊進去,輸入regedit,即可進入。 第二步 打開HKEY_CURRENT_USER中的SOFTWARE 第三步 找到HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Word\Options項如圖紅色箭頭標示。然后點擊O…

機器學習——人工神經網絡之多層神經網絡(多層與三層)

目錄 一、多層神經網絡 1、多層神經網絡數學模型 2、數學模型中的非線性函數fai 1)非線性函數fai存在的意義 2)非線性函數fai具體是什么? 3、多層神經網絡與單層神經網絡的區別與改進 1)單層神經網絡數學模型 2&#xff0…

noip2012-day2-t2

【問題描述】 在大學期間,經常需要租借教室。大到院系舉辦活動,小到學習小組自習討論,都需要向學校申請借教室。教室的大小功能不同,借教室人的身份不同,借教室的手續也不一樣。 面對海量租借教室的信息,我…

機器學習——人工神經網絡之后向傳播算法(BP算法)

目錄 一、后向傳播算法的本質——梯度下降法求局部極值 1、w迭代公式的合理性

獲取視圖的寬高

1 view.measure(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT); 2 int width view.getMeasuredWidth(); 3 int height view.getMeasuredHeight(); 轉載于:https://www.cnblogs.com/cmgrass/p/4978222.html

排序算法02--冒泡排序

思路:冒泡排序 就是把大的數一個個沉到下面,當然也可以是把小的數一個個浮到上面。 在最外層需要比較n-1次,因為n-1個大的數被沉到了下面,剩下一個自然就是最小的數了。 在這n-1次的里層,還需要亮亮相互比較&#xff0…

機器學習——人工神經網絡之參數設置(BP算法)

目錄 一、復習(BP算法) 二、訓練模型的建議 三、參數設置內容 1、隨機梯度下降(SGD)

關于▲的各種交點

對于△ABC證明: ①三角形的三條中線交于一點: 等腰三角形:作中線BD、CE與AC、AB交于D、E,相交于O,連接AO并延長交BC于F; 證△ABD全等于△ACE,再證△EBO全等于△D…

javaScript獲取url中的參數

var urlTools {//獲取RUL參數值getUrlParam: function(name) { /*?videoIdidentification */var params decodeURI(window.location.search); /* 截取?號后面的部分 index.html?actdoctor,截取后的字符串就是?actdoctor */var reg …

機器學習——支持向量機SVMpython實現

一、SVM理論 可見以下文章: 《機器學習——支持向量機SVM之線性模型》 《機器學習——支持向量機SVM之非線性模型低維到高維映射》 《機器學習——支持向量機SVM之非線性模型原問題與對偶問題》 《機器學習——支持向量機SVM之非線性模型原問題轉化為對偶問題》…

瑣碎易錯點

1.font-size 設置的是字體的高 2.瀏覽器內核: 主流瀏覽器   內核 IE       trident Firfox     Gecko Chorme    Webkit(原來)/blink(現在) Safari     Webkit(蘋果公司獨立研發的&a…

Python安裝Jupyter Notebook配置使用教程

原文見:https://blog.csdn.net/qq_27825451/article/details/84427269 一、什么是jupyter 1、簡介: jupyter notebook是一種 Web 應用,能讓用戶將說明文本、數學方程、代碼和可視化內容全部組合到一個易于共享的文檔中。它可以直接在代碼旁…

ExtJS4.2學習(10)分組表格控件--GroupingGrid(轉)

鳴謝網址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html --------------------------------------------------------------------------------------------- 分組表格控件在我們的開發中經常被用到,GroupingGrid…

九個Console命令,讓js調試更簡單

一、顯示信息的命令 1: <!DOCTYPE html>2: <html>3: <head>4: <title>常用console命令</title>5: <meta http-equiv"Content-Type" content"text/html; charsetutf-8" />6: </head>7: <body>8: …

numpy——axis

size()和max()中的含義 以前我理解axis0代表行&#xff0c;axis1代表列&#xff1b; 但是這種含義在函數size()和max()中恰恰相反&#xff1b; 其實不是這樣的&#xff0c;我們回到單詞axis本身&#xff0c;它的意思是“軸”&#xff0c;沒錯軸就是代表一個方向&#xff0c;像…