JavaScript? ?? ? ? ?? ??? ??????. ?????? ?? ?? ??? ??? ??? ?? ???? ?? JavaScript ?? ????/??? ? ?? ?? ? ?? ?????? ????? ?????.

??? ???? ????? JavaScript? ?? ???? ?? ??? ?? ?? "??"??? ????, ?? ??? ? ??????? JSON(JavaScript Object Notation) ? ?? " ??”? ???????.

JavaScript? ? ??? ??? ???? ? ?? ?? ??? ??? ??? ?? ?? ??? ???? ?? ??? ?? ? ????.

??? ??? ???

???

?????. ?? ??? ???????. JavaScript ??? ???? ???? "???"? "??? ???"??? ? ?? ??? ????. ?? ??? ?????? ???? ??? ?????? ????? ??? ???? ??? ?? ??? ?????.

???

Literal? JavaScript ??? ????? ???? ?? ????? ???? ??(? ??? ????) ? ??? ?? ??? ???? ??? ?? ????? ???? ?? ?? ?? ??? ?? ???? ?????. ??? ???? ?? ?? ??? ???? ??? ??? ?? ????? ??? ??(? ????? ???? ?? ?? ??? ? ??) ??? ?? ???? ?????. ???? ??? ? ??? ? ??? ??? ??? ?????.

??? ? ?? ??

??? ??:

???

??? ??:

???

? ??? ?? ?? ???? ???? ?? ??? "whatAmI"? ???? ??? ?? ???? "iAm" ??? ????.

??? ?? ??? ??? ????, ???? ?? ??? ??? ?????.

??? ??? ??? ???? ???? ??? ????? ?? ?? ??? ????(?????? ????? ?? ???? ?? ?? ????).

??? ????? ?? ?? ??? ?? ??? ?????. ? ???? myObject???. ?? ?? ?? ??? ????? ???? ???? ?? ??? ???? myObject .iAm?? ???? ???. "??").

???? ?? ?? ??? ????? ???? ????? ?? ???? ?????. ??? ??? ??? ??? ???? ?? ??? ??? ?? ??? ???? ???. ??? ?? myObject.whatAmI()("?? ?????"? ???????)?? ?? ????.

?? ???? ???????.

• ??? ??? ??? ???? ?? ??? "this"? ???? ????? ??? ??? ??? ????.
• ??? ???? ??/???? "?"? ?? "=" ?? ???? ??, ??? ????? ?? ":" ?? ?????.
• ???? ? ??/??? ?? ?? (?? ??) ???? ";"? ??? ? ??? ??? ????? ?? ???? ???? ?? ?? ?? ","? ???? ?? ??? ????, ??? ??? JavaScript? ??? ?????.

? ? ?? ??? ?? ??? ???? ???? ??? ????.

?? ??? ??? ?? ??? ????? ?? ??? ???? ???? ??? ??? ??? ???? ??? ? ????.

???

???? ????? ?? ??? ???? ?????(??? ? ???? ??)?? ???. ???

???? ?????.

?? ???? ???? ?????? ? ? ?? ??(??) ??? ????? ??? ?????.

???

?? JavaScript ??? ????? ????? ????? ??? ? ????.

???

?? ?? ??? ???? ??? ??????? WhatAmI ???? ??? ?????.

???

??? ?? "?? JavaScript ??? ?????."?? ??? ?????.

????? ??

?? ???? ?? ???? ???? ?? ?? ??? ? ???, ?? ???? ???? ???? ??? ?? ?? ??? ??? ??? ??, ???? ??????? ?? ????? ???? ?? ???? ??? ?? ????. ??? ????. ?? ???????

?? ?? ???? ???????.

???

? ??? ??? ??? ???? ??? ??? ?????.

???

?? ???? ???? ??? ??? ??????.

???

???? ? ? ??? ?? ????? ???? ? ??? myProperty? ??? ?????.

	//this is one other way of creating a Constructor function
	var myObjectConstructor = function(){
    	this.myProperty = 'this is a property'
    }
    
    //instantiate our Constructor
    var constructorOne = new myObjectConstructor();
    
    //change myProperty of the first instance
    constructorOne.myProperty = 'this is a new property';
    
    //instantiate a second instance of our Constructor
    var constructorTwo = new myObjectConstructor();
    
    //alert current myProperty of constructorOne instance
    alert(constructorOne.myProperty); //this will alert 'this is a new property'
     
     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will still alert 'this is a property'

從這個示例中可以看出，即使我們更改了 constructorOne 的屬性，它也沒有影響 myObjectConstructor，因此也沒有影響 constructorTwo。即使在更改 constructorOne 的 myProperty 屬性之前實例化了 constructorTwo，它仍然不會影響 constructorTwo 的 myProperty 屬性，因為它是 JavaScript 內存中完全不同的對象實例。

那么您應該使用哪一個呢？好吧，這取決于情況，如果您的腳本只需要一個此類對象（正如您將在本文末尾的示例中看到的那樣），則使用對象文字，但如果您需要一個對象的多個實例，其中每個實例彼此獨立，并且根據(jù)其構造方式可以具有不同的屬性或方法，然后使用構造函數(shù)。

