This article mainly shares with the four modes of this value in JS, hoping to help everyone.

1. Function Introduction

Inside each function in JavaScript, except for the declaration In addition to the formal parameters defined when ##, each function also has two additional parameters: <span style="font-size: 14px;"></span>this<span style="font-size: 14px;"></span> and <span style="font-size: 14px;"></span>arguments<span style="font-size: 14px;"></span>. <span style="font-size: 14px;"></span>

Parameters<span style="font-size: 14px;"></span>arguments<span style="font-size: 14px;"></span> is an array type variable. The value in the array is what is passed in when the function is actually called. parameter list. When defining a function, there will be formal parameters of the function <span style="font-size: 14px;"></span>parameters<span style="font-size: 14px;"></span>. When the function is specifically called, when the actual parameters are <span style="font-size: 14px;"></span>arguments# When the number of <span style="font-size: 14px;"></span>## does not match the number of formal parameters <span style="font-size: 14px;"></span>parameters<span style="font-size: 14px;"></span>, no runtime error will occur. If there are too many actual parameters, the excess parameter values ​​will be ignored. If there are too few actual parameter values, the missing values ​​will be replaced with <span style="font-size: 14px;"></span>undefined<span style="font-size: 14px;"></span>. There is no type checking of parameter values ​​when the function is executed, which means that any type of value can be passed to any parameter. <span style="font-size: 14px;"></span>

<span style="font-size: 14px;"></span>this<span style="font-size: 14px;"></span> is a very important concept in object-oriented programming languages, it refers to specific classes The instance of the object is the specific object itself that comes out of the class <span style="font-size: 14px;"></span>new<span style="font-size: 14px;"></span>. But the value of <span style="font-size: 14px;"></span>this<span style="font-size: 14px;"></span> in JavaScript depends on the calling mode. There are four calling modes in JavaScript: method calling mode, function calling mode, constructor calling mode and apply calling mode. <span style="font-size: 14px;"></span>

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

<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>

obj.add<span style="font-size: 14px;"></span>method You can access your own object through <span style="font-size: 14px;"></span>this<span style="font-size: 14px;"></span><span style="font-size: 14px;"></span>obj<span style="font-size: 14px;"></span>, so it can access it from the object Get the value or modify the object. This binding to the object occurs when the method is called. Methods that can obtain the context of the object to which they belong through this<span style="font-size: 14px;"></span> are called public methods. <span style="font-size: 14px;"></span>

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

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

Example 1

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

<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>

Copy after login

Example 2

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

<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>

Copy after login

method calling pattern, this here should be bound to the external function, but this design flaw is not unsolvable. We can assign this of the external function to a variable. The following example:

Example 3

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

<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>

Copy after login

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

<span style="font-size: 14px;"></span>new<span style="font-size: 14px;"></span>#, then a # connected to the function will be created internally. ##prototype<span style="font-size: 14px;"> A new object of members, and this will be bound to that new object. </span>

如果函数定义时内部存在<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应该如何使用

The above is the detailed content of Four modes of this value in JS. For more information, please follow other related articles on the PHP Chinese website!