Detailed explanation of the usage of this keyword in Javascript

This is a feature in Javascript that is very easy to misunderstand and then use incorrectly. Therefore, the following article mainly introduces to you the relevant information about the problem of this keyword pointing in Javascript. The test questions in the article test your familiarity with this. Friends in need can refer to it. Let's take a look together.

Preface

Javascript is an object-based dynamic language, that is to say, everything is an object. A typical example is that functions are also treated as ordinary objects. Javascript can implement object-oriented programming through certain design patterns, in which this "pointer" is a very important feature in realizing object-oriented programming. This article will give you a detailed introduction to the relevant content pointed to by the this keyword in Javascript. Let us do a small test first. If you get all the answers correct, congratulations, you don’t need to read any further.

Test questions

First question

<script>
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;
  alert(this.str);
 }
 window.demo(); // ??

 var obj = {
  str: "wangwu",
  say: function() {
   alert(this.str);
  }
 }
 obj.say(); // ??

 var fun = obj.say;
 window.fun(); // ??
</script>

Second question

<script>
 var username = &#39;zhangsan&#39;;

 (function() {
  var username = &#39;lisi&#39;;
  alert(this.username); // ??
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  function test() {
   alert(this.username);
  }

  test(); // ??
 }
 demo();
</script>

Third question

<script>
 function Person() {
  this.username = &#39;zhangsan&#39;;
  this.say = function() {
   alert(&#39;我叫&#39; + this.username);
  }
 }

 var p = new Person();
 p.say(); // ??

 var p1 = new Person();
 p1.say(); // ??
</script>

Question 4

##

<script>
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 demo(); // ??
 demo(obj1); // ??
 demo(obj2); // ??
 demo.call(obj1); // ?? 
 demo.apply(obj2); // ??
</script>

Answer

• The first question: zhangsan wangwu zhangsan

• The second question: zhangsan zhangsan

• The third question: My name is zhangsan My name is zhangsan

• The fourth question: zhangsan zhangsan zhangsan lisi wangwu

（ Look down, there is a detailed analysis below)

this

• points to the calling function Object

• No object calling function/Anonymous function self-calling (this points to window)

• Object generated through new

• apply/call

#1. Point to the object of the calling function

<script>
 // this:指向调用函数的对象
 var str = &#39;zhangsan&#39;;

 function demo() {
  var str = &#39;lisi&#39;;

  //this->window
  console.log(this);
  alert(this.str);
 }
 window.demo(); // zhangsan

 var obj = {
  str: "wangwu",
  say: function() {
   // this->obj
   alert(this.str);
  }
 }
 obj.say(); // wangwu

 var fun = obj.say;
 window.fun(); // zhangsan
</script>

• The global function (demo) belongs to the method of the window object. The window calls demo, so this points to the window

• obj calls the say method, and this Pointing to obj

• fun() is a global function, and the declared fun receives a simple function in obj and does not call it (obj.say() is the function that is called ), fun at this time is a function (function(){alert(this.str);}), then when fun() calls the function, this points to window

• Who calls the function, then this points to who

## 2. Calling functions without objects/self-calling anonymous functions->this points to window

<script>
 // 2.匿名函数自执行|匿名函数|无主函数 this->window
 var username = &#39;zhangsan&#39;;

 // 匿名函数自执行 this->window
 (function() {
  var username = &#39;lisi&#39;;
  console.log(this); // window
  alert(this.username); // zhangsan
 })()

 function demo() {
  var username = &#39;wangwu&#39;;

  // 无主函数 this->window
  function test() {
   // this->window
   alert(this.username);
  }

  test(); // zhangsan
 }
 demo();
</script>

Because the anonymous function has no name, it is attached to window
test(), Whoever calls test points to who. Of course, after experimenting, it is not called by window, nor is it called by demo. If no one cares about it, then it points to window. It is equivalent to a mainless function that has no owner calling it.

3. Objects generated through new

##

<script>
 // 3.通过new的对象：this指向产生的对象
 // 函数
 function Person() {
  // 属性
  this.username = &#39;zhangsan&#39;;
  // 方法
  this.say = function() {
   // this->p
   console.log(this); // Person对象
   alert(&#39;我叫&#39; + this.username);
  }
 }

 // 实例化出一个对象:p就具有了username属性和say方法
 var p = new Person();
 console.log(p); // Person对象
 console.log(p.username); // zhangsan
 p.say(); // 我叫zhangsan

 // this->p1
 var p1 = new Person();
 p1.say(); // Person对象 我叫zhangsan
</script>

When our function Person uses this format to write attributes and methods, then we must use new to make the attributes and methods valuable, and use new to use the attributes and methods in the function

4. Apply/call call

First of all, let’s understand what apply()/call() is?

apply()/call(): The function is finally called, but the internal this points to thisObj

function.call([thisObj[,arg1[, arg2[, [,.argN]]]]])
function.apply([thisObj[,argArray]])

Note :

1. Call the function function, but this in the function points to thisObj (change the internal pointer of the object)

2. If thisObj is not passed parameter, the default is the global object

3. Contact and difference between call()/apply()

Contact: The function is the same, the first parameter is thisObj

Difference: If there are more parameters passed

The actual parameters of call() are listed one by one

The actual parameters of apply() The parameters are all placed in the second array parameter

An example of understanding apply()/call():

<script>
 // apply()/call()
 function demo() {
  console.log(123);
 }

 // 调用函数的时候，demo.call()/demo.apply()最终调用的还是demo()
 demo(); // 123
 demo.call(); //123
 demo.apply(); // 123
</script>

<script>
 // call()/apply()的区别：
 // call()参数单独再call中罗列
 // apply()的参数通过数组表示
 function demo(m, n, a, b) {
  alert(m + n + a + b);
 }
 demo(1, 5, 3, 4); // 13
 demo.call(null, 1, 5, 3, 4); // 13
 demo.apply(null, [1, 5, 3, 4]); // 13
</script>

The fourth usage example of this

<script>
 // this的第四个用法：call(obj)/apply(obj)：强制性的将this指向了obj
 var username = &#39;zhangsan&#39;;

 function demo() {
  alert(this.username)
 }

 var obj1 = {
  username: "lisi"
 };
 var obj2 = {
  username: "wangwu"
 };

 // call()/apply()：打劫式的改变了this的指向
 demo(); // zhangsan
 demo(obj1); //zhangsan
 demo(obj2); //zhangsan
 demo.call(obj1); // lisi 
 demo.apply(obj2); // wangwu
</script>

If you directly call what is written in the demo, whether it is obj1 or obj2, then demo is still called by window.

• Whether you use call or apply, the demo function will eventually be called, but they will force this to point to obj1/obj2, and force this to point to their first parameter object.

The above is the detailed content of Detailed explanation of the usage of this keyword in Javascript. For more information, please follow other related articles on the PHP Chinese website!