Explication détaillée de cet attribut en JavaScript

Cet article présente principalement l'attribut this en JavaScript. L'éditeur pense qu'il est plutôt bon, je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil.

cela renvoie toujours un objet , c'est-à-dire renvoie la propriété ou la méthode où elle se trouve actuellement . 🎜> objet.

Les propriétés d'un objet peuvent être attribuées à un autre objet, donc l'objet actuel où se trouvent les propriétés est variable, c'est-à-dire que le point de celui-ci est variable.

par exemple :

var A = {
	name : '张三',
	describe : function(){
		return '姓名：' + this.name;
	}
};
var B = {
	name : '李四'
}
B.describe = A.describe;
B.describe();

Résultat : "Nom : John Doe"

Regardez un autre exemple :

var A = {
	name : '张三',
	describe : function(){
		return '姓名：' + this.name;
	}
};
var name = '李四'
f = A.describe;
f();

Le résultat est également "Nom : Li Si", car à ce moment-là, cela pointe vers l'objet où f s'exécute - la fenêtre de niveau supérieur

Occasions d'utilisation de ceci

1. Environnement global - peu importe si cela se trouve à l'intérieur de la fonction, tant qu'elle s'exécute dans l'environnement global, cela fait référence à la fenêtre d'objet de niveau supérieur

2. Constructeur - fait référence à l'objet instance

eg :

var Obj = function(p){
	this.p = p;
}
Obj.prototype.a = function(){
	return this.p;
}
var obj = new Obj('color');
obj.a();
obj.p;

Le résultat est que "color" est renvoyé

Le code ci-dessus définit un constructeur Obj Puisque cela pointe vers le constructeur Obj. objet d'instance, définissez this.p dans Obj, ce qui est tout à fait Pour définir l'objet d'instance a un attribut p, puis la méthode m peut renvoyer cet attribut p.

3. Méthodes objet

var obj = {
	foo : function(){
		console.log(this);
	}
};
obj.foo();//obj

Uniquement lorsque la méthode foo est directement appelée sur l'objet obj, cela pointera vers obj. Dans d'autres utilisations, cela pointera vers l'objet où se trouve l'objet obj. le bloc de code est actuellement localisé.

Cas 1 : (obj.foo = obj.foo)()——fenêtre

Cas 2 : (false || obj.foo)()——fenêtre

Cas 3 : (1, obj.foo)()——window

Dans le code ci-dessus, obj.foo est calculé en premier puis exécuté Même si sa valeur ne change pas, cela ne pointe plus vers. obj

4. Node

Dans Node, s'il est dans l'environnement global, cela pointe vers global, et dans l'environnement module, cela pointe vers module.exports

Remarques sur l'utilisation de ceci

1. Évitez ce multicouche

var o = {
	f1 : function(){
		console.log(this);
		var f2 = function(){
			console.log(this);
		}();
	}
}
o.f1();

Le résultat de l'exécution est :

{f1 : ƒ}

Fenêtre {decodeURIComponent : ƒ, postMessage : ƒ, flou : ƒ, focus : ƒ, close : ƒ, …}

Pourquoi cela dans f2 pointe-t-il vers l'objet global ? Parce que le processus d'exécution du code ci-dessus est en fait

var temp = function(){
	console.log(this);
};
var o = {
	f1 : function(){
		console.log(this);
		var f2 = temp();
	}
}
o.f1();

Solution 1 - Utiliser une variable pointant vers l'extérieur this dans la deuxième couche

var o = {
	f1 : function(){
		console.log(this);
		var that = this;
		var f2 = function(){
			console.log(that);
		}();
	}
}
o.f1();

Utiliser une variable Fixer la valeur de ceci, puis appeler cette variable en interne est une méthode très utile et largement utilisée

Solution 2 - Utiliser le mode strict, si ceci à l'intérieur de la fonction pointe vers l'objet de niveau supérieur, cela signalera une erreur. .

2. Évitez de l'utiliser dans les méthodes de traitement de tableaux

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		this.p.forEach(function(item){
			console.log(this.v + ' ' + item);
		});
	}
}
o.f();

Résultat :

undefined a1

undefined a2

