Quatre modes de cette valeur en JS

Cet article partage principalement avec les quatre modes de cette valeur en JS, en espérant aider tout le monde.

1. Introduction aux fonctions

À l'intérieur de chaque fonction en JavaScript, à l'exception de l'instruction Ming, chaque fonction possède également deux paramètres supplémentaires : this<span style="font-size: 14px;">this</span> et <code><span style="font-size: 14px;">arguments</span>arguments.

Paramètres<code><span style="font-size: 14px;">arguments</span><code><span style="font-size: 14px;">arguments</span><span style="font-size: 14px;">parameters</span> est une variable de type tableau. La valeur dans le tableau est ce qui est transmis lorsque le. la fonction est réellement appelée. Lors de la définition d'une fonction, il y aura des paramètres formels de la fonction paramètres<code><span style="font-size: 14px;">arguments</span> Lors de l'appel spécifique de la fonction, lorsque les paramètres réels . <span style="font-size: 14px;">parameters</span>arguments Lorsque le nombre de ne correspond pas au nombre de paramètres formels <span style="font-size: 14px;">undefined</span><span style="font-size: 14px;">paramètres</span>

, pas d'erreur d'exécution se produira. S'il y a trop de paramètres réels, les valeurs de paramètres en excès seront ignorées. S'il y a trop peu de valeurs de paramètres réelles, les valeurs manquantes seront remplacées par

<span style="font-size: 14px;">undefined</span><span style="font-size: 14px;">this</span>. Il n'y a pas de vérification de type des valeurs des paramètres lors de l'exécution de la fonction, ce qui signifie que n'importe quel type de valeur peut être transmis à n'importe quel paramètre. <span style="font-size: 14px;">new</span>Paramètres<span style="font-size: 14px;">this</span>ceci est un concept très important dans les langages de programmation orientés objet, il fait référence à des An spécifiques l'instance d'un objet de classe est l'objet spécifique lui-même qui sort de la classe

<h1>nouveau<span style="font-size: 14px;"></span> </h1>. Mais la valeur de <p>this<span style="font-size: 14px;"></span></p> en JavaScript dépend du mode d'appel. Il existe quatre modes d'appel en JavaScript : le mode d'appel de méthode, le mode d'appel de fonction, le mode d'appel de constructeur et le mode d'appel d'application.