這個和那個

在解釋構造函數(shù)時，出現(xiàn)了很多“this”關鍵字，我想這是討論作用域的更好時機！

現(xiàn)在您可能會問“您所說的范圍是什么”？ JavaScript 中的作用域是基于函數(shù)/對象的，因此這意味著如果您在函數(shù)之外，則無法使用在函數(shù)內部定義的變量（除非您使用閉包）。

然而，存在作用域鏈，這意味著另一個函數(shù)內的函數(shù)可以訪問其父函數(shù)中定義的變量。讓我們看一些示例代碼。

<script type="text/javascript">

var var1 = 'this is global and is available to everyone';

function function1(){

	var var2 = 'this is only available inside function1 and function2';	
	
	function function2(){
	
		var var3 = 'this is only available inside function2';
	
	}		
	
}

</script>

正如你在這個例子中看到的， var1 是在全局對象中定義的，可用于所有函數(shù)和對象， var2 是在 function1 中定義的，可用于 function1 和 function2，但是如果你嘗試引用從全局對象中獲取它會給出錯誤“var2 未定義”，var3 只能由 function2 訪問。

那么“this”指的是什么呢？在瀏覽器中，“this”引用窗口對象，因此從技術上講，窗口是我們的全局對象。如果我們在一個對象內部，“this”將引用該對象本身，但是如果您在一個函數(shù)內部，這仍然會引用窗口對象，同樣，如果您在一個對象內的方法內部，“ this' 將引用該對象。

由于我們的作用域鏈，如果我們位于子對象（對象內的對象）內部，“this”將引用子對象而不是父對象。

作為旁注，還值得補充的是，當使用 setInterval、setTimeout 和 eval 等函數(shù)時，當您通過其中之一執(zhí)行函數(shù)或方法時，“this”指的是 window 對象，因為這些是 window 的方法，所以 setInterval() 和 window.setInterval() 是相同的。

好吧，現(xiàn)在我們已經解決了這個問題，讓我們做一個真實的示例并創(chuàng)建一個表單驗證對象！

現(xiàn)實世界的用法：表單驗證對象

首先我必須向您介紹我們將創(chuàng)建的 addEvent 函數(shù)，它是 ECMAScript 的（Firefox、Safari 等）addEventListener() 函數(shù)和 Microsoft ActiveX Script 的 AttachEvent() 函數(shù)的組合。

    function addEvent(to, type, fn){
        if(document.addEventListener){
            to.addEventListener(type, fn, false);
        } else if(document.attachEvent){
            to.attachEvent('on'+type, fn);
        } else {
            to['on'+type] = fn;
        }	
    };

這將創(chuàng)建一個具有三個參數(shù)的新函數(shù)，to 是我們將事件附加到的 DOM 對象，type 是事件類型，fn 是觸發(fā)事件時運行的函數(shù)。它首先檢查是否支持 addEventListener，如果支持，它將使用它，如果不支持，它將檢查 AttachEvent，如果其他所有方法都失敗，您可能正在使用 IE5 或同樣過時的東西，因此我們將事件直接添加到其事件屬性上（注意：第三個選項將覆蓋可能已附加到事件屬性的任何現(xiàn)有函數(shù)，而前兩個選項會將其作為附加函數(shù)添加到其事件屬性中）。

現(xiàn)在讓我們設置我們的文檔，使其與您開發(fā) jQuery 內容時可能看到的類似。

在 jQuery 中你會有；

    $(document).ready(function(){
        //all our code that runs after the page is ready goes here
    });

使用我們的 addEvent 函數(shù)；

    addEvent(window, 'load', function(){
		//all our code that runs after the page is ready goes here
	});

現(xiàn)在我們的 Form 對象。

var Form = {

	validClass : 'valid',
	
	fname : {
		minLength : 1,		
		maxLength : 15,	
		fieldName : 'First Name'
	},
    
	lname : {
		minLength : 1,		
		maxLength : 25,
		fieldName : 'Last Name'
	},
	
    
	validateLength : function(formEl, type){
		if(formEl.value.length > type.maxLength || formEl.value.length < type.minLength ){	
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		} else {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)
			formEl.className += ' '+Form.validClass;
			return true;
		}
	},
	
    
	validateEmail : function(formEl){
		var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
		var emailTest = regEx.test(formEl.value);		 
		if (emailTest) {
			if(formEl.className.indexOf(' '+Form.validClass) == -1)			
			formEl.className += ' '+Form.validClass;            
			return true;
		} else {
			formEl.className = formEl.className.replace(' '+Form.validClass, '');
			return false;
		}			
	},		
	
	getSubmit : function(formID){    
		var inputs = document.getElementById(formID).getElementsByTagName('input');
		for(var i = 0; i < inputs.length; i++){
			if(inputs[i].type == 'submit'){
				return inputs[i];
			}		
		}		
		return false;
	}			
		
};

所以這是非?；镜?，但可以很容易地擴展。

