Exemple de tutoriel sur ceci et prototype d'objet en javaScript

this et prototype d'objet

this est un mot-clé très spécial qui est automatiquement défini dans la portée de toutes les fonctions

// foo .count est 0, l'interprétation littérale est fausse

function foo(num) {

console .log( "foo:"+ num);

this.count++;

}

foo.count = 0;

var i;

for(i=0;i<10;i++){

if(i>5){

foo(i)

}

>

console.log(foo.count) //0

　　　

// Utiliser la portée lexicale pour résoudre le problème

function foo(num) {

console.log("foo:"+ num);

data.count++;

}

var data = {

count:0

};

var i;

for(i=0;i<10;i++){

if(i>5){

foo(i)

}

}

console.log(data.count ); // 4

// Utilisez l'identifiant foo au lieu de this pour référencer la fonction Objets , évitent le problème de ce et dépendent entièrement de la variable foo Portée lexicale .

function foo(num) {

console.log("foo:"+ num);

foo.count++;

}

foo.count = 0

var i;

for(i=0;i<10;i++){

if(i>5 ){

foo(i)

}

}

console.log(foo.count) //4

// Force ce à pointer vers fooobjet fonction

function foo(num) {

console.log("foo:"+num);

this.count++

}

foo.count = 0;

var i;

for(i=0; i< 10; i++){

if(i>5){

foo.call(foo,i);

}

>

console.log(foo.count) //4

this est lié au moment de l'exécution, pas au moment de l'écriture. Son contexte dépend des différentes conditions de. lorsque la fonction est appelée. La somme contraignante de this n'a rien à voir avec la position de la déclaration de la fonction, mais dépend uniquement de la façon dont la fonction appelle .

ceAnalyse complète

Pile d'appels et emplacement d'appel

fonction baz(){

//La pile d'appels actuelle est : baz

// Par conséquent, la position d'appel actuelle est la portée globale

console.log("baz");

bar(); // <--L'emplacement d'appel de bar

}

>function bar(){

//La pile d'appels actuelle est : baz-> Par conséquent, la position d'appel actuelle est à

baz

console.log("bar);foo(); // <-- call of foo

Position

}

fonction foo(){

//

La pile d'appels actuelle est :

baz-> bar->foo

// Par conséquent, la position d'appel actuelle est à

bar

console.log( "foo");}

baz(); // <-- où baz

est appelé

Uniquement lors de l'exécution en mode non

strict

, la liaison par défaut peut être liée à l'objet global uniquement au niveau supérieur ou dernier du

chaîne de référence d'attribut d'objet. Une couche de gris affecte la position appelante

function foo() {console.log(this.a);

}

var. obj2 = {

a : 42,

foo:foo

};

var obj1 = {

a:2,

obj2 : obj2

};

obj1.obj2.foo(); // 42

Scénarios d'application typiques de la liaison dure Créez simplement une fonction wrapper, transmettez toutes les fonctions et renvoyez toutes les valeurs reçues

function foo(something){<.>console.log(this.a,something).

retourne this.a + quelque chose;

};

var obj = {

a:2

};

var bar = function() {

return foo.apply(obj,arguments);

};

var b = bar(3) ; // 2 3

console.log(b) // 5

Une autre façon est de créer une

i

Fonctions auxiliaires qui peuvent être réutilisées

fonction foo(something){console.log(this. a, quelque chose);

retourne ceci.a + quelque chose;

}

//

Fonction de liaison auxiliaire simple

fonction bind(fn,obj){

return function(){

return fn.apply(obj,arguments);

};

}

var obj = {

a:2

}

var bar = bind(foo,obj);

var b = bar(3); // 2 3

console.log(b) // 5

ES5 fournit des méthodes intégrées Function.prototype.bind, bind(..) renverra un A nouvelle fonction codée en dur qui

définira l'argument dans le contexte de this et appellera la fonction d'origine.

fonction foo(quelque chose){

console.log(this.a, quelque chose);

retourne ceci.a + quelque chose;

>

var obj = {

a:2

}

var bar = foo.bind(obj);

var b = bar(3); // 3 5

console.log(b) // 5

API Contexte de l'appel

function foo(el){

console.log(el,this.id);

}

var obj = {

id: "génial'

}

// Lorsque vous appelez foo(..), mettez ceci est lié à obj

[1,2,3].forEach(foo,obj);

// 1 génial 2 génial 3 génial

nouveau peut affecter le comportement de liaison de cette fonction foo (a){

this. a = a;

>

var bar = new foo(2);

console.log(bar. a);

Juger

ce

1.Si la fonction est appelée en

nouveau ( nouveau liaison) ? Si c'est le cas, ce est lié à l'objet nouvellement créé >var bar = new foo();2.Si la fonction passe

appel, appliquer (

show contraignant

) ou appel de liaison dure Si oui, précisez l'objet de lors de la liaison de ceci. >va bar = foo.call(obj2)3.Si la fonction est appelée dans un objet contextuel(Liaison implicite

)

Si oui, dans quel contexte

ce est lié. var bar = obj1.foo()4.Si aucun des deux, utilisez la liaison par défaut. Si en mode strict, il est lié à indéfini, sinon il est lié à l'objet global.

var bar = foo();

reliure souplefonction foo(){journal de la console. ("nom :" + this.name);

}

var obj = {nom : "obj"},obj2 = {nom : "obj2" } ,

obj3 = {nom : "obj3"},

obj3 = {nom : "obj3"};

var foo0BJ = foo.softBind(obj);

foo0BJ(); // nom:obj

obj2.foo = foo.softBind(obj);

obj2.foo(); // nom:obj3 <--Regardez !

setTimeout(obj2.foo,10);

// name:obj <--- reliure souple appliquée

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!