As a keyword in JavaScript, this has a high degree of complexity. The main reason is that it is different in different scenarios. Here is a conclusion first, and the important things are said three times:
The direction of this is dynamically determined by the context
The direction of this is dynamically determined by the context
The direction of this is dynamically determined by the context
I am an old web front-end programmer who has been engaged in development for many years. Some time ago, I spent a month sorting out a web front-end learning dry product that is most suitable for learning. Various frameworks are organized and sent to every front-end small Partners, if you want to get it, you can add the following QQ group to get it for free.
This points to the instance scenario
The uncertainty about the point of this is mainly reflected in the following application scenarios:
Global environment
Ordinary function call
Call/apply/bind function call
Object attribute method call
Constructor call
Arrow function
Global environment
In the global environment, whether it is in strict mode or not, this points to a global object, such as the window on the browser side
// 在浏览器中, window 对象同时也是全局对象：
```javascript
console.log(this === window); // true
a = 37;
console.log(window.a); // 37
this.b = "MDN";
console.log(window.b) // "MDN"
console.log(b) // "MDN"
普通函数调用
当普通的函数，直接调用的时候，一般来说分两种情况:
严格模式绑定到 undefined
非严格模式绑定到全局对象 window
```javascript
function foo(){
console.log(this);
}
function bar(){
"use strict";
console.log(this);
}
foo() // window
bar() // undefined
The call/apply/bind function calls
call/apply these two function objects to the method to execute a function immediately, and the this in the function is bound to the object you provide
The bind method permanently binds the this in the function to the specified object and returns a new function. This function can be called no matter how in the future
function foo(){
console.log(this);
}
function bar(){
console.log(this);
}
foo.call({
name:'小米'}); // {name: "小米"}
const bar1 = bar.bind({
num:123})
bar1() // {num: 123}
Object attribute method call
As an object attribute method call, they all point to the object that the function was called before. Of course, sometimes there will be various variants or interfering interview questions
const student = {
name: "tom",
fn: function () {
return this;
},
};
console.log(student.fn() === student);
Constructor call or class context
constructor is the big hen for JavaScript to create objects (in fact, classes are syntactic sugar for constructors). Usually there is a script called new in the programming world. Who dares to say programmers (yuan) If there is no object, calling this in this way points to the object instance itself that you new out:
function Person(name){
console.log(this);
this.name = name
}
const p = new Person('tom')
console.log(p);
This in the
arrow function The this object in the arrow function body is the object where it is defined, not the object where it is used.
var obj = {
name: "tom",
foo() {
setTimeout(() => {
console.log(this);
}, 1000);
},
};
obj.foo() // obj
Interview questions
Common interview questions are: 1. Handwritten bind function
Function.prototype.mybind = function (ctx, ...args) {
const fn = this;
return function () {
fn.apply(ctx, args);
};
};
function foo(x, y) {
console.log(this, x, y);
}
const foo1 = foo.mybind({
name: "zhangsan" }, 10, 20);
foo1();
2. What did the new operator call the constructor?
Create a new object;
point the this of the constructor to this new object;
add properties, methods, etc. to this object;
finally return the new object.