This article focuses on mastering the orientation of this in JavaScript, knowing when this is determined and who determines the orientation of this.
The four rules
Priority weight: From top to bottom, the weight value is from small to large.
- Default binding rule: console.log(this === window); // true
- Implicit binding rules: whoever calls points to whoever; (implicit loss).
- Display the binding rules: call,apply,bind.
- (Maximum priority) new Binding rule.
The default binding rule for this
Global this points to window by default, and in strict mode this points to undefined.
- Example 1:
console.log(this= = =window) // true Global this is undefined in strict mode
console.log({} === {}) // false
Copy the code- This and window print true because they refer to the same address;
- Why are these two objects not equal? Well, the main reason is that objects compare to pointer addresses, and every time you declare an object, you create a space that creates a pointer address that points to where the data is stored.
Implicit binding rules for this
This refers to the called object if the method is called through a method at an object point, or to the window if the method is called directly (autonomically).
- Example 1:
function test(){
console.log(this= = =window); // true
}
test() // window.test();
Copy the code- XXX () is the same as window.xxx(), because globally declared functions are mounted on Windows by default, so this also points to window by default.
Example 2:
var obj = {
a: 2.
foo: function(){
console.log(this); // obj
function test(){
console.log(this); // window
}
test();
}
}
obj.foo();
Copy the code- Since foo is an obj call, foo’s this should refer to the object on which it was called, so this is printed internally as obj;
- Test is called inside foo, but it’s a direct call so this still refers to the window.
Display binding rules for this
If call,apply, or bind forces this to be changed, this points to the first argument passed in to the method.
Example 1,
var name = 'test1'
var obj = {
name: 'test2'
}
function fn(){
console.log(this.name);
}
var bindFn = fn.bind(obj);
bindFn() // test2
fn.call(obj) // test2
fn.apply(obj) // test2
Copy the code- This refers to the first argument passed in (obj) because call, apply, and bind forced the this pointer.
The new binding for this
- If no reference type variable is returned inside the constructor, a new object is created inside the constructor. This is the object.
- If a reference type variable is returned inside the constructor, this is the object returned.
Example 1:
function Body(){
console.log(this); // Body {}
}
new Body()
function Person(){
console.log(this); // {name: "test"}
return {
name: 'test'
}
}
new Person()
Copy the code- This points to the newly created object because no reference type is returned inside the Body. The Person constructor returns an object, so this points to the returned object.
Conclusion:
In JS function definition, the direction of this is uncertain, only in the execution, can determine the direction of this, so it can be summed up in a sentence, “the direction of this is determined by the dynamic context of the call”.