這段時間正好公司項目須要，須要改動fullcalendar日歷插件，有機會深入插件源代碼。正好利用這個機會，我也大致學習了下面JS的面向對象編程，感覺收獲還是比較多的。

所以寫了以下這篇文章希望跟大家探討探討JS的面向對象，本人資歷尚淺，還望各位大神多多不吝賜教。

總述：

如今的發展趨勢是，JS越來越面向對象化。而JS本身并未像Java，C#等語言，實現了明顯的繼承，封裝等，我們須要通過JS本身的方式來模擬這些面向對象的方式。
Jquery的一些東西： 1.each方法： ? ? 這是在js面向對象編程中十分經常使用的一種方式，each方法使dom結構循環變得簡潔，它能夠遍歷數組，對象，json等
$(selector).each(function(index,element)) 或 $.each(selector,function(index,element)) 調用樣例： var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); //輸出： 0，1，2alert(val); //輸出：aaa，bbb，ccc}); 參數selector能夠是dom元素（$("input:hidden")），json（{?one:1,?two:2,?three:3}）等等 當參數是json格式時，傳入函數的index就變為了json元素的key
看下jQuery中的each實現（網絡摘抄）? function (object, callback, args) { //該方法有三個參數:進行操作的對象obj，進行操作的函數fn，函數的參數argsvar name, i = 0,length = object.length;if (args) {if (length == undefined) {for (name in object) {if (callback.apply(object[name], args) === false) {break;}}} else {for (; i < length;) {if (callback.apply(object[i++], args) === false) {break;}}}} else {if (length == undefined) {for (name in object) {if (callback.call(object[name], name, object[name]) === false) {break;}}} else {for (var value = object[0]; i < length && !== false; value = object[++i]) {}/*object[0]取得jQuery對象中的第一個DOM元素，通過for循環，得到遍歷整個jQuery對象中相應的每一個DOM元素，通過 callback.call( value,i,value);將callback的this對象指向value對象，而且傳遞兩個參數,i表示索引值，value表示DOM元素；當中callback是相似于 function(index, elem) { ... } 的方法。所以就得到 $("...").each(function(index, elem){ ... });*/}}return object;}來源： <a target=_blank href="http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html">http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html</a> 上述中，回調函數callback作為參數傳入，callback.call(value,?i,?value)這部分實際上限制了callback傳入時僅僅會使用i，value兩個參數。 在把callback作為參數的函數中，會定義callback實際的參數列表，外部定義callback時，需遵循此參數列表，最經常使用的樣例就是jqueryAJAX中，調用成功返回的success函數或error函數。
? JS高級特性： 1. ? ??===運算符 ? ?? ? ? || ，&& 運算符????
? 2.函數作為值進行參數傳遞 jquery的AJAX是函數作為值傳遞的好樣例 js中的函數傳遞都是按值進行傳遞的，函數名就是對象的引用，它使得函數能夠向不論什么對象一樣作為參數進行傳遞，由于這一特性JS有了更大的靈活性。 我們能夠定義帶有函數參數的函數，限定傳入函數的參數，而不限定對于參數的實現（callback的原理） 下圖為研究fullcalendar插件時的，插件定義了對日歷元素的遍歷函數，對每一個元素的操作則作為callback函數傳入，這樣我們能夠對不同元素操做的遍歷進行復用 function segmentElementEach(segments, callback) { // TODO: use in AgendaView?for (var i=0; i<segments.length; i++) {var segment = segments[i];var element = segment.element;if (element) {callback(segment, element, i);}} }
注意以下這樣的時尚大氣的使用方法，有點像接口，但更開放 // report the elements to the View, for general drag/resize utilitiessegmentElementEach(segments, function(segment, element) {reportEventElement(segment.event, element);});// attach mouse handlers//attachHandlers(segments, modifiedEventId);// call `eventAfterRender` callback for each eventsegmentElementEach(segments, function(segment, element) {trigger('eventAfterRender', segment.event, segment.event, element);}); 4.JS boolean ? ? 在JS編程中，尤其是面向對象編程，常常會向一些推斷語句傳入一些對象，如（fullcalendar插件中截取）：
// the container where the initial HTML will be rendered.// If `doAppend`==true, uses a temporary container.var renderContainer = doAppend ? $("<div/>") : finalContainer; 在JS中，推斷語句會將傳入值轉換成Boolean后推斷 轉換規則：

數據類型	轉為true的值	轉為false的值
Boolean	true	false
String	不論什么非空字符串	“”空字符串
Number	不論什么非零數值	0和NaN
Object	不論什么對象	null
Undefined	n/a	undefined

JS面向對象：
1.argument對象? 在JavaScript的每個函數里存在一個上下文相關的名為arguments的變量，它的行為類似于一個偽數組，包括了傳給函數的所有參數，這個對象存在于每個函數的上下文中。 ??argument[0]表示函數調用時傳入的第一個參數，argument[1]表示第二個參數，由此類推 ? ?若改動argument的值，則相應的出入參數也跟著改動。
argument對象在JS模擬函數重載時有非常大的用處


2.this 在不論什么語言中，包含操作系統，上下文這個概念總是不可獲取，我們能夠把上下文理解成當前程序運行的環境。 在JS中，這個上下文通過this來實現，this總是指向當前工作的上下文對象。在全局環境中，this指向window對象。 在函數調用時，能夠通過call和apply方法來改變函數運行的上下文對象，this就會指向新的對象。這在興許的繼承中也會提及。
關于this的訪問： 在這個樣例中，在getNameFunc函數內部取到的this不是object對象的this，而是window全局對象，由于object.getNameFunc()實際返回函數名getNameFunc，這時，調用函數的環境變為了全局環境，this因此變成了window。 JS中，每一個函數調用時都會自己主動取得this和arguments兩個特殊變量。

<script type="text/javascript">

var name = "The Window";

var object = {

name : "My Object",

getNameFunc : function(){

return function(){

return this.name;

};

}

};

alert(object.getNameFunc()()); //"The Window"

</script>

3.函數重載 JS與java，c#的面向對象語言不同，函數沒有重載的概念，相同的函數名后面的會覆蓋前面的（JS函數名就是個引用）。 而JS的重載則能夠通過argument對象來實現，例如以下是從《Javascript 面向對象編程》一書中截取。 能夠通過argument的length屬性推斷函數調用時的參數列表，結合typeof類型推斷，能夠實現函數的重載 //一個簡單的用來發送消息的函數 function sendMessage( msg, obj ) { //假設同一時候提供了一個消息和一個對象 if ( arguments.length == 2 ) //就將消息發給該對象 obj.handleMsg( msg );else //否則，剛假定僅僅有消息被提供//于是顯示該消息 alert( msg ); }
4.JS作用域 JS作用域以函數為界限，而沒有塊約束（for，if，while等），所以在for中定義的var變量實際上在for循環外部依舊起作用。 注意：在函數內部未使用varkeyword產生的變量，可在全局訪問
5.閉包 簡單的說，閉包就是內層函數引用外層變量的手段,而外層則無法訪問內層的變量，是否閉包是對外層變量的封裝，函數是否作為隔離之用？（在函數的生命周期內，外層無法影響變量） 結合《Javascript 面向對象編程》和 網上找的各種資料，我總結了閉包的下面幾種使用方法。
（1）簡單的封裝函數，把實現業務的代碼和參數分開，避免混亂的代碼調用方式。 ??? 下面為演示樣例代碼（取自：《Javascript 面向對象編程》） //用來延遲顯示消息的通用函數 function delayedAlert( msg, time ) { //初始化一個被封套的函數 setTimeout(function(){ //此函數使用了來自封套它的函數的變量msg alert( msg ); }, time ); }其實本人感覺，這好像并沒體現出閉包的什么特點，倒反而像是簡單的封裝
（2）匿名自運行函數 ? ? 在JS編寫過程中，經常會在全局存放非常多變量，包含非常多暫時變量，這經常會對其它的函數造成影響，使用閉包能夠解決這一問題。
? ? 下面樣例來自?http://blog.csdn.net/sunlylorn/article/details/6534610

var datamodel = {

table : [],

tree : {}

};

(function(dm){

for(var i = 0; i < dm.table.rows; i++){

var row = dm.table.rows[i];

for(var j = 0; j < row.cells; i++){

drawCell(i, j);

}

}

//build dm.tree

})(datamodel);

我們無需去維護函數中的變量，運行結束后內部變量會被釋放，而不會影響到全局（避免污染）
（3）設計模式中的單例模式 在single以外是無法訪問unique的，而且採用匿名函數，僅僅能初始化一次

var single = (function(){

var unique;

function Construct(){

// ... 生成單例的構造函數的代碼

}

unique = new Constuct();

return unique;

})();

來源： <http://blog.chinaunix.net/uid-26672038-id-3886959.html>

（4）模擬面向對象類模板

function Person(){

var name = "default";

return {

getName : function(){

return name;

},

setName : function(newName){

name = newName;

}

}

};

var john = Person();

print(john.getName());

john.setName("john");

print(john.getName());

var jack = Person();

print(jack.getName());

jack.setName("jack");

print(jack.getName());

執行結果例如以下：

default

john

default

jack

來源：http://blog.csdn.net/sunlylorn/article/details/6534610

(5)提供引用變量的創建值，而非其它變化后的值 //id為"main"的一個元素 var obj = document.getElementById("main"); //用來綁定的items數組 var items = [ "click", "keypress" ]; //遍歷items中的每一項 for ( var i = 0; i < items.length; i++ ) { //用自運行的匿名函數來激發作用域(function(){ //在些作用域內存儲值var item = items[i]; //為obj元素綁定函數obj[ "on" + item ] = function() { //item引用一個父級的變量， //該變量在此for循環的上文中已被成功地scoped(?)alert( "Thanks for your " + item );};})(); }

4.JS中方法訪問范圍

（1）共同擁有方法 介紹之前先說下prototype的概念。 prototype是全部JS對象共同擁有的構造對象。prototype本身也是對象，能夠給其附加方法，屬性，prototype加入的方法，屬性全部主對象的實例共享。 （2）私有方法 全部函數內部定義的屬性，方法，未綁定到this上下文對象的，在函數外部是無法訪問到的，樣例例如以下：

function Person(){

?//都是私有的

var name;

function move(){

?

}

}

（3）成員方法（本人類比java，c#等語言，姑且叫他成員方法）

function Person(name){

var name;

function moveUp(){

alert(name+" move");

}

this.moveUp = moveUp;

}

var jack = new Person("jack");

jack.moveUp();

(4)通過成員方法訪問變量，如上例訪問name
(5)靜態方法 靜態方法類似于java等語言，能夠直接通過累訪問。 JS中的靜態方法，實際能夠看做函數對象的屬性，而不是通過函數對象創建出的對象的屬性。所以無法通過事實上例訪問函數對象。

5.構造（重要） 在JS中，創建對象有多種方式，相比java等語言比較靈活。 JS中，能夠先創建Object的實例，再為其加入屬性和方法（不展演示樣例子，比較簡單），或通過字面量的方式（大括號包裹屬性和方法）。 可是，用上述的基本方式創建對象會產生大量反復代碼。下面幾種方式是比較推薦的方式。 (1)工廠模式 作為最經常使用的設計模式之中的一個，在JS中相同能夠模擬這樣的方式。工廠模式用函數封裝創建對象的細節，僅僅須要通過接口來創建對象。

function createPerson(name, age, job){

var o = new Object();

o.name = name;

o.age = age;

o.job = job;

o.sayName = function(){

alert(this.name);

};

return o;

}

var person1 = createPerson("Nicholas", 29, "Software Engineer");

var person2 = createPerson("Greg", 27, "Doctor");

person1.sayName(); //"Nicholas"

person2.sayName(); //"Greg"

來源：《Javascript 高級程序設計》

（2）構造函數 ? ? 在java，c#等面向對象語言中，這是非經常見的。

function Person(name){

var name;

function moveUp(){

alert(name+" move");

}

this.moveUp = moveUp;

}

var jack = new Person("jack");

jack.moveUp();

（3）原型Prototype模式 我們創建的每一個函數，都有一個Prototype屬性，該屬性是個指針，指向一個用于包括特定類型全部實例共享屬性和方法的對象。 每一個構造函數都會有一個原型對象（指向原型對象的指針），而通過構造函數構造出的對象相同有指向相同原型對象的指針，這也是后面可以通過原型鏈實現繼承的基礎
(4)靜態方法創建 靜態方法類似于java等語言，能夠直接通過累訪問。 JS中的靜態方法，實際能夠看做函數對象的屬性，而不是通過函數對象創建出的對象的屬性。所以無法通過事實上例訪問函數對象。

6.繼承（重要） 這里，我僅僅介紹最主要的幾種集成方式，一些基于設計模式的擴展，這里就不做贅述了。 （1）原型鏈法 ? ? 通過子類的原型對象引用父類的實例對象，該實例對象將引用父類原型對象，從而實現了原型鏈。
原型鏈的最上一級一定是Object對象。
原型鏈搜索機制：讀取時，從實例對象開始，順著原型鏈一直向上搜索，若找不到屬性或方法，則會在最后一步停止。

function SuperType(){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

return this.property;

};

function SubType(){

this.subproperty = false;

}

//inherit from SuperType

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue()); //true

對于原型鏈法，我有一點疑問，為何子類指向父類原型實例而非原型本身，希望能有高人給與指點
（2）借用構造函數 這是我所見過的最經常使用的方式，其思想是在子類中調用超類的構造函數，主要通過借助apply和call方法，即用子類的this環境去調用超類的構造函數，實現將超類的屬性，方法拷貝到子類的過程。這在fullcalendar插件中大量使用。

//下面是fullcalendar插件中穿件日歷基礎對象時繼承事件處理類型EventManager的過程，t是用來存儲this變量的，防止

????????//切換對結果的影響this

// Imports

// -----------------------------------------------------------------------------------

EventManager.call(t, options);

var isFetchNeeded = t.isFetchNeeded;

var fetchEvents = t.fetchEvents;

興許有心的東西還會有所補充

轉載于:https://www.cnblogs.com/mengfanrong/p/3868798.html

總結

以上是生活随笔為你收集整理的Javascript面向对象研究心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。