Beispiele für die Verwendung dieser Regel und dieses Objekts in JavaScript

Wenn Sie die Regeln in dieser Funktion bestimmen möchten, gibt es mehrere Regeln, um zu bestimmen, was dies in der Funktion ist. Die Feststellung, was das ist, ist eigentlich sehr einfach. Die allgemeine Regel besteht darin, dies festzustellen, wenn eine Funktion aufgerufen wird, indem überprüft wird, wo sie aufgerufen wurde. Es folgt diesen Regeln, die im Folgenden in der Reihenfolge ihrer Priorität beschrieben werden.

Regeln

1. Wenn Sie beim Aufruf einer Funktion das Schlüsselwort new verwenden, handelt es sich in der Funktion um ein brandneues Objekt.

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. Wenn Sie apply, call oder bind verwenden, um eine Funktion aufzurufen, dann ist dies in der Funktion das als Parameter übergebene Objekt.

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. Wenn die Funktion als Methode aufgerufen wird, das heißt, wenn die Funktion in Punktnotation aufgerufen wird, dann ist dies das Objekt, das diese Funktion als Attribut hat. Mit anderen Worten: Wenn sich ein Punkt links von einem Funktionsaufruf befindet, ist dies das Objekt links vom Punkt.

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. Wenn die Funktion als reine Funktion aufgerufen wird, also ohne eine der oben genannten Bedingungen, dann ist dies das globale Objekt. In einem Browser ist dies das Fensterobjekt.

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

Beachten Sie, dass diese Regel tatsächlich mit der dritten Regel identisch ist. Der Unterschied besteht darin, dass Funktionen, die nicht als Methoden deklariert sind, automatisch zu Attributen des globalen Objektfensters werden. Daher handelt es sich tatsächlich um einen impliziten Methodenaufruf. Wenn wir fn() aufrufen, wird es vom Browser tatsächlich als window.fn() verstanden, das ist also window.

console.log(fn === window.fn); // -> true

5. Wenn mehr als eine der oben genannten Regeln zutrifft, legt diejenige mit der höheren Priorität diesen Wert fest.

6. Wenn es sich in ES2015 um eine Pfeilfunktion handelt, ignoriert sie alle oben genannten Regeln und erhält den Bereich, der sie enthält, als Wert davon, wenn sie erstellt wird. Um herauszufinden, was das ist, gehen Sie einfach eine Zeile nach oben, von wo aus Sie die Pfeilfunktion erstellt haben, und sehen Sie, was das dort ist. Der Wert davon ist in einer Pfeilfunktion derselbe.

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

Rückblickend auf die dritte Regel: Wenn wir obj.createArrowFn() aufrufen, ist dies in createArrowFn obj, da dies ein Methodenaufruf ist. Daher wird obj in ArrowFn daran gebunden. Wenn wir eine Pfeilfunktion im globalen Bereich erstellen, ist dieser Wert Fenster.

Regeln anwenden

Schauen wir uns ein Codebeispiel an und wenden diese Regeln an. Probieren Sie es aus und sehen Sie, ob Sie herausfinden können, was dies in verschiedenen Funktionsaufrufen ist.

Bestimmen Sie, welche Regel angewendet wird

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis() gehört zur dritten Regel, dem Methodenaufruf. Andererseits fällt print() unter die vierte Regel, einen reinen Funktionsaufruf. Für print() haben wir beim Aufruf keine New-, Bind/Call/Apply- oder Dot-Notation verwendet, daher entspricht es Regel 4, dies ist das globale Objektfenster.

Wenn mehrere Regeln gelten

Wenn mehrere Regeln gelten, verwenden Sie die Regel mit der höheren Priorität in der Liste.

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

Wenn Regel 2 und Regel 3 gleichzeitig gelten, hat Regel 2 Vorrang.

obj1.print.call(obj2); // -> { value: 17 }

Wenn Regel 1 und Regel 3 gleichzeitig gelten, hat Regel 1 Vorrang.

new obj1.print(); // -> {}

Bibliotheken

Einige Bibliotheken binden diesen Wert manchmal absichtlich an bestimmte Funktionen. Normalerweise ist der nützlichste Wert in einer Funktion daran gebunden. jQuery bindet dies beispielsweise an ein DOM-Element und löst ein Ereignis in einem Rückruf aus. Wenn eine Bibliothek einen Wert hat, der nicht den oben genannten Regeln entspricht, lesen Sie bitte die Dokumentation der Bibliothek sorgfältig durch. Es ist wahrscheinlich, dass sie mit bind gebunden wird.

