Qu'est-ce que c'est? Une analyse approfondie de cela en JavaScript

Qu'est-ce que c'est ? L'article suivant vous présentera cela en JavaScript et parlera des différences entre cela dans les différentes méthodes d'appel de fonctions. J'espère que cela vous sera utile !

JavaScript中的this格外的不一样，比如Java语言中的this是在代码的执行阶段是不可更改，而JavaScript的this是在调用阶段进行绑定。因为这一性质所以给了thisBeaucoup d'espace pour jouer. Mais c'est quelque peu différent en mode strict et en mode non strict, et les différentes méthodes d'appel de la fonction entraînent également certaines différences à cet égard.

Qu'est-ce que c'est ?

Tout d'abord, définissons ceci : il s'agit d'une variable déterminée lors de la création du contexte d'exécution qui ne peut pas être modifiée lors de l'exécution.

Le soi-disant contexte d'exécution est le processus dans lequel le moteur JavaScript déclare certaines variables, fonctions, this qui seront utilisées en interne dans le code avant d'exécuter un morceau de code, puis de les enregistrer. dans les objets variables. Cet « extrait de code » comprend : code global (code à l'intérieur de la balise de script), code interne de fonction, code interne d'évaluation. La chaîne de portées que nous connaissons sera également enregistrée ici, stockée sous forme de tableau dans l'attribut [[Scopes]] de la fonction correspondante.

Ceci n'est déterminé que lors de la phase d'appel de fonction, qui est la phase de création du contexte d'exécution, et est attribué et stocké dans l'objet variable. Cette fonctionnalité conduit également à la variabilité de this : c'est-à-dire que lorsque la fonction est appelée de différentes manières, la valeur de this peut être différente.

Nous avons dit plus haut que cela se comporte différemment en mode strict et en mode non strict :

var a = 1;
function fun() {
   'use strict';
    var a = 2;
      return this.a;
}
fun();//报错 Cannot read property 'a' of undefined

• En mode strict, cela pointe vers undefined

var a = 1;
function fun() {
    var a = 2;
      return this.a;
}
fun();//1

• En mode non strict, cela pointe vers window ;

Le même morceau de code ci-dessus se comporte différemment selon les modes car il est différent en mode strict et en mode non strict.

Conclusion : Lorsqu'une fonction est appelée indépendamment, c'est this pointe vers undefined en mode strict. En mode non strict, quand this pointe vers undefined, elle pointe automatiquement vers l'objet global (fenêtre dans le navigateur)

Plus Permettez-moi de mentionner que dans l'environnement global, cela vous concerne. Regardons un autre exemple :

this.a = 1;
var b = 1;
c = 1;
console.log(this === window)//true
//这三种都能得到想要的结果，全局上下文的变量对象中存在这三个变量

Encore une chose, que se passe-t-il lorsque this n'est pas utilisé dans la fonction ? Regardez un exemple :

var a = 1000;
var obj = {
    a: 1,
      b: this.a + 1
}
function fun() {
    var obj = {
          a: 1,
        c: this.a + 2 //严格模式下这块报错 Cannot read property 'a' of undefined
    }
    return obj.c;
}
console.log(fun());//1002
console.log(obj.b);//1001

Dans ce cas, cela pointe toujours vers la fenêtre. Ensuite, nous pouvons tirer une conclusion distincte :

Lorsque obj est déclaré globalement, ceci dans les propriétés internes de obj pointe vers l'objet global. Lorsque obj est déclaré dans une fonction, cela pointera vers undéfini en mode strict et undéfini en non. -mode strict. Converti automatiquement pour pointer vers l'objet global.

D'accord, je viens de m'y essayer, et je connais la différence entre cela en mode strict et en mode non strict. Cependant, la méthode la plus couramment utilisée dans notre vie quotidienne est de l'utiliser dans les fonctions. au-dessus des différentes méthodes d'appel de this dans les fonctions. Il existe encore des différences, alors quelles sont les méthodes d'appel des fonctions ? Quatre types :

• Appelez directement
• en tant que méthode objet dans l'environnement global ou une fonction ordinaire
• Utilisez apply et call
• en tant que constructeur

Voici les quatre situations :

Appel direct

L'exemple ci-dessus est en fait un appel direct, mais j'ai décidé d'écrire un autre exemple :

var a = 1;
var obj  =  {
    a: 2,
      b: function () {
        function fun() {
          return this.a
        }
       console.log(fun());
    }
} 
obj.b();//1

Bien que la fonction fun soit définie dans la méthode obj.b, c'est toujours une fonction ordinaire qui pointe vers undefined en non strict. mode , et pointe automatiquement vers l'objet global. Comme prévu, le mode strict signalera l'erreur undefined.a n'est pas établi, a n'est pas défini.

L'important est redit : Lorsqu'une fonction est appelée indépendamment, c'est this pointe vers undefined en mode strict. En mode non strict, lorsque this pointe sur undefined, elle pointe automatiquement vers l'objet global (fenêtre du navigateur). ) .

En tant que méthode d'un objet

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
console.log(obj.b())//2

bLa fonction anonyme référencée par b est appelée comme méthode d'obj. À ce stade, cela pointe vers l'objet qui l'appelle. C'est l'objet. Et si la méthode b n’est pas appelée en tant que méthode objet ? Qu'est-ce que ça veut dire ? Ça y est :

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
var t = obj.b;
console.log(t());//1

