Home > Web Front-end > JS Tutorial > body text

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

青灯夜游
Release: 2022-09-19 09:57:53
forward
2879 people have browsed it

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!

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

1. This points to

Click to open the video for more detailed explanation

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

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
Copy after login

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

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

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

function fun1() {
    function fun2() {
        console.log('我是嵌套函数');
        console.log(this);  // Window
    }
    fun2();
}
fun1();
Copy after login
# 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
})()
Copy after login

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)第二个参数开始:将原函数的参数往后顺延一位
Copy after login

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)  // 后面的参数就是原来函数自带的实参
Copy after login

2. apply() method

apply() 方法的第一个参数是指定的对象,方法的原参数,统一放在第二个数组参数中。
(1)第一个参数:传入该函数this执行的对象,传入什么强制指向什么;
(2)第二个参数开始:将原函数的参数放在一个数组中
Copy after login

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])  // 原函数的参数要以数组的形式呈现
Copy after login

3. bind() method

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

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);
Copy after login
[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!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!