Comment utiliser le mode d'appel JS pour lier ce mot-clé

Cette fois, je vais vous montrer comment utiliser le mode d'appel JS pour vous lier avec le mot-clé this. Quelles sont les précautions pour utiliser le mode d'appel JS pour vous lier avec le mot-clé this. cas pratique, jetons un coup d'oeil ensemble.

Appel d'invocation

Appelez une fonction pour suspendre l'exécution de la fonction actuelle et transmettre le contrôle et les paramètres à la nouvelle fonction.

L'incohérence entre les paramètres réels et formels n'entraînera pas d'erreurs d'exécution, plus seront ignorés et moins seront remplis comme indéfinis

Chaque méthode recevra deux paramètres supplémentaires : this et arguments. La valeur de this dépend du mode d'appel, du mode d'appel : méthode, fonction, constructeur et appliquer le mode d'appel
Ceci se voit attribuer une valeur et se produit au moment où il est appelé. Différents modèles d'invocation peuvent être implémentés à l'aide de la méthode d'appel

var myObject = { 
value: 0, 
increment: function (inc) { 
this.value += typeof inc === 'number' ? inc : 1; 
} 
}; 
myObject.double = function(){ 
var helper = function(){ 
console.log(this);// this point to window 
} 
console.log(this);// this point to object myObject 
helper(); 
} 
myObject.double();//myObject Window

1 Le modèle d'invocation de méthode Modèle d'invocation de méthode

Méthode : La fonction est enregistrée en tant qu'attribut du object. Lorsque la méthode Lorsqu'elle est appelée, elle est liée à l'objet

Méthodes publiques : méthodes pour obtenir le contexte des objets auxquels ils appartiennent via cette

myObject.increment(); 
document.writeln(myObject.value); //

Implémentation sous-jacente : myObject.increment。call(myObject，0);

2 Le modèle d'invocation de fonction Modèle d'invocation de fonction

Lorsque la fonction n'est pas un attribut de l'objet, elle est appelée comme une fonction (un peu absurde.. .), ceci est lié à l'objet global (window) )

Le mode strict est nouveau dans ECMAScript5 Dans ce mode, les problèmes sont exposés le plus tôt possible et facilitent le débogage. ceci est forcément indéfini

var add = function (a,b) { return a + b;}; 
var sum = add（3，4）；// sum的值为7

Implémentation sous-jacente : add.call（window，3，4）

strict mode：add.call（undefined，3，4）

La différence entre le mode d'appel de méthode et le mode d'appel de fonction

function hello(thing) { 
console.log(this + " says hello " + thing); 
} 
person = { name: "Brendan Eich" } 
person.hello = hello; 
person.hello("world") // [object Object] says hello world 等价于 person。hello。call（person，“world”） 
hello("world") // "[object DOMWindow]world" 等价于 hello。call（window，“world”）

3 Le modèle d'invocation de constructeur

JavaScript est un langage basé sur l'héritage prototypique et fournit un ensemble de syntaxe de construction d'objets pour les langages basés sur les classes.

cela pointe vers l'objet renvoyé par new

var Quo = function (string) { 
this.status = string; 
}; 
Quo.prototype.get_status = function ( ) { 
return this.status; 
}; 
var myQuo = new Quo("this is new quo"); //new容易漏写，有更优替换 
myQuo.get_status( );// this is new quo

4 Le modèle d'invocation Apply

apply et call sont des paramètres intégrés de javascript , les deux sont immédiats. Liez ceci à une fonction. Le premier paramètre est un tableau, et le second doit être passé un par un. apply est également implémenté par la couche inférieure de l'appel

apply(this,arguments[]); 
call(this,arg1,arg2...); 
var person = { 
name: "James Smith", 
hello: function(thing,thing2) { 
console.log(this.name + " says hello " + thing + thing2); 
} 
} 
person.hello.call({ name: "Jim Smith" },"world","!"); // output: "Jim Smith says hello world!" 
var args = ["world","!"]; 
person.hello.apply({ name: "Jim Smith" },args); // output: "Jim Smith says hello world!"

En revanche, la fonction bind sépare la liaison de ceci à la fonction et l'appel de la fonction Open, afin que les fonctions puissent être appelées dans un contexte spécifique, en particulier l'implémentation d'application de la liaison d'événement

Function.prototype.bind = function(ctx){ 
var fn = this; //fn是绑定的function 
return function(){ 
fn.apply(ctx, arguments); 
}; 
}; 
bind用于事件中 
function MyObject(element) { 
this.elm = element; 
element.addEventListener('click', this.onClick.bind(this), false); 
}; 
//this对象指向的是MyObject的实例 
MyObject.prototype.onClick = function(e) { 
var t=this; //do something with [t]... 
};

Je pense que vous maîtrisez la méthode. après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Comment utiliser le plug-in d'affichage d'images highslide.js dans jQuery

Comment utiliser Instructions personnalisées Angularjs

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!