Comme ci-dessus, le résultat de l'exécution de la fonction t s'avère être la variable globale 1. Pourquoi ? Cela implique l'espace mémoire de Javascript. C'est-à-dire que l'attribut b de l'objet obj stocke une référence à la fonction anonyme, qui peut être comprise comme un pointeur. Lors de l'attribution d'une valeur à t, il n'ouvre pas d'espace mémoire séparé pour stocker la nouvelle fonction. Au lieu de cela, t stocke un pointeur qui pointe vers cette fonction. Cela équivaut à exécuter ce morceau de pseudo-code :

var a = 1;
function fun() {//此函数存储在堆中
    return this.a;
}
var obj = {
  a: 2,
  b: fun //b指向fun函数
}
var t = fun;//变量t指向fun函数
console.log(t());//1

À ce stade, t est un pointeur vers la fonction fun Appeler t équivaut à appeler fun directement En appliquant les règles ci-dessus, imprimer 1 est naturellement facile à comprendre.

使用apply，call

关于apply和call是干什么的怎么用本文不涉及，请移驾：apply，call

这是个万能公式，实际上上面直接调用的代码，我们可以看成这样的：

function fun() {
      return this.a;
}
fun();//1
//严格模式
fun.call(undefined)
//非严格模式
fun.call(window)

这时候我们就可以解释下，为啥说在非严格模式下，当函数this指向undefined的时候，会自动指向全局对象，如上，在非严格模式下，当调用fun.call(undefined)的时候打印出来的依旧是1，就是最好的证据。

为啥说是万能公式呢？再看函数作为对象的方法调用:

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
obj.b()
obj.b.call(obj)

如上，是不是很强大，可以理解为其它两种都是这个方法的语法糖罢了，那么apply和call是不是真的万能的呢？并不是，ES6的箭头函数就是特例，因为箭头函数的this不是在调用时候确定的，这也就是为啥说箭头函数好用的原因之一，因为它的this固定不会变来变去的了。关于箭头函数的this我们稍后再说。

作为构造函数

何为构造函数？所谓构造函数就是用来new对象的函数，像Function、Object、Array、Date等都是全局定义的构造函数。其实每一个函数都可以new对象，那些批量生产我们需要的对象的函数就叫它构造函数罢了。注意，构造函数首字母记得大写。

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun.prototype = {
  contructor: Fun,
  say: function () {
    return this.name + '正在说话';
  }
}
var f = new Fun();
f.run();//Damonare正在跑步
f.say();//Damonare正在说话

如上，如果函数作为构造函数用，那么其中的this就代表它即将new出来的对象。为啥呢？new做了啥呢？

伪代码如下：

function Fun() {
  //new做的事情
  var obj = {};
  obj.__proto__ = Fun.prototype;//Base为构造函数
  obj.name = 'Damonare';
  ...//一系列赋值以及更多的事
  return obj
}

也就是说new做了下面这些事:

• 创建一个临时对象
• 给临时对象绑定原型
• 给临时对象对应属性赋值
• 将临时对象return

也就是说new其实就是个语法糖，this之所以指向临时对象还是没逃脱上面说的几种情况。

当然如果直接调用Fun(),如下：

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun();
console.log(window)

其实就是直接调用一个函数，this在非严格模式下指向window，你可以在window对象找到所有的变量。

另外还有一点，prototype对象的方法的this指向实例对象，因为实例对象的__proto__已经指向了原型函数的prototype。这就涉及原型链的知识了，即方法会沿着对象的原型链进行查找。

箭头函数

刚刚提到了箭头函数是一个不可以用call和apply改变this的典型。

我们看下面这个例子：

var a = 1;
var obj = {
  a: 2
};
var fun = () => console.log(this.a);
fun();//1
fun.call(obj)//1

以上，两次调用都是1。

那么箭头函数的this是怎么确定的呢？箭头函数会捕获其所在上下文的  this 值，作为自己的 this 值，也就是说箭头函数的this在词法层面就完成了绑定。apply，call方法只是传入参数，却改不了this。

var a = 1;
var obj = {
  a: 2
};
function fun() {
    var a = 3;
    let f = () => console.log(this.a);
      f();
};
fun();//1
fun.call(obj);//2

如上，fun直接调用，fun的上下文中的this值为window，注意，这个地方有点绕。fun的上下文就是此箭头函数所在的上下文，因此此时f的this为fun的this也就是window。当fun.call(obj)再次调用的时候，新的上下文创建，fun此时的this为obj，也就是箭头函数的this值。

再来一个例子：

function Fun() {
    this.name = 'Damonare';
}
Fun.prototype.say = () => {
    console.log(this);
}
var f = new Fun();
f.say();//window

有的同学看到这个例子会很懵逼，感觉上this应该指向f这个实例对象啊。不是的，此时的箭头函数所在的上下文是__proto__所在的上下文也就是Object函数的上下文，而Object的this值就是全局对象。

那么再来一个例子:

function Fun() {
    this.name = 'Damonare';
      this.say = () => {
        console.log(this);
    }
}
var f = new Fun();
f.say();//Fun的实例对象

如上，this.say所在的上下文，此时箭头函数所在的上下文就变成了Fun的上下文环境，而因为上面说过当函数作为构造函数调用的时候(也就是new的作用)上下文环境的this指向实例对象。

【相关推荐：javascript学习教程】

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!