Was nützt das in js? Verwendung dieses Schlüsselworts in js (mit Code)

Der Inhalt dieses Artikels handelt davon, welchen Nutzen dies in js hat. Die Verwendung dieses Schlüsselworts in js (mit Code) bietet einen gewissen Referenzwert.

Zunächst müssen Sie die verschiedenen Möglichkeiten verstehen, Funktionen in JS aufzurufen:
1. Normaler Funktionsaufruf
3 >4.Verwenden Sie die Apply/Call-Methode zum Aufrufen
5.Function.prototype.bind-Methode
6.es6-Pfeilfunktion
Punkte: Egal wie die Funktion aufgerufen wird, wer diese Funktion oder Methode aufruft, das Wenn das Schlüsselwort auf wen verweist, denken Sie daran. !wichtig

Ich werde jede Methode unten anhand von Beispielen erklären!

1.Verwendung dieses Schlüsselworts: gewöhnlicher Funktionsaufruf

(function fun(){
        this.name="segmentfault";
        console.log(this);  //window
        console.log(this.name);  //segmentfault        
})()
console.log(window.name);  //segmentfault  由此可见name属性属于window的属性。

In diesem Code wird die Fun-Funktion als gewöhnliche Funktion aufgerufen das globale Objekt window Es wird von einer Methode aufgerufen (das sollte jeder wissen), nämlich window.fun(); also ruft das Fensterobjekt hier die Fun-Methode auf, dann bezieht sich diese in der Fun-Funktion auf das Fenster und das Fenster hat auch einen anderen Attributnamen, der Wert ist segmentfault.

2. Die Verwendung dieses Schlüsselworts erfolgt als Methode zum Aufrufen von

var name="segmentfault";

var fun ={

name:"segmentfault-A",
showName:function(){
    console.log(this.name);  //输出  segmentfault-A
}

}fun.showName();

//Hier ist das fun-Objekt, das die showName-Methode aufruft, also name
wird ausgegeben
var funA = fun.showName;

funA(); //Segmentfehler ausgeben

//Hier wird die fun.showName-Methode der Variable funA zugewiesen Die Variable funA entspricht einem Attribut des Fensterobjekts. Wenn showNameA() ausgeführt wird, entspricht sie window.funA(), d. h. das Fensterobjekt ruft die Methode funA auf, sodass das Schlüsselwort this auf window Schauen wir es uns anders an:

var funA={
    name:"segmentfault",
    showName:function(){
        console.log(this.name);
    }
}
var funB={
    name:"segmentfault-A",
    sayName:funA.showName
}

funB.sayName();  //输出 segmentfault-A
//虽然showName方法是在funA这个对象中定义，但是调用的时候却是在funB这个对象中调用，因此this对象指向funB

3.this Die Verwendung des Schlüsselworts besteht darin, den Konstruktor

function fun(name){
    this.name=name;
}
var funA = fun("segmentfault");   
console.log(funA.name); // 输出  undefined
console.log(window.name);//输出  segmentfault
//上面代码没有进行new操作，相当于window对象调用fun("segmentfault")方法，那么this指向window对象，并进行赋值操作window.name="segmentfault".

var funB=new fun("segmentfault");
console.log(funB.name);// 输出 segmentfault

4 Das Schlüsselwort besteht darin, die Funktion zum Aufrufen/Anwenden der Methode

in JS aufzurufen. Es ist auch ein Objekt, daher haben Funktionen auch Methoden. Von Function.prototype an die Methode Function.prototype.call/Function.prototype.apply geerbt Die größte Funktion der Methode call/apply besteht darin, die Ausrichtung dieses Schlüsselworts zu ändern.

Obj.method. apply( AnotherObj,arguments);

var name="segmentfault-A";
var fun={
    name:"segmentfault",
    showName:function(){
        console.log(this.name);
    }
}
fun.showName.call(); //输出 "segmentfault-A"
//这里call方法里面的第一个参数为空，默认指向window。
//虽然showName方法定义在fun对象里面，但是使用call方法后，将showName方法里面的this指向了window。因此最后会输出"segmentfault-A";
function FruitA(n1,n2){
    this.n1=n1;
    this.n2=n2;
    this.change=function(x,y){
        this.n1=x;
        this.n2=y;
    }
}

