Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "the definition and usage of the this keyword of javascript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Definition of this

Represents the environment object that is currently executing the code

Therefore, the analysis of this can be divided into two types of environment objects: "global environment" and "function environment".

Global environment

Console.log (this===window); / / true

Vara=10

Console.log (this.a); / / 10

Functional environment

Within the function, the value of this depends on the environment in which the function is called.

This involves knowledge points related to the data structure in memory, and a series of relationships occur when we define the following literal objects.

Varobj= {name:'Tom'}

The javascript engine first generates a {name:'Tom'} object in memory, and then assigns the memory address of this object to the obj variable, so the obj variable only stores a memory address. If you want to get the obj.name,javascript engine, it will first get the memory address from the obj variable, then get the original object from that address, and then return the name attribute.

When the attribute value is a function, the function will be saved in memory, and then the memory address will be assigned to the attribute, so the scope of the address assigned to different environments is different, and the this object points to the function's current execution environment object, and the execution environment will change during the EventLoop (event loop) process, so this belongs to the runtime in the function environment.

Varname='Tom'

Varobj= {

Name:'Iceberg'

Say:function () {

Console.log ('mynameis'+this.name)

}

Sub: {

Say:function () {

Console.log ('mynameis'+this.name)

}

}

}

Obj.say (); / / mynameisIceberg

Obj.sub.say () / / mynameisundefined

Varsay=obj.say

Say (); / / mynameisTom

The above example shows that the execution environment of obj.say () is an obj object, while the execution environment of obj.sub.say () is an obj.sub object, and there is no name property for obj.sub, so for undefined; and varsay=obj.say; means to assign the memory address of the say method to the global variable, so take the value from the global variable name.

Application scene

Next, it analyzes the different application scenarios of this in the functional environment.

Event callback function

Varhandler= {

Nickname:'anonymous'

Register:function () {

Console.log (this.nickname)

}

}

('# registerBtn'). On ('click',handler.register); / / undefined

After the above logic is triggered, the output is undefined, because when the function is executed as a callback function triggered by an event, this is the element corresponding to the triggered event. If you want this to still use the handler object as the execution environment, you can use the bind method of the function to bind the environment object.

('# registerBtn'). On ('click',handler.register.bind (handler)); / / anonymous

In react, you often need to call this.state and this.props in the callback function. According to the above analysis, you can bind the current environment object into the callback function.

If you use the arrow function to define the callback function, you do not need bind, because the this in the arrow function is the object in which the definition is located.

Constructor function

To understand the logic of this in the constructor is to understand what happens to the constructor during instantiation.

FunctionA () {

This.name='Tom'

This.age=20

}

Vara=newA ()

The following process occurs during the instantiation of constructor A using the new command

Create an empty object as an instance of the object to be returned

Point the prototype of the empty object to the prototype property of the constructor

Assign the empty object to the this keyword inside the constructor

Execute the internal code of the constructor

The this object is returned by default (for example, the non-object type of return, such as the number 123, will be ignored and default returnthis object)

From the above logic, we can see that the this keyword represents its instance object in the constructor.

Bind

The bind method points the this in the function body to the new object and returns a new function

FunctionA () {

Https://www.ryw168.com/news/cases/14912.html

This.nickname='Tom'

This.say=function () {

Console.log (this.nickname)

}

}

Varb= {nickname:'John'}

Vara=newA ()

Varsay=a.say

Varsay1=a.say.bind (a)

Varsay2=a.say.bind (b)

Say (); / / undefined

Https://www.ryw168.com/news/cases/14913.html

Say1 (); / / Tom

Say2 (); / / John

Call&apply

The call method refers to Function.prototype.call, so each function has a call method, fun.call (thisArg,arg1,arg2,...), and the first argument received by the call method replaces the execution environment object pointed to by the original this.

FunctionA () {

This.name='Tom'

This.sayName=function () {

Console.log (this.name)

}

}

FunctionB () {

This.name='John'

}

Vara=newA ()

A.sayName.call (newB ()); / / John

The only difference between the apply method and call is that call receives a list of parameters while apply receives array parameters or class array objects (such as the arguments object of a function).

Summary

Because of the EventLoop principle of javascript, the execution context is constantly changing, so the this object is born to express the current execution environment object.

That's all for the definition and usage of the this keyword of javascript. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.