Dieses Objekt ist basierend auf der Ausführungsumgebung der Funktion gebunden, wenn die Funktion ausgeführt wird. Lassen Sie mich Ihnen eine detaillierte Analyse der Verwendung dieses Objekts in js vorstellen. Tatsächlich besteht der Kern dieses Satzes darin, dass jeder, der die Funktion aufruft, darauf hinweist

Im Einzelnen gibt es normalerweise Folgendes Situationen:

Globale Funktion

In der globalen Umgebung zeigt dies auf Fenster

   
//例子1
 function A() {
 console.log(this)
 }
 A();//Window

Das obige Beispiel ist sehr einfach Die globale Umgebung ist das globale Objektfenster, das als Funktion bezeichnet wird. Zu diesem Zeitpunkt zeigt dies auf das Fenster

Objektmethode

Beim Aufruf als Objektmethode zeigt dies auf das Objekt, das die Methode aufgerufen hat

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

Hier geben wir das Beispiel Sie sind alle relativ einfach und leicht zu verstehen:

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

Dieses Beispiel unterscheidet sich vom vorherigen, einem anonymen Diese Funktion wird zuerst zurückgegeben. Die Funktion wird cFun zugewiesen und dann wird cFun() in der globalen Umgebung aufgerufen, sodass dies zu diesem Zeitpunkt immer noch auf Window verweist.

Was ist, wenn wir hier ein C-Objekt zurückgeben müssen? Wir sagten zu Beginn, dass dieses Objekt bestimmt wird, wenn die Funktion ausgeführt wird. Wenn c.getFunc() ausgeführt wird, zeigt dieses Objekt immer noch auf c, sodass wir dieses nur für das oben Gesagte beibehalten müssen Der Code wurde leicht geändert:

   
//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

Aus diesem Grund können wir in einigen Codes oft var self = this oder var that = this sehen.

Aufrufen und bewerben

Zu diesem Zeitpunkt zeigt das Objekt „this“ normalerweise auf den in der Funktion angegebenen Wert (beachten Sie hier die üblichen zwei Wörter, die in der Prüfung erforderlich sind).

Anruf Es ist ein Klischee, „bewerben“ zu sagen, aber ich werde es ein wenig vorstellen, weil ich befürchte, dass neue Studenten vielleicht noch nicht damit in Berührung gekommen sind (eigentlich nur, um ein paar Wörter zu erfinden). Nehmen Sie als Beispiel den Aufruf: Die Syntax lautet wie folgt:

fun.call(thisArg, arg1, arg2, ...)

Wie Sie diese Methode verwenden, sehen Sie im folgenden Beispiel:

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

在这里我们就可以看出call函数的意思了:指定一个对象o1去调用其他对象o2的方法，此时this对象指向o1

好了，那为什么前面我们说通常呢？因为，这里的thisArg是可以指定为null和undefined的。请看：

   
//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

   

此时的this指向全局对象Window

箭头函数

es6中的箭头函数现在也用的比较频繁，但是有个需要注意的点是：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

其实出现这种情况的根本原因是:箭头函数没有this对象，所以箭头函数的this就是外层代码的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

   

这个例子和前面例子2是基本一样的，只是把普通函数改写成箭头函数，但是此时的this对象已经指向了外层的Window。

考虑到这一点可能不好理解，我们再看几个例子:

   
//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

这个例子里，g的getThis写法就和之前的例子3一样，由于函数在全局环境中运行，所以此时this指向Window；h的getThis使用了箭头函数，所以this指向了外层代码块的this所以，此时this指向的是h。

总结

一般情况下this对象指向调用函数的对象，全局环境中执行函数this对象指向Window

在call和apply函数中this指向指定的对象，如果指定的对为undefined或者null，那么this对象指向Window

在箭头函数中，this对象等同于外层代码块的this。

相关推荐：

JS中的this、apply、call、bind实例分享

函数调用的不同方式及this的指向详解

html的标签中的this应该如何使用

Das obige ist der detaillierte Inhalt vonBeispiele für die Verwendung dieser Regel und dieses Objekts in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!