In the front-end JS, although this is only one of the keywords, but it is a relatively special keyword. This is an object that is automatically generated by the function at runtime. The reference to this is not determined at function definition, but only at function execution. This refers to the object on which it was last called.
First of all, let’s take a look at the advantages and benefits of this pointing to: In a specific function and writing method, this can be convenient and fast reference objects, making writing method simple and easy to reuse and code concise and concise.
The difference in this reference depends on how the function is called
1, ordinary function call, this refers to the window, eg:
function fun() {
console.log(this); / / points to the window
}
window.fun();
2. Constructor call, this points to instance object
function Student(age, name) {
this.age = age;
this.name = name
Console. log(this) //this points to Student instance objects s1 and s2, respectively
}
var s1 = new Student(18, ‘ls’)
Var s2 = new Student(18, ‘cc’)
3. A call to an object method. This refers to the object to which the object method belongs
var obj = {
fun: function () {
console.log(this); / / points to obj
}
}
obj.fun();
4. Call timer function. This refers to window
setInterval(function () {
console.log(this); / / points to the window
}, 2000);
5. By calling the event binding method, this refers to the object to which the event is bound
<body>
<button id=”btn”>cc</button>
<script>
var objBtn = document.getById(“btn”);
objBtn.onclick = function() {
console.log(this); / / points to BTN
}
</script>
</body>
6. Arrow function call, this refers to the parent object
var obj = {
a: 1,
fun: () => {
console.log(this); // This refers to obj’s parent object window
}
}
obj.fun(); / / points to the window
7. Anonymous function calls, this refers to the global variable window
(function fun() {
console.log(this); // This points to the global variable window
}) ();
Change the three methods this points to
Each function constructor has three methods: Call (), apply(), and bind() can change the orientation of this, but call(), apply() can only call functions in a particular scope, and bind() creates a function instance, which is then bound to bind().
1. Call * * * * () method
Change this to point to the window of a normal function
eg:
var Student = {
Name: “caicai”,
age:25
}
function fun(x,y) {
console.log(x+” , “+y);
console.log(this);
}
Fun (” ll “, 30);
Modify the change this in the above example points to something like this:
var Student = {
name:”caicai” ,
age:25
}
function fun(x,y) {
console.log(x+” , “+y);
console.log(this);
console.log(this.name);
}
Fun. Call (Student, “ll”, 30); // Now this points to Student
* * * * 2. The apply () method
The apply() method is similar to call() except in the way it provides arguments. Apply () uses an array of arguments instead of a list of arguments
<script>
var Student = {
name:”caicai” ,
age:25
}
function fun(x,y) {
console.log(x+” , “+y);
console.log(this.age);
}
Aa. Call (Student, 1, 2);
Aa. Apply (Student, [1, 2]);
</script>
3. The bind () method
The bind() method creates a new function (also called a binding function) that has the same function body as the called function. When the target function is called, the value of this is bound to the first argument of bind().
<script>
var Student = {
name:”caicai” ,
age:25
}
function fun(x,y) {
console.log(x+” , “+y);
console.log(this.age);
}
Aa. Call (Student, 1, 2);
Aa. Apply (Student, [1, 2]);
Aa. Bind (Student, 1, 2) (); // It must be called, otherwise it is just a binding
</script>
4. Store this in a variable
var obj = document.getById(“obj”);
obj.onclick = function () {
var _this = this; // Store this in a variable without changing the direction of the timer
setTimeout(function () {
console.log(this); / / points to the window
console.log(_this); //this refers to the current object
}, 2000);
}
The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “iOS development by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention to it!