Introduction à plusieurs méthodes d'appel de fonctions indiquées par ceci dans JS

Le contenu de cet article est une introduction à plusieurs méthodes d'appel de fonctions signalées par ceci dans JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les débutants en JavaScript seront toujours confus au sujet du pointeur this. Si vous souhaitez apprendre JavaScript en profondeur, vous devez d'abord clarifier plusieurs concepts liés à cela. En JavaScript, cela pointe toujours vers un objet, mais l'objet spécifique vers lequel il pointe est lié dynamiquement au moment de l'exécution en fonction de l'environnement d'exécution de la fonction, et non de l'environnement au moment où la fonction est déclarée. À l'exception des situations rares et d'évaluation, dans les applications pratiques, ce pointeur peut être grossièrement divisé en quatre types suivants.

Appel comme méthode d'un objet

Lorsqu'une fonction est appelée comme méthode d'un objet, cela pointe vers l'objet :

var person = {
  name: 'twy',
  getName: function() {
    console.info(this === person);  // 输出true
    console.info(this.name);     // 输出twy
  }
}
person.getName();

Appel comme méthode normale function

Lorsque la fonction est appelée comme une fonction ordinaire, celle-ci en mode non strict pointe vers l'objet global :

function getName(){
  // 非严格模式
  console.info(this === window); // 浏览器环境下输出true
}
getName();

En mode strict ceci n'est pas défini :

function getName(){
  // 严格模式
  "use strict"
  console.info(this === window); // 输出false
}
getName();

Appel du constructeur

Lors de la création d'un objet, ceci dans le constructeur pointe vers le nouvel objet :

function person(){
  // 构造函数
  this.color = 'white';
}
var boy = new person();
console.info(boy.color);  // 输出white

appeler ou appliquer

Utiliser Function.prototype.apply ou Function.prototype.call OK Changer dynamiquement le pointeur this de la fonction entrante :

// 声明一个父亲对象，getName方法返回父亲的名字
var father = {
  name: 'twy',
  getName: function(){
    return this.name;
  }
}
// 生命一个儿子对象，但是没有返回名字的功能
var child = {
  name: 'chy'
}
console.info(father.getName()); // 输出twy

// 使用call或apply将father.getName函数里this指向child
console.info(father.getName.call(child)); // 输出chy
console.info(father.getName.apply(child)); // 输出chy

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!