What is this pointing to?
No matter where you use this, it eventually points to an object; Where this is used and which object it will point to depends on the location of the function call. In short, remember one sentence:
Which object calls the function and which object this in the function points to.
this point in different scenes
1, Ordinary function call
At this point, this points to the window object
function fn() {
console.log(this);
}
fn(); // The full write is window.fn(), where window is omitted. The output result is window object
Print results:
2, Object function call
At this point, this points to the object to which the method belongs
let a = {
name: "aaa",
fn: function () {
console.log(this);
}
}
a.fn(); //The output is a object
Print results:
function fn() {
console.log(this);
}
let a = { name: "aaa", fn: fn } //The FN method of a object points to the global function fn
a.fn(); // The caller is an a object, and the output is still an a object
Print results:
3, Constructor call
At this point, this points to the newly created instantiated object
function fn() {
this.name = "name"; // This value depends on the instance from new
}
let a = new fn(); // Create an instance
a.name = "aaa"; // Instance resets the value of the name attribute
console.log(a.name);
Print results:
4, Arrow function call
Point to the object where the arrow function is defined, rather than the object where the arrow function is used. The parent's this is used by default.
let obj = {
name: "aaa",
fn: () => {
console.log(this);
}
}
obj.fn();
At this point, this, the parent of the function fn, points to window
Print results:
function f() {
let obj = {
name: "aaa",
fn: () => {
console.log(this.name);
}
}
obj.fn();
}
let b = {
name: "bbb",
f: f // The f method here points to the global function f
}
b.f()
Print results:
For this in the arrow function, first look for it from its parent scope. If the parent scope is still an arrow function, look up until you find the direction of this
5, Event binding call
- Bind directly on element
<body>
<input type="button" id="btn" value="Let me try" onclick="fn()"></input>
</body>
<script>
function fn() {
console.log(this);
}
</script>
this points to the global variable window
Print results:
2. js get element rebinding
<body>
<input type="button" id="btn" value="Let me try"></input>
</body>
<script>
document.getElementById('btn').onclick = function () {
console.log(this);
}
</script>
This at this point points to the element
Print results:
How to change this point?
The function provides the call() apply() method as an object. They can also be used to call the function. Both methods accept an object as one of the parameters to specify the point of this in the function during this call.
apply and call calls
- call() method:
The number of parameters received is not fixed
Function name. call(obj,arg1,arg2... argN);
Parameter Description:
obj: the object to which this should point in the function,
arg1,arg2... argN: parameter list, separated by a comma
var Lily = { name: 'Lily' };
var Marry = {
name: 'Marry',
baseInfo: function f(age, sex) {
console.log("full name:", this.name);
console.log("Age:", age);
console.log("Gender: ", sex);
}
};
Marry.baseInfo.call(Lily, 18, "female"); // call changes the direction of this. At this time, this in the baseInfo method points to the Lily object
Print results:
2. apply() method:
Receive two parameters
Function name. apply(obj,[arg1,arg2..., argN])
Parameter Description:
Obj: the object to which this refers
[arg1,arg2... argN]: parameter list, which requires array format
var Lily = { name: 'Lily' };
var Marry = {
name: 'Marry',
baseInfo: function f(age, sex) {
console.log("full name:", this.name);
console.log("Age:", age);
console.log("Gender: ", sex);
}
};
Marry.baseInfo.apply(Lily, [18, "female"]); // apply changes the direction of this. At this time, this in the baseInfo method points to the Lily object
Print results:
Note: the functions of call() and apply() are the same. The only difference is that the parameter transfer methods are different