Maison > interface Web > js tutoriel > JS orienté objet, prototype, call(), apply()

JS orienté objet, prototype, call(), apply()

青灯夜游
Libérer: 2018-10-08 16:33:49
avant
2490 Les gens l'ont consulté

J'ai utilisé prototype.js ce jour-là, alors je l'ai ouvert et j'y ai jeté un œil. J'étais confus après avoir lu quelques lignes. La raison était que je n'étais pas très familier avec la nature orientée objet de js, alors j'ai cherché. Baidu et Google, et ont finalement trouvé un certain succès. Écrivez ceci pour commémorer ^_^.

1. Parce que
J'ai utilisé prototype.js ce jour-là, alors je l'ai ouvert et j'ai jeté un œil. Après avoir lu quelques lignes, j'étais confus. La raison était que je n'étais pas très familier avec le. nature orientée objet de js, j'ai donc cherché sur Baidu + Google Finalement, j'ai finalement gagné un peu, alors j'écris ceci pour le commémorer ^_^.

extrait de code prototype.js

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
// Class使用方法如下 
var A = Class.create(); 
A. prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
} 
var a = new A(‘helloWord!'); 
a. showValue();//弹出对话框helloWord!
Copier après la connexion

l Qu'est-ce que l'initialisation
l Que fait la méthode apply ?
Qu'en est-il de la variable l arguments ?
l Pourquoi la méthode initialize est-elle exécutée après le nouveau A ?

Trouvez la réponse :

2. Js orienté objet
Qu'est-ce que l'initialisation
C'est juste une variable, représentant une méthode, le but est le constructeur de la classe.
Ses fonctions spécifiques sont prises en charge par la nature orientée objet de js. Alors, à quoi ressemble la nature orientée objet de js ? Quelles sont les similitudes et les différences avec Java ?
Regardez le code :

var ClassName = function(v){ 
this.value=v; 
this.getValue=function(){ 
return this.value; 
} 
this.setValue=function(v){ 
this.value=v; 
} 
}
Copier après la connexion

Alors, quelle est la différence entre les fonctions et les classes en JS ?

En fait, ce sont les mêmes. ClassName est une fonction lorsqu'elle apparaît après new, elle est utilisée comme constructeur pour construire l'objet.
Par exemple

var objectName1 = new ClassName(“a”);//得到一个对象
Copier après la connexion

où objectName1 est l'objet obtenu après l'exécution du constructeur ClassName, et ceci dans la fonction ClassName fait référence à l'objet construit après new, donc objectName1 aura un attribut et deux méthodes. Vous pouvez les appeler comme ceci :

objectName1.setValue(''hello''); 
alert(objectName1.getValue());//对话框hello 
alert(objectName1.value) ;//对话框hello
Copier après la connexion

Alors

var objectName2 = ClassName(“b”);//得到一个对象
Copier après la connexion

Qu'obtient objectName2 ? Il s'agit évidemment de la valeur de retour de la méthode. Ici, ClassName est simplement utilisé comme une fonction ordinaire (bien que la première lettre soit en majuscule). Mais il n'y a pas de valeur de retour dans le ClassName écrit précédemment, donc objectName2 ne sera pas défini. Alors, à qui est attribué "b" ? Un objet n'est pas généré ici, mais cette méthode est simplement exécutée, donc ce "b" est attribué à la fenêtre objet qui appelle cette méthode. La preuve est la suivante :

var objectName2 = ClassName(“b”);//得到一个对象 
alert(window.value);//对话框b
Copier après la connexion

Donc toutes les fonctions en JS. are C'est pareil, mais le but peut être différent (utilisé pour construire un objet ou exécuter une procédure).

Il est temps de revenir au sujet. Que fait initialize ?

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
var A = Class.create();
Copier après la connexion

Ce code construit une fonction et la copie dans A. Cette fonction est

function() { 
this.initialize.apply(this , arguments); 
}
Copier après la connexion

et cette dernière méthode est utilisée comme constructeur. Lorsque vous utilisez ce constructeur pour construire un objet, la variable d'initialisation de l'objet construit exécutera la méthode apply(). Le but de apply() sera discuté plus tard, et nous continuerons à parler d'initialize. De cette façon, initialize sera contacté lors de l'initialisation de l'objet (la manière de contacter dépend de l'application).
Alors, que signifie

A.prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
}
Copier après la connexion

 ?

Prototype signifie « prototype ». A est une fonction(), alors A. prototype est une variable dans la fonction, qui est en fait un objet. Quelles sont les méthodes de cet objet, puis quelles sont les méthodes de l'objet généré par la fonction, donc

var a = new A(‘helloWord!'); 
a. showValue();//弹出对话框helloWord!
Copier après la connexion

Ainsi, l'objet a aura également une méthode d'initialisation. De plus, chaque objet construit avec A le sera. Il existe une méthode initialize, et comme mentionné précédemment, le constructeur sera appelé pendant la construction. Le constructeur demandera à initialize d'appeler la méthode apply, donc lorsque new A (« helloWord ! »), initialize revient en arrière et appelle la méthode apply. Il s’agit d’appeler une méthode d’initialisation.

3. call() et apply()

Commençons à étudier apply(). J'ai trouvé des informations sur Internet et je les ai combinées avec mes propres recherches pour. comprendre les fonctions call() et apply(). Les fonctions sont fondamentalement les mêmes. La fonction de function().call(object,{},{}...) ou function().apply (object,[...]) est que l'objet objet appelle la fonction. () ici. La différence est que les paramètres d'appel sont transmis à la fonction à partir de la seconde et peuvent être répertoriés dans l'ordre, séparés par ",". Apply n'a que deux paramètres, le second est un tableau qui stocke tous les paramètres transmis à la fonction.

this.initialize.apply(this , arguments); Que signifie  ?

Le premier this ici fait référence à l'objet généré après avoir appelé le constructeur avec new, qui est le a précédent, donc bien sûr le second this devrait également faire référence au même objet. Ensuite, cette phrase est que this (c'est-à-dire a) appelle la méthode initialize, et le paramètre est l'objet arguments (objet tableau de paramètres), donc lorsque le constructeur est exécuté, l'objet a exécutera la méthode initialize pour initialiser, donc qu'il est cohérent avec le mot " initialiser " signifie la bonne chose.

Alors, comment les paramètres d'exécution de la méthode initialize sont-ils transmis ?

4. Objet Arguments

Ce code peut tout expliquer :

function test(){ 
alert(typeof arguments); 
for(var i=0; i<arguments.length; i++){ 
alert(arguments[i]); 
} 
} 
test("1","2","3"); 
test("a","b");
Copier après la connexion

Après l'exécution, l'alerte (type d'arguments) affichera l'objet, indiquant ; que les arguments sont des objets. Ensuite, 1, 2 et 3 seront joués en séquence. Les arguments de description sont le groupe de paramètres réel de la fonction appelante.

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
}
Copier après la connexion

arguments 就是create返回的构造函数的实参数组,那么在 var a = new A(‘helloWord!'); 的时候‘helloWord!'就是实参数组(虽然只有一个字符串),传递给方法apply,然后在调用initialize 的时候作为参数传递给初始化函数initialize。 

以上就是本章的全部内容,更多相关教程请访问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!

Étiquettes associées:
source:jb51.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal