JavaScript は、コア言語をまだ完全にマスターしていない人でも JavaScript アプリケーション/エフェクトを簡単に作成できるライブラリの開発により、近年人気が高まっています。

以前は、JavaScript は基本的な言語であり、実質(zhì)的な基礎がなく非常に「ずさん」であると一般に信じられていましたが、特に大規(guī)模な Web アプリケーションや JSON (JavaScript Object Notation) などでは、これは當てはまりません。 「適応」が導入されます。

JavaScript は、オブジェクト指向言語が提供するすべての機能を備えていますが、この記事の範囲を超える追加の作業(yè)は必要です。

オブジェクトを作成しましょう

リーリー

おめでとうございます。オブジェクトが作成されました。 JavaScript オブジェクトを作成するには、「コンストラクター」と「リテラル表記」の 2 つの方法があります。上記の関數(shù)はコンストラクターであり、その違いについては後ほど説明しますが、それまでは、リテラル表記を使用したオブジェクト定義は次のようになります。

リーリー

リテラルは、JavaScript コードがページ上で実行されている他のスクリプトに干渉しない (またはその逆) ように、名前間隔の推奨オプションです。また、このオブジェクトを単一のオブジェクトとして使用しており、複數(shù)のインスタンスが必要ない場合は、一方、オブジェクトを作成する前に初期作業(yè)を?qū)g行する必要がある場合、またはオブジェクトの複數(shù)のインスタンスが必要な場合 (各インスタンスはスクリプトの存続期間中に変更される可能性がある場合) には、コンストラクター型の表記が推奨されます。違いを観察できるように、両方のオブジェクトを同時に構(gòu)築してみましょう。

メソッドとプロパティを定義する

コンストラクターのバージョン:

リーリー

テキストバージョン:

リーリー

オブジェクトごとに、アラート メッセージを発行するオブジェクト メソッド "whatAmI" で使用される文字列値を含むプロパティ "iAm" を作成します。

プロパティはオブジェクト內(nèi)に作成される変數(shù)であり、メソッドはオブジェクト內(nèi)に作成される関數(shù)です。

ここで、プロパティとメソッドの使用方法を説明する良い機會だと思います (ただし、ライブラリに精通している場合は、すでにこれを行っているかもしれません)。

プロパティを使用するには、まずそのプロパティが屬するオブジェクト (この場合は myObject) を入力し、次にその內(nèi)部プロパティを參照するには、ピリオドを追加してプロパティ名を入力します。これにより、最終的に myObject のようになります。 iAm (これは「オブジェクト」を返します)。

これは、他の関數(shù)と同様に、実行メソッドの後にかっこを付ける必要がある點を除いて、メソッドの場合も同じです。そうでない場合は、関數(shù)が実際に返す內(nèi)容ではなく、関數(shù)への參照だけを返すことになります。したがって、これは myObject.whatAmI() のようになります (これは「私はオブジェクトである」ことを思い出させます)。

次に、違いを見てみましょう:

• コンストラクター オブジェクトのプロパティとメソッドは、その前にキーワード "this" を使用して定義されますが、リテラル バージョンはそうではありません。
• コンストラクター オブジェクトでは、プロパティ/メソッドの「値」は等號「=」の後に定義されますが、リテラル バージョンではコロン「:」の後に定義されます。
• コンストラクターでは、各プロパティ/メソッド宣言の最後に (オプションの) セミコロン ";" を付けることができますが、リテラル バージョンでは、複數(shù)のプロパティまたはメソッドがある場合は、それらをコンマ "," で區(qū)切る必要があり、これはできません。セミコロンが続くと、JavaScript がエラーを返します。

これら 2 種類のオブジェクト宣言の使用方法にも違いがあります。

文字通りに注釈が付けられたオブジェクトを使用するには、その変數(shù)名を參照するだけで使用できるため、必要なときにいつでも次のように入力して呼び出すことができます;

リーリー

コンストラクターを使用するには、最初にインスタンス化 (オブジェクトの新しいインスタンスを作成) する必要があります。これは次のように入力することで実行できます。

リーリー

コンストラクターを使用します。

前のコンストラクターを使用して、インスタンス化時にいくつかの基本的な (ただし動的) 操作を?qū)g行するために構(gòu)築してみましょう。

リーリー

他の JavaScript 関數(shù)と同様に、コンストラクターでパラメーターを使用できます;

リーリー

次に、オブジェクトをインスタンス化し、必須フィールドに入力しながらその WhatAmI メソッドを呼び出しましょう。

リーリー

これにより、「私は JavaScript 言語のオブジェクトです」と警告されます。

インスタンス化するかどうか

オブジェクト コンストラクターとオブジェクト リテラルの違いについては前に述べました。オブジェクト リテラルに変更が加えられると、スクリプト全體でそのオブジェクトに影響しますが、コンストラクターがインスタンス化されてそのインスタンスが変更される場合、他のインスタンスには影響しません。そのオブジェクトの。例を試してみましょう;

最初にオブジェクト リテラルを作成します;

リーリー

新しい変數(shù)を作成してオブジェクトを指定しても、同じ効果が得られます。

リーリー

次に、コンストラクターを使用して同様の演習を試してみましょう。

リーリー

予想どおり、どちらも正しい値を返しますが、一方のインスタンスの 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 內(nèi)存中完全不同的對象實例。

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

這個和那個

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

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

然而，存在作用域鏈，這意味著另一個函數(shù)內(nèi)的函數(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”引用窗口對象，因此從技術上講，窗口是我們的全局對象。如果我們在一個對象內(nèi)部，“this”將引用該對象本身，但是如果您在一個函數(shù)內(nèi)部，這仍然會引用窗口對象，同樣，如果您在一個對象內(nèi)的方法內(nèi)部，“ this' 將引用該對象。

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

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

好吧，現(xiàn)在我們已經(jīng)解決了這個問題，讓我們做一個真實的示例并創(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 內(nèi)容時可能看到的類似。

在 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)遍歷指定表單內(nèi)的所有輸入元素，以查找哪一個具有提交類型 (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ù)。這會將表單字段內(nèi)的所有輸入存儲為一個數(shù)組，并將其附加到一個名為..你猜對了的變量.. inputs！然后它定義了一些嵌套的 if 語句，這些語句根據(jù)我們的 Form 方法測試輸入數(shù)組內(nèi)的每個字段。這就是我們在方法中返回 true 或 false 的原因，因此如果它返回 true，我們將傳遞該 if 語句并繼續(xù)執(zhí)行下一個，但如果它返回 false，我們將退出 if 語句。

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

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

結(jié)論

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

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

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

以上がJavaScript のオブジェクト指向の基本の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。