Home  >  Article  >  Web Front-end  >  Detailed test explanation of the problem pointed by this keyword in Javascript

Detailed test explanation of the problem pointed by this keyword in Javascript

黄舟
黄舟Original
2017-08-11 10:34:581215browse

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


Second question


Third question


Question 4


##

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


  • 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



    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


##


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():




The fourth usage example of this


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

The above is the detailed content of Detailed test explanation of the problem pointed by this keyword in Javascript. 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