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

Most people do not understand the knowledge points of this article "this has several binding rules in JavaScript", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "this in JavaScript has several binding rules" article.

Let's start with what the simplest this points to globally?

This problem is very simple to test this in the browser, the global point is window, but in the development process, this is rarely used globally, generally in the function

How many binding rules does this have?

Binding one: default binding

/ / 1. Case 1:

Function foo () {

Console.log (this)

}

Foo () / / window

/ / 2. Case 2:

Function foo1 () {

Console.log (this)

}

Function foo2 () {

Console.log (this)

Foo1 ()

}

Function foo3 () {

Console.log (this)

Foo2 ()

}

Foo3 () / / window

/ / 3. Case 3:

Var obj = {

Name: "why"

Foo: function () {

Console.log (this)

}

}

Var bar = obj.foo

Bar () / / window

Binding 2: implicit binding

/ / 1. Case 1:

Var obj = {

Name: "why"

Foo: foo

}

Obj.foo () / / obj object

/ / 2. Case 2:

Var obj = {

Age: "ha"

Eating: function () {

Console.log (this + "eating")

}

Running: function () {

Console.log (this + "running")

}

}

Obj.eating () / / obj object

Obj.running () / / obj object

Var fn = obj.eating

Fn ()

/ / window, why window? because the function obj.eating is assigned to what fn,fn calls globally, it points to window.

/ / 3. Case 3:

Var obj1 = {

Name: "obj1"

Foo: function () {

Console.log (this)

}

}

Var obj2 = {

Name: "obj2"

Bar: obj1.foo

}

Obj2.bar () / / obj2 object

Bind 3: show bindings

Function foo () {

Console.log ("function called", this)

}

/ / the difference between 1.foo direct call and call/apply call lies in the difference of this binding.

/ / the direct call to foo points to the global object (window)

Foo ()

Var obj = {

Name: "obj"

/ / age:foo// can be abbreviated to this step

}

/ / call/apply is a bound object that can specify this

Foo.call (obj) / / obj object

Foo.apply (obj) / / obj object

Foo.apply ("aaaa") / / aaaa

/ / what's the difference between 2.call and apply?

Function sum (num1, num2, num3) {

Console.log (num1 + num2 + num3, this)

}

Sum.call ("call", 20,30,40) / / you can pass unlimited values after passing parameters, all separated by commas

Sum.apply ("apply", [20,30,40]) / / the passing parameters are received by an array, and you can also pass unlimited values separated by commas

/ / 3.call and apply can explicitly bind this when executing the function. This binding rule is called display binding.

Binding IV: new binding

/ / when we call a function (constructor) with a new keyword, this is the object created when the constructor is called

/ / this = created object

/ / the binding process is new binding

Function Person (name, age) {

This.name = name

This.age = age

}

Var p1 = new Person ("ha", 18)

Console.log (p1.name, p1.age) / / ha, 18

Var p2 = new Person ("hehe", 30)

Console.log (p2.name, p2.age) / / hehe, 30

What kind of enlightenment can these cases give us?

1. When the function is called, JavaScript binds a value to this by default

The binding of 2.this has nothing to do with the location of the definition (where it was written).

The binding and calling mode of 3.this is related to the location of the call.

4.this is bound at run time

Finally, there is a conflict between the default binding and the display binding bind: priority (display binding)

The above is about the content of this article "there are several binding rules for this in JavaScript". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.