Home > Article > Web Front-end > Four modes of this value in JS

Four modes of this value in JS

小云云Original: 2018-02-24 14:22:341494browse

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: this and arguments.

Parametersarguments 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 parameters. When the function is specifically called, when the actual parameters are arguments# When the number of ## does not match the number of formal parameters parameters, 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 undefined. 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.

Parameters

this 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 new. But the value of this 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.

2. Method calling mode

#When a function is defined on an attribute of an object, then we call the function the object a method. When this method is called, this inside the function points to the object. The example is as follows:

<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.addmethod You can access your own object through thisobj, 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 are called public methods.

3. Function calling mode

When a function is not a property of an object, it is called as a function.

Example 1

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

Example 2

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

It can be seen from the above two examples that when calling a function in this mode, this is bound to the global object. If we reason according to the

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

4. Constructor calling mode

If you call a function with

new#, then a # connected to the function will be created internally. ##prototype A new object of members, and this will be bound to that new object. 

如果函数定义时内部存在return关键词，这时return 出去的就是this(新创建的对象)。

<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就是Function.prototype上的一个方法。

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js about mouse leave eventNext article：js about mouse leave event

See more

Four modes of this value in JS

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

1. Function Introduction

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

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

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

五、apply调用模式

Related articles