JavaScript semakin popular dalam beberapa tahun kebelakangan ini, sebahagiannya disebabkan oleh pembangunan perpustakaan yang memudahkan untuk mencipta aplikasi/kesan JavaScript bagi mereka yang belum menguasai bahasa teras sepenuhnya.

Walaupun pada masa lalu, orang pada umumnya percaya bahawa JavaScript adalah bahasa asas dan sangat "ceroboh" tanpa asas yang sebenar, perkara ini tidak lagi berlaku, terutamanya dengan aplikasi web berskala besar dan JSON (JavaScript Object Notation) ) dan lain-lain “ penyesuaian” diperkenalkan.

JavaScript boleh mempunyai semua ciri yang ditawarkan oleh bahasa berorientasikan objek, walaupun dengan beberapa kerja tambahan yang di luar skop artikel ini.

Jom cipta objek

    function myObject(){
    
    };

Tahniah, anda baru sahaja mencipta objek. Terdapat dua cara untuk mencipta objek JavaScript: "pembina" dan "notasi literal". Fungsi di atas ialah pembina dan saya akan menerangkan perbezaannya tidak lama lagi, tetapi sehingga itu, inilah rupa definisi objek menggunakan tatatanda literal.

    var myObject = {
    
    };

Literal ialah pilihan pilihan untuk jarak nama supaya kod JavaScript anda tidak mengganggu (dan sebaliknya) skrip lain yang berjalan pada halaman, dan jika anda menggunakan objek ini sebagai objek tunggal dan tidak memerlukan berbilang contoh objek objek, Manakala jika anda perlu melakukan beberapa kerja awal sebelum mencipta objek, atau jika anda memerlukan berbilang contoh objek (di mana setiap contoh boleh berubah semasa hayat skrip), notasi jenis pembina lebih disukai. Mari kita teruskan dan bina kedua-dua objek secara serentak supaya kita dapat memerhatikan perbezaannya.

Tentukan kaedah dan sifat

Versi pembina:

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Versi teks:

    var myObject = {
        iAm : 'an object',
        whatAmI : function(){
            alert('I am ' + this.iAm);
        }
    }

Untuk setiap objek kami mencipta sifat "iAm" yang mengandungi nilai rentetan yang digunakan dalam kaedah objek kami "whatAmI" yang mengeluarkan mesej amaran.

Sifat ialah pembolehubah yang dicipta di dalam objek, dan kaedah ialah fungsi yang dicipta di dalam objek.

Sekarang mungkin masa terbaik untuk menerangkan cara menggunakan sifat dan kaedah (walaupun jika anda biasa dengan perpustakaan, anda mungkin sudah melakukannya).

Untuk menggunakan harta, mula-mula masukkan objek yang dimilikinya - jadi dalam kes ini myObject - kemudian untuk merujuk kepada sifat dalamannya, tambahkan noktah dan kemudian masukkan nama harta itu supaya ia kelihatan seperti myObject .iAm ( Ini akan kembali "objek").

Untuk kaedah, ia adalah sama kecuali untuk melaksanakan kaedah, seperti mana-mana fungsi, anda perlu meletakkan tanda kurung selepasnya, jika tidak, anda hanya akan mengembalikan rujukan kepada fungsi, bukan fungsi yang sebenarnya dikembalikan. Jadi ia akan kelihatan seperti myObject.whatAmI() (yang akan mengingatkan "Saya adalah objek").

Sekarang mari kita lihat perbezaannya:

• Sifat dan kaedah objek pembina ditakrifkan menggunakan kata kunci "ini" di hadapannya, manakala versi literal tidak.
• Dalam objek pembina, "nilai" sifat/kaedah ditakrifkan selepas tanda sama "=", manakala dalam versi literal ia ditakrifkan selepas titik bertindih ":".
• Pembina boleh mempunyai (pilihan) koma bertitik ";" pada akhir setiap pengisytiharan sifat/kaedah, manakala dalam versi literal jika anda mempunyai berbilang sifat atau kaedah ia mesti dipisahkan dengan koma "," dan Ia tidak boleh diikuti dengan koma bertitik, jika tidak JavaScript akan mengembalikan ralat.

Terdapat juga perbezaan dalam cara kedua-dua jenis pengisytiharan objek ini digunakan.

Untuk menggunakan objek beranotasi secara literal, anda hanya menggunakannya dengan merujuk nama pembolehubahnya, jadi apabila anda memerlukannya, anda boleh memanggilnya dengan menaip;

    myObject.whatAmI();

Dengan pembina, anda perlu membuat instantiate (buat contoh baharu objek) terlebih dahulu; anda melakukan ini dengan menaip

    var myNewObject = new myObject();
    myNewObject.whatAmI();

