Eine ausführliche Erklärung dazu in JavaScript

Dies ist in JavaScript relativ flexibel. Dies kann je nach Umgebung oder wenn dieselbe Funktion auf unterschiedliche Weise aufgerufen wird, unterschiedlich sein. Aber es gibt ein allgemeines Prinzip, das heißt, es bezieht sich auf das Objekt, das die Funktion aufruft.

Inhaltsverzeichnis der Serie

• Eine ausführliche Einführung in den Abschluss von JavaScript (Closure)

• Ein in -Eine ausführliche Einführung in JavaScript ist dies

• Eine ausführliche Einführung in die Prototypenkette und die Vererbung von JavaScript

Das Folgende sind meine Studiennotizen: die in 8 Situationen aufgelistet sind.

Global this (browser)

Dies zeigt im globalen Bereich im Allgemeinen auf das globale Objekt, das ein Fenster im Browser-In-Knoten ist , dieses Objekt ist global.

console.log(this.document === document); // true (document === window.document)
console.log(this === window); // true 
this.a = 37;  //相当于创建了一个全局变量a
console.log(window.a); // 37

Dies (Browser) einer allgemeinen Funktion

Allgemeine Funktionsdeklaration oder Funktionsausdruck, wenn die Funktion direkt aufgerufen wird, zeigt dies immer noch auf das globale Objekt Objekt ist Fenster, dieses Objekt ist global im Knoten.

function f1(){  
  return this;  
} 
f1() === window; // true, global object

Geben Sie ein weiteres Beispiel, es wird nach dem Lesen sehr klar sein

function test(){
　this.x = 1;
　　alert(this.x);
}
test(); // 1

Um zu beweisen, dass dies das globale Objekt ist, nehmen Sie einige Änderungen am Code vor:

var x = 1;
function test(){
　alert(this.x);
}
test(); // 1

Das Laufergebnis ist immer noch 1. Ändern Sie es erneut:

var x = 1;
function test(){
　this.x = 0;
}
test();
alert(x); //0

Aber im strikten Modus zeigt dies beim Aufruf einer Funktion auf undefiniert. Dies ist ein Grund, warum der Knoten den strikten Modus verwendet.

function f2(){  
  "use strict"; // see strict mode  
  return this; 
} 
f2() === undefined; // true

Dies als Funktion einer Objektmethode

Üblicherweise wird dies als Objektmethode verwendet.

Im folgenden Beispiel erstellen wir ein Attribut f. Sein Wert ist ein Funktionsobjekt. Wir nennen die Funktion oft den Wert des Objektattributs. Wenn es als Methode eines Objekts aufgerufen wird, zeigt dies auf das Objekt o

var o = {  
   prop: 37,  
   f: function() {    
     return this.prop;    
  } 
};  

console.log(o.f()); // logs 37

. Wir müssen ein Objekt nicht unbedingt wie ein Funktionsliteral definieren. Im folgenden Fall definieren wir nur ein Objekt o Wenn die Funktion independent() direkt aufgerufen wird, zeigt dies auf das Fenster, aber wenn wir vorübergehend eine Eigenschaft f durch Zuweisung erstellen und sie auf das Funktionsobjekt verweisen, erhalten wir immer noch 37.

var o = {prop: 37}; 

function independent() {  
   return this.prop; 
} 

o.f = independent;  
console.log(o.f()); // logs 37

Es kommt also nicht darauf an, wie die Funktion erstellt wird, aber solange die Funktion als Methode des Objekts aufgerufen wird, zeigt dies auf das Objekt.

dies auf der Objektprototypkette

Im folgenden Beispiel: Wir erstellen zunächst ein Objekt o, das ein Attribut f und eine Funktion hat Als Wert des Objektattributs erstellen wir ein Objekt p über Object.create(o), p ist ein leeres Objekt, und sein Prototyp zeigt auf o und verwendet dann p.a = 1, um die Attribute zu erstellen das Objekt p, dann Wenn wir die Methode für den Prototyp aufrufen, können this.a, this.b immer noch a und b für das Objekt p erhalten. Was hier beachtet werden muss, ist, dass der Prototyp von p o ist. Wenn wir p.f() aufrufen, rufen wir das Attribut f in der Prototypenkette auf.

