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

In this article, the editor introduces in detail "how to understand the this direction of javascript". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to understand the this direction of javascript" can help you solve your doubts.

The direction of this

Among the various instructions we have seen on how to judge the pointing method of this, the phrase "this ultimately points to the object that called it" is regarded as the core, but in the face of a variety of situations, it is easy to get confused. In view of a variety of situations combined with my understanding, I put forward a sentence "arrowhead, timing and construction, special case, ordinary call to see the dot, after a little do not look at the front, and then the nearest principle judgment, the last remaining is window."

Arrowhead function

The arrow function itself does not have a this, so there is no this change, which captures the outer this use

Var name = "windowsName"; var a = {name: "Cherry", fn () {setTimeout (()) = > {console.log (this.name);}, 0)}} a.fn () / / Cherry

Parsing: first object a calls the fn function, so the this of the fn function points to object a, and then the arrow captures the outer this, then it is not the this in setTimeout, but the this of the fn function, so finally get the name in object a

Timer

The this of the callback function inside the delay function points to the global object window

Var name = "windowsName"; var a = {name: "Cherry", fn () {setTimeout (function () {console.log (this.name);}, 0)}} a.fn () / / windowsName

Parsing: first object a calls the fn function, and then the callback function in setTimeout is an anonymous function, which is an ordinary function, so the this in the anonymous function points to window.

Var name = "windowsName"; var b = {name: "setTimeoutName"} var a = {name: "Cherry", fn () {setTimeout ((function () {console.log (this.name);}) .bind (b), 0)}} a.fn () / / setTimeoutName

Parsing: first object a calls the fn function, and then the callback function in setTimeout is an anonymous function, which is an ordinary function, so the this in the anonymous function points to window, but use bind to change the this of the anonymous function to object b, so finally the name in object b

Constructor function

The this in the constructor points to the instance object created

Note: if an object is returned in the constructor, no new instance object will be created, but the returned object

Function fn () {this.age = 37;} var a = new fn (); console.log (a.age); / / 37a.age = 38 console.log console.log (fn); / / {this.age = 37;} console.log (a.age); / / 38

Parsing: here we create an instance object a through the constructor, which is equivalent to opening up a new place to copy the contents of the constructor, and then we have an object a. At this time, this points to object a, and we modify the contents of object a without affecting the constructor.

Dot judgment

Pass. Judge the direction of this and follow the principle of proximity

Var a = {age:10, b: {age:12, fn () {console.log (this.age);} a.b.fn (); / / 12

Parsing: object a calls the fn function of object b, and there are two. In front of the fn function, then the nearest one is object b, so the this of the fn function points to object b, and finally gets the age of object b.

Var a = {age:10, b: {age:12, fn () {console.log (this.age); / / undefined} var c = {age:20,} var d = {age:30,} a.b.fn.bind (c) .bind (d) (); / / 20

Parsing: object a calls the fn function of object b and then uses bind to change the direction of this. At this time, there are both before and after the fn. Instead of looking at the front, you only need to look at the back. Then the recent bind changes the this to point to c, then the this of the fn function points to object c and gets the age of object c.

Practice

Function outerFunc () {console.log (this) / / {x: 1} function func () {console.log (this) / / Window} func ()} outerFunc.bind ({x: 1}) () obj = {func () {const arrowFunc = () = > {console.log (this._name)} return arrowFunc}, _ name: "obj" } obj.func () () / objfunc = obj.funcfunc () () / undefinedobj.func.bind ({_ name: "newObj"}) () () / / newObjobj.func.bind () / / undefinedobj.func.bind ({_ name: "bindObj"}). Apply ({_ name: "applyObj"}) () / / bindObjapply, call, bind

Use apply, call, and bind functions to change the direction of this, which is used in the this example above

Difference

ThisArg, [argsArray] call (thisArg, arg1, arg2,...)

The difference between apply and call functions lies in the parameters passed after this. An array is passed in apply and expanded parameters are passed in call.

Bind (thisArg [, arg1 [, arg2 [,...]) ()

Then the bind function creates a new function that needs to be called manually

The this of this new function is specified as the first argument to bind (), while the remaining parameters will be used as arguments to the new function for use when called.

After reading this, the article "how to understand the this direction of javascript" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

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.