A quoi ça sert en js ? Utilisation de ce mot-clé en js (avec code)

Le contenu de cet article porte sur quelle est l'utilité de cela en js ? L'utilisation de ce mot-clé en js (avec code). L'article introduit la compréhension de cela en js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tout d'abord, vous devez comprendre les différentes manières d'appeler des fonctions en JS :
1. Appel de fonction normal
2. Appeler en tant que méthode
3. >4.Utilisez la méthode apply/call pour appeler
5.Méthode Function.prototype.bind
Fonction fléchée 6.es6
Points : peu importe la façon dont la fonction est appelée, qui appelle cette fonction ou cette méthode, cela le mot-clé pointe vers qui, gardez cela à l’esprit. !important

Je vais expliquer chaque méthode avec des exemples ci-dessous !

1.Utilisation de ce mot-clé : appel de fonction ordinaire

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

Dans ce code, la fonction fun est appelée comme une fonction ordinaire. En fait, fun est. utilisé comme fonction globale. Il est appelé par une méthode de l'objet window (tout le monde devrait le savoir), c'est-à-dire window.fun(); donc ici l'objet window appelle la méthode fun, alors ceci dans la fonction fun fait référence. window, et window a également un autre nom d'attribut, la valeur est segmentfault.

2 L'utilisation de ce mot-clé est une méthode pour appeler

var name=". segmentfault";

var fun={

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

}

fun.showName();
//Voici l'objet amusant appelant la méthode showName. Évidemment, ce mot-clé pointe vers le objet fun, donc ce sera le nom de sortie

var funA = fun.showName;

funA(); //Output segmentfault
//Ici, la méthode fun.showName est affectée au funA À l'heure actuelle, la variable funA est équivalente à l'objet window. Un attribut, donc lorsque showNameA() est exécuté, elle est équivalente à window.funA(), c'est-à-dire que l'objet window appelle la méthode funA, donc la variable funA est équivalente à l'objet window. ce mot-clé pointe vers window
Regardons les choses autrement :

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 L'utilisation de ce mot-clé est d'appeler le constructeur

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. L'utilisation de ce mot-clé est d'appeler la méthode call/apply

En JS, les fonctions sont aussi des objets, donc les fonctions ont aussi des méthodes. Hérité de Function.prototype à la méthode Function.prototype.call/Function.prototype.apply

La fonction la plus importante de la méthode call/apply est de changer le pointage de ce mot-clé.

Obj.method. apply( AnotherObj, arguments);

FruitB appelle la méthode de changement de fruitA et la lie dans fruitA à l'objet FruitB.

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

5. Méthode Function.prototype.bind() pour l'utilisation de ce mot-clé

Utilisez la méthode bind() ci-dessous pour générer une erreur de segment

 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

Ici setTimeout(function(){console.log(this.name)}.bind(this),50);, la fonction anonyme crée une nouvelle fonction après avoir utilisé la méthode bind(this), cette nouvelle peu importe là où la fonction est exécutée, cela pointe vers fun, pas window, donc le résultat final est "mon nom est segmentfault" au lieu de "mon nom est segmentfault-A"

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

Quelques autres choses à noter Lieu :

setTimeout/setInterval/Lorsque la fonction anonyme est exécutée, cela pointe vers l'objet window par défaut, à moins que le point ne soit modifié manuellement. Dans "JavaScript Advanced Programming", il est écrit : "Le code d'appel du timeout (setTimeout) est exécuté dans la portée globale, donc la valeur de this dans la fonction pointe vers l'objet window en mode non strict, et en mode strict Dans mode, il pointe vers undéfini". Cet article est entièrement en mode non strict.

6. Fonction d'évaluation pour l'utilisation de ce mot-clé

Lorsque cette fonction est exécutée, elle est liée à l'objet dans la portée actuelle

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. Utilisation de la fonction flèche de ce mot-clé

Dans es6, ce pointeur est fixe et pointe toujours vers l'objet externe, car la fonction flèche ne l'a pas, elle ne peut donc pas fonctionner de nouvelles instances seules En même temps, les méthodes call, apply, bind et autres ne peuvent pas être utilisées pour changer le pointeur de this.

Recommandations associées :

 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

Compréhension du mot-clé this dans js

À propos de la clé this dans js Word compréhension_javascript skills

Une question sur js ce mot-clé_javascript skills

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!