<span style="font-size: 14px;">var obj = {    value: 1,<br/>    add: function() {        // 这里的 this 是绑定在 obj 这个对象上的<br/>        this.value += 1;        return this.value;<br/>    }<br/>};<br/>console.info(obj.add()); // 2console.info(obj.add()); // 3<br/></span>

<span style="font-size: 14px;">obj.add</span>2. Mode d'appel de méthode <span style="font-size: 14px;">this</span>Quand une fonction est définie sur un attribut d'un objet, alors on dit que la fonction est l'objet une méthode. Lorsque cette méthode est appelée, ceci à l'intérieur de la fonction pointe vers l'objet. L'exemple est le suivant : <span style="font-size: 14px;">obj</span>obj.add<.>Les méthodes peuvent accéder à leurs propres objets <span style="font-size: 14px;">this</span><span style="font-size: 14px;">obj</span>

via

<span style="font-size: 14px;">this</span>

, Il peut donc obtenir la valeur de l'objet ou modifier l'objet.

La liaison de ceci à l'objet se produit lorsque la méthode est appelée. Les méthodes qui peuvent obtenir le contexte de l'objet auquel elles appartiennent via

this

sont appelées méthodes publiques.

3. Mode d'appel de fonction

<span style="font-size: 14px;">var a = 1;var add = function(b) {<br/>  // 这里的 this 是绑定在全局作用于 window 上的<br/>  return this.a + b;<br/>};<br/>console.info(add(2)); // 3<br/></span>

Lorsqu'une fonction n'est pas une propriété d'un objet, elle est appelée en tant que fonction.

<span style="font-size: 14px;">var a = 1;var obj = {<br/>  a: 2,<br/>  add: function(b) {<br/><br/>    var innerAdd = function(innerB) {<br/>      // 这里的 this 绑定的还是 window 对象上的 this<br/>      return this.a + innerB;<br/>    };<br/>    console.info(innerAdd(0)); // 1<br/>    // 这里的 this 是绑定在 obj 对象上的<br/>    return this.a + b;<br/>  }<br/>};<br/>console.info(obj.add(0)); // 2<br/></span>

Exemple 1

Exemple 2

<span style="font-size: 14px;">var a = 1;var obj = {<br/>  a: 2,<br/>  add: function(b) {<br/>    // 将绑定在 obj 对象上的 this 赋值给变量 that<br/>    var that = this;    var innerAdd = function(innerB) {<br/>      // 这里调用的是变量 that,这个 that 是绑定在 obj 对象上的<br/>      return that.a + innerB;<br/>    };<br/>    console.info(innerAdd(0)); // 2<br/>    // 这里的 this 是绑定在 obj 对象上的<br/>    return this.a + b;<br/>  }<br/>};<br/>console.info(obj.add(0)); // 2<br/></span>

Comme le montrent les deux exemples ci-dessus, lors de l'appel d'une fonction dans ce mode, celle-ci est liée à l'objet global. Si l'on raisonne selon le modèle d'appel de méthode , ceci devrait ici être lié à la fonction externe, mais ce défaut de conception n'est pas insoluble. Nous pouvons attribuer le this de la fonction externe à une variable. L'exemple suivant :

<span style="font-size: 14px;">new</span>Exemple 3<span style="font-size: 14px;">prototype</span>

Mode d'appel du constructeur Si vous appelez une fonction avec new, alors un prototype, et cela sera lié à ce nouvel objet.

如果函数定义时内部存在<span style="font-size: 14px;">return</span>关键词，这时return 出去的就是<span style="font-size: 14px;">this</span>(新创建的对象)。

<span style="font-size: 14px;">// 定义一个 Person 函数（类）var Person = function(name) {  // 这里的 this 绑定的就是 new 出来的那个实例对象<br/>  this.name = name;<br/>};// 定义 Person 函数（类）的原型对象Person.prototype = {<br/>  run: function() {    /**<br/>    * 这里的 this 并没有绑定在 Person.prototype 对象上<br/>    * 而是绑定在 new 出来的那个实例对象上<br/>    */<br/>    console.info(this.name + &#39;的 run 方法。&#39;);<br/>  }<br/>};var lily = new Person(&#39;lily&#39;);<br/>lily.run(); // lily的 run 方法。<br/></span>

提示：一个函数，如果定义的目的就是结合 new 前缀来调用，那它就被称为构造函数。并且按照约定，它们定义的函数名以大写字母开头。

五、apply调用模式

因为JavaScript是一门函数式的面向对象编程语言，所以函数也可以拥有方法，apply就是<span style="font-size: 14px;">Function.prototype</span>上的一个方法。

apply方法让我们构建一个参数数组传递给调用函数，它还可以容许我们选择this的值。apply方法接受两个参数，第一个是要绑定 this 的值，第二个就是这个函数执行时的实参 参数 数组了。

例一

<span style="font-size: 14px;">var add = function(a, b) {<br/>  return a + b;<br/>};var result = add.apply(null, [1, 2]);<br/>console.info(result); // 3<br/></span>

例二

<span style="font-size: 14px;">var obj = {<br/>  name: &#39;obj&#39;,<br/>  introduction: function() {<br/>    console.info(&#39;My name is &#39; + this.name);<br/>  }<br/>};<br/>obj.introduction.apply(obj, []); // My name is objvar anotherObj = {<br/>  name: &#39;anotherObj&#39;};<br/><br/>obj.introduction.apply(anotherObj, []); // My name is anotherObj<br/></span>

总结：以上就是JavaScript中用到this的几种情况了，在面向对象中搞清楚this的指向是非常重要的，在JavaScript中也同等重要。

相关推荐：

javascript函数中的this的四种绑定形式

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

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

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!