conduit à this La raison du résultat est la même que celle du multicouche this dans le paragraphe précédent

Solution un - utiliser des variables intermédiaires

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		var that = this;
		this.p.forEach(function(item){
			console.log(that.v + ' ' + item);
		});
	}
}
o.f();

Solution deux - traiter ceci comme la deuxième partie de les paramètres de la méthode forEach, corrigez son environnement d'exploitation

var o = {
	v : 'hello',
	p : ['a1','a2'],
	f : function(){
		this.p.forEach(function(item){
			console.log(this.v + ' ' + item);
		},this);
	}
}
o.f();

3. Évitez cela dans la fonction de rappel

var o = new Object();
o.f = function(){
	console.log(this === o);
}
o.f();//true
$("#button").on("click",o.f);//false

Lier cette méthode

JavaScript fournit trois méthodes : appeler, appliquer et lier pour changer/corriger le point de ceci

function.prototype.call()

La méthode d'appel de l'instance de fonction peut Spécifier la portée où il se trouve lorsque la fonction est exécutée. Le paramètre de la méthode d'appel est un objet. Si le paramètre est vide, nul ou non défini, l'objet global sera transmis par défaut. Si le paramètre d'appel n'est pas un objet, il sera automatiquement encapsulé dans un objet d'habillage. func.call(thisValue,arg1,arg2,…)

var n = 123;
var obj = {n : 456};
function a(){
	console.log(this.n);
}

a.call();//123
a.call(null);//123
a.call(undefined);//123
a.call(window);//123
a.call(obj);//456

Une application de la méthode call consiste à appeler la méthode native de l'objet

var obj = {};
//原生方法
obj.hasOwnProperty('toString');//false
//覆盖了原生的方法
obj.hasOwnProperty = function(){
	return true;
}
obj.hasOwnProperty('toString');//true
//调回原生的方法
Object.prototype.hasOwnProperty.call(obj,'toString');//false

fonction. prototype.apply ()

La seule différence entre apply et call est que apply accepte un tableau comme paramètre lorsque la fonction est exécutée, func.apply(thisValue,[arg1,arg2,... ])

Une des applications de apply - trouver le plus grand élément du tableau

var a = [10,3,4,2];
Math.max.apply(null,a);

La deuxième application de apply - changer les éléments vides du tableau en non défini (car le forEach La méthode du tableau ignorera les éléments vides, mais ne sautera pas undéfini)  ?

var a = ['a','','b'];
function print(i){
	console.log(i);
}
a.forEach(print);//a b
Array.apply(null,a).forEach(print);//a undefined b

Les résultats d'exécution ne sont pas les mêmes que ci-dessus, ils sont tous un b

La troisième application de apply - conversion d'objets de type tableau

Array.prototype.slice.apply({0:1,length:1});

La quatrième application de apply - l'objet de la fonction de rappel de liaison

var o = new Object();
o.f = function(){
	console.log(this === o);
}
var f = function(){
	o.f.apply(o);//或o.f.call(o);
}
$("#button").on("click",f);

function.prototype.bind()

la méthode bind est utilisée pour lier ceci dans le corps de la fonction à un object , puis renvoie une nouvelle fonction

L'exemple suivant se trompera après avoir attribué une valeur à la méthode

var d = new Date();
d.getTime();
var print = d.getTime;
print();//Uncaught TypeError: this is not a Date object.

Solution :

var print = d.getTime.bind(d);

bind en va un allez plus loin que call et apply De plus, en plus de lier cela, vous pouvez également lier les paramètres de la fonction d'origine

var add = function(x,y){
	return x * this.m + y * this.n;
}
var obj = {
	m:2,
	n:2
}
var newAdd = add.bind(obj,5);//绑定add的第一个参数x
newAdd(5);//第二个参数y

Pour les anciens navigateurs qui ne prennent pas en charge la méthode bind, vous pouvez définir le lier la méthode vous-même

if(!('bind' in Function.prototype)){
	Function.prototype.bind = function(){
		var fn = this;
		var context = arguments[0];
		var args = Array.prototype.slice.call(arguments,1);
		return function(){
			return fn.apply(context,args);
		}
	}
}

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!