Detaillierte Erklärung dieses Attributs in JavaScript

Dieser Artikel stellt hauptsächlich dieses Attribut in JavaScript vor. Der Herausgeber findet es ziemlich gut. Ich werde es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Dies gibt immer ein -Objekt zurück, also das Attribut oder die Methode an der Stelle, an der es sich gerade befindet Objekt.

Die Eigenschaften eines Objekts können einem anderen Objekt zugewiesen werden, daher ist das aktuelle Objekt, in dem sich die Eigenschaften befinden, variabel, das heißt, der Sinn davon ist variabel.

z. B.:

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

Ergebnis: „Name: John Doe“

Sehen Sie sich ein anderes Beispiel an:

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

Das Ergebnis ist auch „Name: Li Si“, da dies zu diesem Zeitpunkt auf das Objekt verweist, auf dem f ausgeführt wird – das Fenster der obersten Ebene

Verwendungszwecke davon

1. Globale Umgebung – egal ob innerhalb der Funktion, solange sie in der globalen Umgebung ausgeführt wird, bezieht sich dies auf das Objektfenster der obersten Ebene

2. Konstruktor – bezieht sich auf das Instanzobjekt

z. B.:

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

Das Ergebnis ist, dass sie alle „Farbe“ zurückgeben

Der obige Code definiert einen Konstruktor Obj Da dies auf zeigt Definieren Sie für das Instanzobjekt this.p in Obj. Das Definieren des Instanzobjekts verfügt über ein p-Attribut, und dann kann die m-Methode dieses p-Attribut zurückgeben.

3. Objektmethoden

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

Nur ​​wenn die foo-Methode direkt für das obj-Objekt aufgerufen wird, zeigt dies auf das Objekt, bei dem das Der Codeblock befindet sich derzeit.

Fall 1: (obj.foo = obj.foo)()——Fenster

Fall 2: (false || obj.foo)()——Fenster

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

Im obigen Code wird obj.foo zuerst berechnet und dann ausgeführt. Auch wenn sich sein Wert nicht ändert, zeigt dies nicht mehr an obj

4. Node

Wenn es sich in Node in der globalen Umgebung befindet, zeigt dies auf global, und in der Modulumgebung zeigt es auf module.exports

Hinweise zur Verwendung

1. Vermeiden Sie mehrere Ebenen.

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

Das Ausführungsergebnis ist:

{f1: ƒ}

Fenster {decodeURIComponent: ƒ, postMessage: ƒ, Unschärfe: ƒ, Fokus: ƒ, Schließen: ƒ, …}

Warum zeigt dies in f2 auf das globale Objekt? Denn der Ausführungsprozess des obigen Codes ist eigentlich

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

Lösung 1 – Verwenden Sie eine Variable, die auf das äußere This in der zweiten Ebene zeigt

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

Verwenden Sie eine Variable, um den Wert von festzulegen Dies und der anschließende interne Aufruf dieser Variablen ist eine sehr nützliche und weit verbreitete Methode.

Lösung 2 – Verwenden Sie den strikten Modus. Wenn dies innerhalb der Funktion auf das Objekt der obersten Ebene verweist, wird ein Fehler gemeldet .

2. Vermeiden Sie die Verwendung in Array-Verarbeitungsmethoden

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

Ergebnis:

undefiniertes a1

undefiniertes a2

führt zu this Der Grund für das Ergebnis ist derselbe wie beim mehrschichtigen this im vorherigen Absatz

Lösung eins – Zwischenvariablen verwenden

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

Lösung zwei – behandeln Sie dies als den zweiten Teil von Korrigieren Sie mit den Parametern der forEach-Methode ihre Betriebsumgebung

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

3. Vermeiden Sie dies in der Rückruffunktion

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

Binden Sie diese Methode

JavaScript bietet drei Methoden: Aufrufen, Anwenden und Binden, um den Punkt dieser

function.prototype.call()

Die Aufrufmethode der Funktionsinstanz zu ändern/zu korrigieren kann den Bereich angeben, in dem sich diese befindet, wenn die Funktion ausgeführt wird. Der Parameter der Aufrufmethode ist ein Objekt. Wenn der Parameter leer, null oder undefiniert ist, wird das globale Objekt standardmäßig übergeben. Wenn der Aufrufparameter kein Objekt ist, wird er automatisch in ein Wrapping-Objekt umschlossen. 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

Eine Anwendung der Aufrufmethode besteht darin, die native Methode des Objekts aufzurufen

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

Funktion. Prototyp.apply ()

Der einzige Unterschied zwischen apply und call besteht darin, dass apply ein Array als Parameter akzeptiert, wenn die Funktion ausgeführt wird, func.apply(thisValue,[arg1,arg2,... ])

Eine der Anwendungen von apply – das größte Element des Arrays finden

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

Die zweite Anwendung von apply – die leeren Elemente des Arrays in undefiniert ändern (da forEach Methode des Arrays überspringt die leeren Elemente, überspringt jedoch nicht undefinierte) ?

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

Die laufenden Ergebnisse sind nicht die gleichen wie oben, sie sind alle a b

Die dritte Anwendung von apply – Konvertieren arrayartiger Objekte

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

Die vierte Anwendung von apply – das Objekt der Bindungsrückruffunktion

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()

bind-Methode wird verwendet, um dieses im Funktionskörper an eine zu binden object und geben Sie dann eine neue Funktion zurück

Das folgende Beispiel geht schief, nachdem der Methode ein Wert zugewiesen wurde

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

Lösung:

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

bind geht eins Schritt weiter als call and apply Darüber hinaus können Sie zusätzlich zur Bindung auch die Parameter der ursprünglichen Funktion binden.

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

Für alte Browser, die die Bindungsmethode nicht unterstützen, können Sie die definieren Bindemethode selbst

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung dieses Attributs in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!