var fruitA = new FruitA("cheery","banana");
var FruitB={
    n1:"apple",
    n2:"orange"
};
fruitA.change.call(FruitB,"pear","peach");

console.log(FruitB.n1); //输出 pear
console.log(FruitB.n2);// 输出 peach

FruitB ruft die Change-Methode von FruitA auf und bindet diese in FruitA an das Objekt FruitB.

5. Function.prototype.bind()-Methode zur Verwendung dieses Schlüsselworts

 var name="segmentfault-A";
function fun(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name);
        },50)
    }
}
var funA = new fun("segmentfault");
funA.sayName()  //输出  “my name is segmentfault-A”;
//这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为segmentfault-A

Verwenden Sie die bind()-Methode unten, um segmentfault auszugeben

var name="segmentfault";
function fun(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name);
        }.bind(this),50)  //注意这个地方使用的bind()方法，绑定setTimeout里面的匿名函数的this一直指向fun对象
    }
}
var funA = new fun("segmentfault");
funA.sayName()  //输出  “my name is segmentfault”;
//这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为segmentfault

Hier setTimeout(function(){console.log(this.name)}.bind(this),50); verwendet die anonyme Funktion die Methode bind(this), um eine neue Funktion zu erstellen, unabhängig davon, wo sich diese neue Funktion befindet Lokal Ausführung, dies deutet auf Spaß hin, nicht auf Fenster, daher lautet die endgültige Ausgabe „Mein Name ist Segmentfault“ anstelle von „Mein Name ist Segmentfault-A“

Ein paar andere Dinge, die Sie beachten sollten:

Wenn setTimeout/ Wenn die Funktion setInterval/anonymous ausgeführt wird, zeigt sie standardmäßig auf das Fensterobjekt, es sei denn, der Punkt wird manuell geändert. In „JavaScript Advanced Programming“ heißt es: „Der Timeout-Aufrufcode (setTimeout) wird im globalen Bereich ausgeführt, sodass der Wert davon in der Funktion im nicht strengen Modus und im strengen Modus auf das Fensterobjekt zeigt Modus zeigt es auf undefiniert". Dieser Artikel ist alles im nicht strengen Modus.

6. Evaluierungsfunktion für die Verwendung dieses Schlüsselworts

Wenn diese Funktion ausgeführt wird, wird sie an das Objekt im aktuellen Bereich gebunden

var name="segmentfault-A";
var fun = {
    name:"segmentfault",
    showName:function(){
        eval("console.log(this.name)");
    }
}

fun.showName();  //输出  "segmentfault"

var a = fun.showName;
a();  //输出  "segmentfault-A"

7. Pfeilfunktion zur Verwendung dieses Schlüsselworts

Der This-Punkt in es6 ist fest und zeigt immer auf das externe Objekt, da die Pfeilfunktion dies nicht hat und daher kein neues Objekt instanziieren kann Gleichzeitig können Sie den Zeiger nicht mit den Methoden call, apply, bind und anderen ändern.

 function Timer() {
    this.seconds = 0;
    setInterval( () => this.seconds ++, 1000);
} 

var timer = new Timer();

setTimeout( () => console.log(timer.seconds), 3000);

// 3
   // 在构造函数内部的setInterval()内的回调函数，this始终指向实例化的对象，并获取实例化对象的seconds的属性,每1s这个属性的值都会增加1。否则最后在3s后执行setTimeOut()函数执行后输出的是0

Verwandte Empfehlungen:

Verstehen des Schlüsselworts „dieses“ in js

Über das Schlüsselwort „dieses“ in js Verständnis_Javascript-Fähigkeiten

Eine Frage zu js this keyword_javascript skills

Das obige ist der detaillierte Inhalt vonWas nützt das in js? Verwendung dieses Schlüsselworts in js (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!