var o = {f:function(){ return this.a + this.b; }};
var p = Object.create(o); 
p.a = 1; 
p.b = 4; 
console.log(p.f()); // 5

get/set-Methode und dies

dies in der get/set-Methode zeigt im Allgemeinen auf das Objekt, in dem sich die get/set-Methode befindet

function modulus(){   
   return Math.sqrt(this.re * this.re + this.im * this.im); 
} 
var o = { 
  re: 1, 
  im: -1, 
  get phase(){      
     return Math.atan2(this.im, this.re);    
  } 
}; 
Object.defineProperty(o, 'modulus', {       //临时动态给o对象创建modules属性
  get: modulus, enumerable:true, configurable:true}); 

console.log(o.phase, o.modulus); // logs -0.78 1.4142

Dies

im Konstruktor verwendet new, um MyClass als Konstruktor aufzurufen. Dies zeigt auf ein leeres Objekt und der Prototyp dieses Objekts zeigt auf MyClass.prototype (eine Zusammenfassung finden Sie in diesem Artikel der Prototypenkette), aber die Zuweisung von this.a = 37 wurde beim Aufruf vorgenommen, so dass am Ende dieser als Rückgabewert verwendet wird (es wird keine Rückgabeanweisung geschrieben, oder wenn die Rückgabe ein Basistyp ist, wird dies der Fall sein als Rückgabewert verwendet werden), das zweite Beispiel einer Rückgabeanweisung. Wenn das Objekt zurückgegeben wird, wird a = 38 als Rückgabewert verwendet

function MyClass(){    
   this.a = 37; 
} 
var o = new MyClass();  
console.log(o.a); // 37 

function C2(){    
   this.a = 37;   
   return {a : 38};  
} 

o = new C2();  
console.log(o.a); // 38

Die Call/Apply-Methode und dies

Zusätzlich zu verschiedenen Aufrufmethoden können einige Methoden von Funktionsobjekten die Funktionsausführung davon ändern, z. B. Aufruf/Anwenden.

Im Grunde gibt es keinen Unterschied zwischen call und apply, außer dass call Parameter flach übergibt, während apply ein Array übergibt. Wie im folgenden Beispiel

Wann sollten wir „Call“ und „Apply“ verwenden? Wenn wir beispielsweise Object.prototype.toString aufrufen, aber ein bestimmtes This angeben möchten, können wir Object.prototype.toString.call(this) verwenden, um einige Methoden aufzurufen, die nicht direkt aufgerufen werden können. Nehmen Sie das folgende Beispiel:

function add(c, d){  
   return this.a + this.b + c + d;  
} 
var o = {a:1, b:3}; 
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16     //第一个参数接收的是你想作为this的对象
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 

function bar() {  
   console.log(Object.prototype.toString.call(this)); 
} 
bar.call(7); // "[object Number]"

Bind-Methode und diese

Bind-Methode wird ab ES5 bereitgestellt, daher unterstützt ie9+ nur

function f(){  
   return this.a;  
} 

var g = f.bind({a : "test"});   //想把某个对象作为this的时候，就把它传进去，得到一个新对象g
console.log(g()); // test       //重复调用的时候，this已经指向bind参数。这对于我们绑定一次需要重复调用依然实现绑定的话，会比apply和call更加高效（看下面这个例子）

var o = {a : 37, f : f, g : g};  
console.log(o.f(), o.g()); // 37, test  
 //o.f()通过对象的属性调用，this指向对象o;比较特殊的是即使我们把新绑定的方法作为对象的属性调用，o.g()依然会按之前的绑定去走，所以答案是test不是g

Zusammenfassung

Als ich an einem Projekt arbeitete, wurde mir klar, wie wichtig diese Grundkonzepte sind, wenn man sie nicht einzeln umsetzt, tappt man wirklich versehentlich in eine Falle. In Zukunft werde ich auch die Prototypenkette, den Umfang, die Vererbung, den Kettenaufruf, die Regelmäßigkeit und andere Kenntnisse zusammenfassen.

Das Obige ist die detaillierte Erklärung dazu in JavaScript. Weitere verwandte Inhalte finden Sie hier Achten Sie auf PHP Chinese Net (m.sbmmt.com)!