Gunakan pembina.

Mari ambil pembina sebelumnya dan bina di atasnya untuk melaksanakan beberapa operasi asas (tetapi dinamik) semasa membuat seketika.

    function myObject(){
        this.iAm = 'an object';
        this.whatAmI = function(){
            alert('I am ' + this.iAm);
        };
    };

Sama seperti fungsi JavaScript, kita boleh menggunakan parameter dalam pembina;

function myObject(what){
	this.iAm = what;
	this.whatAmI = function(language){
		alert('I am ' + this.iAm + ' of the ' + language + ' language');
	};
};

Sekarang mari kita nyatakan objek kita dan panggil kaedah WhatAmInya sambil mengisi medan yang diperlukan.

    var myNewObject = new myObject('an object');
    myNewObject.whatAmI('JavaScript');

Ini akan memberi amaran "Saya adalah objek bahasa JavaScript."

Untuk instantiate atau tidak untuk instantiate

Saya menyebut sebelum perbezaan antara pembina objek dan literal objek, apabila perubahan dibuat kepada literal objek ia mempengaruhi objek itu di seluruh skrip, sedangkan apabila pembina diinstantiasi dan kemudian perubahan dibuat pada contoh itu, Ia tidak menjejaskan mana-mana yang lain contoh objek. Jom cuba contoh

Mula-mula kita akan mencipta objek literal;

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }
    
    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'
    
    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';
    
    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a new property', as expected

Walaupun anda mencipta pembolehubah baharu dan menghalakannya ke objek, ia akan mempunyai kesan yang sama.

	var myObjectLiteral = {
    	myProperty : 'this is a property'
    }
    
    //alert current myProperty
    alert(myObjectLiteral.myProperty); //this will alert 'this is a property'
    
    //define new variable with object as value
    var sameObject = myObjectLiteral;
    
    //change myProperty
    myObjectLiteral.myProperty = 'this is a new property';
    
    //alert current myProperty
    alert(sameObject.myProperty); //this will still alert 'this is a new property'

Sekarang mari cuba latihan serupa menggunakan pembina.

	//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();
    
    //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 property'
     
     //alert current myProperty of constructorTwo instance
    alert(constructorTwo.myProperty); //this will alert 'this is a property'

Seperti yang dijangka, kedua-duanya mengembalikan nilai yang betul, tetapi mari tukar myProperty salah satu kejadian.

	//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'

從這個(gè)示例中可以看出，即使我們更改了 constructorOne 的屬性，它也沒有影響 myObjectConstructor，因此也沒有影響 constructorTwo。即使在更改 constructorOne 的 myProperty 屬性之前實(shí)例化了 constructorTwo，它仍然不會(huì)影響 constructorTwo 的 myProperty 屬性，因?yàn)樗?JavaScript 內(nèi)存中完全不同的對(duì)象實(shí)例。

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

這個(gè)和那個(gè)

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

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

然而，存在作用域鏈，這意味著另一個(gè)函數(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>

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

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

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

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

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

現(xiàn)實(shí)世界的用法：表單驗(yàn)證對(duì)象

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

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

在 jQuery 中你會(huì)有；

    $(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 對(duì)象。

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;
	}			
		
};

所以這是非?；镜?，但可以很容易地?cái)U(kuò)展。

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

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

然后我們有一個(gè) validateEmail 方法，它接受 DOM 元素作為參數(shù)，然后我們根據(jù)電子郵件類型正則表達(dá)式測(cè)試這個(gè) DOM 元素值；如果通過，我們?cè)俅翁砑游覀兊念惒⒎祷?true，反之亦然。

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

讓我們讓這個(gè)驗(yàn)證器對(duì)象在真實(shí)的表單上工作。首先我們需要 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 訪問這些輸入對(duì)象，并在表單提交時(shí)驗(yàn)證它們。

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ù)中，以便在加載窗口時(shí)運(yùn)行此腳本。首先，我們使用表單 ID 獲取表單并將其放入名為 ourForm 的變量中，然后獲取提交按鈕（使用表單對(duì)象 getSubmit 方法）并將其放入名為 submit_button 的變量中，然后設(shè)置提交按鈕禁用屬性為“禁用”。

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

根據(jù)我們的函數(shù)定義，我們?cè)陧撁孀畛跫虞d時(shí)執(zhí)行 checkForm 函數(shù)，并將該函數(shù)附加到 keyup 事件和提交事件。

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

結(jié)論

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

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

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

Atas ialah kandungan terperinci Asas JavaScript berorientasikan objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!