How does JavaScript change this pointer? Brief analysis of three methods

JavaScriptHow to change this pointer? The following article will introduce to you three methods of changing this pointer in JS. I hope it will be helpful to you!

1. This points to

Click to open the video for more detailed explanation

this随处可见，一般谁调用，this就指向谁。this在不同环境下，不同作用下，表现的也不同。

In the following situations, this points to window

##1. Under global effect, this points to window

console.log(window);
console.log(this);
console.log(window == this); // true

2 . When the function is called independently, this inside the function also points to window

function fun() {
   console.log('我是函数体');
   console.log(this);  // Window 
}
fun();

3. When the nested function is called independently, this points to window

function fun1() {
    function fun2() {
        console.log('我是嵌套函数');
        console.log(this);  // Window
    }
    fun2();
}
fun1();

# by default. ##4. The internal this in the self-tuning execution function (immediate execution) also points to the window

(function() {
    console.log('立即执行');
    console.log(this);   // Window
})()

What needs extra attention is:

This in the constructor is used to define members (properties and methods) for the class.

• There is no this pointer in the arrow function. If there is one in the arrow function, this will be searched for this in the upper function. Until window

2. Change this to point to

1. call() method

call() 方法的第一个参数必须是指定的对象，然后方法的原参数，挨个放在后面。
（1）第一个参数：传入该函数this执行的对象，传入什么强制指向什么；
（2）第二个参数开始：将原函数的参数往后顺延一位

Usage: function name.call()

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();
 
function fun(a, b) {
    console.log(this); // this指向了输入的 字符串call
    console.log(a + b);
}
//使用call() 方法改变this指向，此时第一个参数是 字符串call，那么就会指向字符串call
fun.call('call', 2, 3)  // 后面的参数就是原来函数自带的实参

2. apply() method

apply() 方法的第一个参数是指定的对象，方法的原参数，统一放在第二个数组参数中。
（1）第一个参数：传入该函数this执行的对象，传入什么强制指向什么；
（2）第二个参数开始：将原函数的参数放在一个数组中

Usage: Function name.apply()

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();
 
function fun(a, b) {
    console.log(this); // this指向了输入的 字符串apply
    console.log(a + b);
}
//使用apply() 方法改变this指向，此时第一个参数是 字符串apply，那么就会指向字符串apply
fun.apply('apply', [2, 3])  // 原函数的参数要以数组的形式呈现

3. bind() method

bind() 方法的用法和call()一样，直接运行方法，需要注意的是：bind返回新的方法，需要重新
调用
是需要自己手动调用的

Usage: Function name.bind()

function fun() {
    console.log(this);  // 原来的函数this指向的是 Window
}
fun();
 
function fun(a, b) {
    console.log(this); // this指向了输入的 字符串bind
    console.log(a + b);
}
//使用bind() 方法改变this指向，此时第一个参数是 字符串bind，那么就会指向字符串bind
let c = fun.bind('bind', 2, 3);
c(); // 返回新的方法，需要重新调用
// 也可以使用下面两种方法进行调用
// fun.bind('bind', 2, 3)();
// fun.bind('bind')(2, 3);

[Related recommendations:

javascript video tutorial

, Basic programming video】

The above is the detailed content of How does JavaScript change this pointer? Brief analysis of three methods. For more information, please follow other related articles on the PHP Chinese website!