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

This article introduces the knowledge of "how to use this in 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!

Implicit binding

With regard to this, generally speaking, the this of the method points to whoever calls the method, such as:

Function foo () {console.log (this.a)} var a = 3; var obj = {a: 2, foo: foo}; obj.foo (); / / output 2. Because it is the foo called by obj, the this of foo points to obj and obj.a = 2

If there are multiple calls, only the upper layer or * layer of the object attribute reference chain plays a role in the calling location, such as:

Function foo () {console.log (this.a)} var obj2 = {a: 42, foo: foo} var obj1 = {a: 2, obj2: obj2} obj1.obj2.foo (); / / 42

Implicit loss

One of the most common this binding problems is that implicitly bound functions lose bound objects, that is, they apply default bindings to bind this to global objects or undefined, depending on whether it is in strict mode.

Function foo () {console.log (this.a)} var obj1 = {a: 2, foo: foo} var bar = obj1.foo; / / function alias! Var a = "oops, global"; / / an is the property bar () of the global object; / / "oops, global"

Although bar is a reference to obj.foo, in fact, it refers to the foo function itself, so bar () at this time is actually a function call without any modification, so the default binding is applied

A more subtle, more common, and more unexpected situation occurs when a callback function is passed:

Function foo () {console.log (this.a)} function doFoo (fn) {/ / fn actually refers to foo fn (); / / {/ / this inherits from foo () console.log (this.a)};} var obj1 = {a: 2}; var obj2 = {a: 3}; var bar = foo.call (obj1); bar.call (obj2) / / 2, not 3!

The arrow function created inside foo () captures the this of foo () when it is called. Because the this of foo () is bound to the this of obj1,bar (referencing the arrow function) is also bound to obj1, the binding of the arrow function cannot be modified. Not even new!

That's all for "how to use this in JavaScript". Thank you for 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.