為了解決這個問題，我們首先創(chuàng)建一個新屬性，它只是“有效”CSS 類的字符串名稱，當應用于表單字段時，會添加有效的效果，例如綠色邊框。我們還定義了兩個子對象，fname和lname，因此我們可以定義它們自己的屬性，這些屬性可以被其他地方的方法使用，這些屬性是minLength，這是這些字段可以擁有的最小字符數(shù)， maxLength 是字段可以擁有的最大字符數(shù)，而 fieldName 實際上并沒有被使用，但可以用于諸如在錯誤消息中使用用戶友好的字符串識別字段之類的事情（例如“名字字段”）是必需的。')。

接下來我們創(chuàng)建一個 validateLength 方法，它接受兩個參數(shù)： formEl 要驗證的 DOM 元素和 type ，它引用要使用的子對象之一（即 fname 或 lname）。該函數(shù)檢查字段的長度是否在 minLength 和 maxLength 范圍之間，如果不是，那么我們從元素中刪除有效類（如果存在）并返回 false，否則如果是，那么我們添加有效類并返回正確。

然后我們有一個 validateEmail 方法，它接受 DOM 元素作為參數(shù)，然后我們根據(jù)電子郵件類型正則表達式測試這個 DOM 元素值；如果通過，我們再次添加我們的類并返回 true，反之亦然。

最后我們有一個 getSubmit 方法。該方法獲得表單的 id，然后循環(huán)遍歷指定表單內的所有輸入元素，以查找哪一個具有提交類型 (type="submit")。此方法的原因是返回提交按鈕，以便我們可以禁用它，直到表單準備好提交。

讓我們讓這個驗證器對象在真實的表單上工作。首先我們需要 HTML。

    <body>
    
    <form id="ourForm">
        <label>First Name</label><input type="text" /><br />
        <label>Last Name</label><input type="text" /><br />
        <label>Email</label><input type="text" /><br />
        <input type="submit" value="submit" />
    </form>
    
    </body>

現(xiàn)在讓我們使用 JavaScript 訪問這些輸入對象，并在表單提交時驗證它們。

addEvent(window, 'load', function(){
	
	
	var ourForm = document.getElementById('ourForm');	
	var submit_button = Form.getSubmit('ourForm');
	submit_button.disabled = 'disabled';
	
	function checkForm(){
		var inputs = ourForm.getElementsByTagName('input');
		if(Form.validateLength(inputs[0], Form.fname)){
			if(Form.validateLength(inputs[1], Form.lname)){
				if(Form.validateEmail(inputs[2])){ 					 
                     
						submit_button.disabled = false;
						return true;
										
				}
			}
		}
			
		submit_button.disabled = 'disabled';
		return false;
		
	};
	
	checkForm();		
	addEvent(ourForm, 'keyup', checkForm);
	addEvent(ourForm, 'submit', checkForm);
      
	
});

讓我們分解一下這段代碼。

我們將代碼包裝在 addEvent 函數(shù)中，以便在加載窗口時運行此腳本。首先，我們使用表單 ID 獲取表單并將其放入名為 ourForm 的變量中，然后獲取提交按鈕（使用表單對象 getSubmit 方法）并將其放入名為 submit_button 的變量中，然后設置提交按鈕禁用屬性為“禁用”。

接下來我們定義一個 checkForm 函數(shù)。這會將表單字段內的所有輸入存儲為一個數(shù)組，并將其附加到一個名為..你猜對了的變量.. inputs！然后它定義了一些嵌套的 if 語句，這些語句根據(jù)我們的 Form 方法測試輸入數(shù)組內的每個字段。這就是我們在方法中返回 true 或 false 的原因，因此如果它返回 true，我們將傳遞該 if 語句并繼續(xù)執(zhí)行下一個，但如果它返回 false，我們將退出 if 語句。

根據(jù)我們的函數(shù)定義，我們在頁面最初加載時執(zhí)行 checkForm 函數(shù)，并將該函數(shù)附加到 keyup 事件和提交事件。

您可能會問，如果我們禁用了提交按鈕，為什么還要附加提交。好吧，如果您專注于輸入字段并按下 Enter 鍵，它將嘗試提交表單，我們需要對此進行測試，因此我們的 checkForm 函數(shù)返回 true（提交表單）或 false（不提交）形式）。

結論

因此，我們學習了如何在 JavaScript 中定義不同的對象類型并在其中創(chuàng)建屬性和方法。我們還學習了一個漂亮的 addEvent 函數(shù)，并在基本的現(xiàn)實示例中使用我們的對象。

這就是 JavaScript 面向對象的基礎知識。希望這可以讓您開始構建自己的 JavaScript 庫！如果您喜歡這篇文章并對其他 JavaScript 相關主題感興趣，請將它們發(fā)布在評論中，我很樂意繼續(xù)撰寫它們。感謝您的閱讀。

為什么不看看 CodeCanyon 上的 JavaScript 項目范圍。您可以找到用于創(chuàng)建滑塊、倒計時、加載器和上傳器等的腳本。

? ??? JavaScript? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!