Bases de JavaScript orientées objet

JavaScript a gagné en popularité ces dernières années, en partie grâce au développement de bibliothèques qui facilitent la création d'applications/effets JavaScript pour ceux qui ne maîtrisent pas encore complètement le langage de base.

Même si dans le passé, les gens croyaient généralement que JavaScript était un langage basique et très « bâclé » sans véritable fondement ; ce n'est plus le cas, notamment avec les applications web à grande échelle et JSON (JavaScript Object Notation) et autres » adaptations » sont introduites.

JavaScript peut avoir toutes les fonctionnalités offertes par les langages orientés objet, mais avec un travail supplémentaire qui dépasse le cadre de cet article.

Créons un objet

    function myObject(){
    
    };

Félicitations, vous venez de créer un objet. Il existe deux manières de créer des objets JavaScript : "constructeur" et "notation littérale". La fonction ci-dessus est un constructeur et j'expliquerai la différence sous peu, mais en attendant, voici à quoi ressemble une définition d'objet en utilisant la notation littérale.

    var myObject = {
    
    };

Literal est l'option préférée pour l'espacement des noms afin que votre code JavaScript n'interfère pas avec (et vice versa) d'autres scripts exécutés sur la page, et si vous utilisez cet objet comme un objet unique et n'avez pas besoin de plusieurs instances de l'objet. object, tandis que si vous devez effectuer un travail initial avant de créer l'objet, ou si vous avez besoin de plusieurs instances de l'objet (où chaque instance peut changer au cours de la durée de vie du script), la notation de type constructeur est préférée. Allons-y et construisons les deux objets simultanément afin que nous puissions observer les différences.

Définir les méthodes et les propriétés

Version constructeur :

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

Version texte :

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

Pour chaque objet nous créons une propriété "iAm" qui contient une valeur de chaîne qui est utilisée dans notre méthode objet "whatAmI" qui émet le message d'alerte.

Les propriétés sont des variables créées à l'intérieur d'un objet et les méthodes sont des fonctions créées à l'intérieur d'un objet.

C'est probablement le meilleur moment pour expliquer comment utiliser les propriétés et les méthodes (même si si vous connaissez la bibliothèque, vous le faites probablement déjà).

Pour utiliser une propriété, entrez d'abord l'objet auquel elle appartient - donc dans ce cas monObjet - puis pour faire référence à ses propriétés internes, ajoutez un point puis entrez le nom de la propriété pour qu'elle ressemble à monObjet .iAm (cela renverra "un objet").

Pour les méthodes, c'est pareil sauf pour l'exécution de la méthode, comme toute fonction, vous devez mettre des parenthèses après ; sinon, vous retournerez simplement une référence à la fonction, pas ce que la fonction renvoie réellement. Cela ressemblerait donc à myObject.whatAmI() (qui rappellerait "Je suis un objet").

Voyons maintenant la différence :

• Les propriétés et méthodes d'un objet constructeur sont définies en utilisant le mot-clé "this" devant lui, contrairement à la version littérale.
• Dans les objets constructeur, les "valeurs" des propriétés/méthodes sont définies après le signe égal "=", tandis que dans la version littérale, elles sont définies après les deux points ":".
• Les constructeurs peuvent avoir (facultatif) un point-virgule ";" à la fin de chaque déclaration de propriété/méthode, alors que dans la version littérale, si vous avez plusieurs propriétés ou méthodes, elles doivent être séparées par des virgules ",", et elles ne peuvent pas être suivies d'un point-virgule, sinon JavaScript renverra une erreur.

Il existe également des différences dans la manière dont ces deux types de déclarations d'objet sont utilisés.

Pour utiliser un objet littéralement annoté, il vous suffit de l'utiliser en faisant référence à son nom de variable, donc chaque fois que vous en avez besoin, vous pouvez l'appeler en le tapant ;

    myObject.whatAmI();

Avec les constructeurs, vous devez d'abord instancier (créer une nouvelle instance de l'objet) en tapant ;

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

Utilisez des constructeurs.

Prenons le constructeur précédent et construisons-le pour effectuer certaines opérations de base (mais dynamiques) lors de son instanciation.

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

Comme toute fonction JavaScript, nous pouvons utiliser des paramètres dans le constructeur ;

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

Maintenant, instancions notre objet et appelons sa méthode WhatAmI en remplissant les champs obligatoires.

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

Cela avertira "Je suis un objet du langage JavaScript."

Instancier ou ne pas instancier

J'ai mentionné auparavant la différence entre les constructeurs d'objets et les littéraux d'objets. Lorsque des modifications sont apportées à un littéral d'objet, cela affecte cet objet tout au long du script, alors que lorsqu'un constructeur est instancié et que des modifications sont ensuite apportées à cette instance, cela n'affecte aucun autre. instances de l'objet. Essayons un exemple ;

Nous allons d’abord créer un objet littéral ;

	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

Même si vous créez une nouvelle variable et la pointez vers l'objet, cela aura le même effet.

	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'

Essayons maintenant un exercice similaire en utilisant des constructeurs.

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

Comme prévu, les deux renvoient la valeur correcte, mais modifions la myProperty de l'une des instances.

	//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 内存中完全不同的对象实例。

那么您应该使用哪一个呢？好吧，这取决于情况，如果您的脚本只需要一个此类对象（正如您将在本文末尾的示例中看到的那样），则使用对象文字，但如果您需要一个对象的多个实例，其中每个实例彼此独立，并且根据其构造方式可以具有不同的属性或方法，然后使用构造函数。

这个和那个

在解释构造函数时，出现了很多“this”关键字，我想这是讨论作用域的更好时机！

现在您可能会问“您所说的范围是什么”？ JavaScript 中的作用域是基于函数/对象的，因此这意味着如果您在函数之外，则无法使用在函数内部定义的变量（除非您使用闭包）。

然而，存在作用域链，这意味着另一个函数内的函数可以访问其父函数中定义的变量。让我们看一些示例代码。

<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 是在全局对象中定义的，可用于所有函数和对象， var2 是在 function1 中定义的，可用于 function1 和 function2，但是如果你尝试引用从全局对象中获取它会给出错误“var2 未定义”，var3 只能由 function2 访问。

那么“this”指的是什么呢？在浏览器中，“this”引用窗口对象，因此从技术上讲，窗口是我们的全局对象。如果我们在一个对象内部，“this”将引用该对象本身，但是如果您在一个函数内部，这仍然会引用窗口对象，同样，如果您在一个对象内的方法内部，“ this' 将引用该对象。

由于我们的作用域链，如果我们位于子对象（对象内的对象）内部，“this”将引用子对象而不是父对象。

作为旁注，还值得补充的是，当使用 setInterval、setTimeout 和 eval 等函数时，当您通过其中之一执行函数或方法时，“this”指的是 window 对象，因为这些是 window 的方法，所以 setInterval() 和 window.setInterval() 是相同的。

好吧，现在我们已经解决了这个问题，让我们做一个真实的示例并创建一个表单验证对象！

现实世界的用法：表单验证对象

首先我必须向您介绍我们将创建的 addEvent 函数，它是 ECMAScript 的（Firefox、Safari 等）addEventListener() 函数和 Microsoft ActiveX Script 的 AttachEvent() 函数的组合。

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

这将创建一个具有三个参数的新函数，to 是我们将事件附加到的 DOM 对象，type 是事件类型，fn 是触发事件时运行的函数。它首先检查是否支持 addEventListener，如果支持，它将使用它，如果不支持，它将检查 AttachEvent，如果其他所有方法都失败，您可能正在使用 IE5 或同样过时的东西，因此我们将事件直接添加到其事件属性上（注意：第三个选项将覆盖可能已附加到事件属性的任何现有函数，而前两个选项会将其作为附加函数添加到其事件属性中）。

现在让我们设置我们的文档，使其与您开发 jQuery 内容时可能看到的类似。

在 jQuery 中你会有；

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

使用我们的 addEvent 函数；

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

现在我们的 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;
	}			
		
};

所以这是非常基本的，但可以很容易地扩展。

为了解决这个问题，我们首先创建一个新属性，它只是“有效”CSS 类的字符串名称，当应用于表单字段时，会添加有效的效果，例如绿色边框。我们还定义了两个子对象，fname和lname，因此我们可以定义它们自己的属性，这些属性可以被其他地方的方法使用，这些属性是minLength，这是这些字段可以拥有的最小字符数， maxLength 是字段可以拥有的最大字符数，而 fieldName 实际上并没有被使用，但可以用于诸如在错误消息中使用用户友好的字符串识别字段之类的事情（例如“名字字段”）是必需的。')。

接下来我们创建一个 validateLength 方法，它接受两个参数： formEl 要验证的 DOM 元素和 type ，它引用要使用的子对象之一（即 fname 或 lname）。该函数检查字段的长度是否在 minLength 和 maxLength 范围之间，如果不是，那么我们从元素中删除有效类（如果存在）并返回 false，否则如果是，那么我们添加有效类并返回正确。

然后我们有一个 validateEmail 方法，它接受 DOM 元素作为参数，然后我们根据电子邮件类型正则表达式测试这个 DOM 元素值；如果通过，我们再次添加我们的类并返回 true，反之亦然。

最后我们有一个 getSubmit 方法。该方法获得表单的 id，然后循环遍历指定表单内的所有输入元素，以查找哪一个具有提交类型 (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>

现在让我们使用 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 函数中，以便在加载窗口时运行此脚本。首先，我们使用表单 ID 获取表单并将其放入名为 ourForm 的变量中，然后获取提交按钮（使用表单对象 getSubmit 方法）并将其放入名为 submit_button 的变量中，然后设置提交按钮禁用属性为“禁用”。

接下来我们定义一个 checkForm 函数。这会将表单字段内的所有输入存储为一个数组，并将其附加到一个名为..你猜对了的变量.. inputs！然后它定义了一些嵌套的 if 语句，这些语句根据我们的 Form 方法测试输入数组内的每个字段。这就是我们在方法中返回 true 或 false 的原因，因此如果它返回 true，我们将传递该 if 语句并继续执行下一个，但如果它返回 false，我们将退出 if 语句。

根据我们的函数定义，我们在页面最初加载时执行 checkForm 函数，并将该函数附加到 keyup 事件和提交事件。

您可能会问，如果我们禁用了提交按钮，为什么还要附加提交。好吧，如果您专注于输入字段并按下 Enter 键，它将尝试提交表单，我们需要对此进行测试，因此我们的 checkForm 函数返回 true（提交表单）或 false（不提交）形式）。

结论

因此，我们学习了如何在 JavaScript 中定义不同的对象类型并在其中创建属性和方法。我们还学习了一个漂亮的 addEvent 函数，并在基本的现实示例中使用我们的对象。

这就是 JavaScript 面向对象的基础知识。希望这可以让您开始构建自己的 JavaScript 库！如果您喜欢这篇文章并对其他 JavaScript 相关主题感兴趣，请将它们发布在评论中，我很乐意继续撰写它们。感谢您的阅读。

为什么不看看 CodeCanyon 上的 JavaScript 项目范围。您可以找到用于创建滑块、倒计时、加载器和上传器等的脚本。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!