js高级——this指向

最新推荐文章于 2023-05-18 18:47:06 发布

Happy 猫

最新推荐文章于 2023-05-18 18:47:06 发布

阅读量56

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_62829704/article/details/125959132

版权

本文介绍了JavaScript中this的指向原理，以及通过call、apply、bind三种方法如何改变函数内部的this值。call和apply主要用在函数调用和继承场景，bind则用于预设this并返回新的函数。call和apply的区别在于参数传递方式，call接收可变数量的参数，apply参数需放在数组中。bind不会立即调用函数，适用于需要保留this上下文的情况，如在定时器中。

摘要由CSDN通过智能技术生成

前言

这些 this 的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同

一般指向我们的调用者.

一、this指向

二、改变this指向的方法

1.call 方法

fun.call(thisArg, arg1, arg2, ...)

thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

 <script>
        // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()

        // 1. call()
        var o = {
            name: 'andy'
        }

        function fn(a, b) {
            console.log(this);
            console.log(a + b);

        };
        fn.call(o, 1, 2);
        // call 第一个可以调用函数 第二个可以改变函数内的this 指向
        // call 的主要作用可以实现继承
        function Father(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }

        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        var son = new Son('刘德华', 18, '男');
        console.log(son);
    </script>

2.apply 方法

fun.apply(thisArg, [argsArray])

thisArg：在fun函数运行时指定的 this 值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
虽然这个函数的语法与 call() 几乎相同，但根本区别在于，call() 接受一个参数列表，而 apply() 接受一个参数的单数组。

const array = ['a', 'b'];
const elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

3.bind 方法

fun.bind(thisArg, arg1, arg2, ...)

bind() 方法不会调用函数。
但是能改变函数内部this 指向返回由指定的 this 值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind

 var btn1 = document.querySelector('button');
        btn1.onclick = function() {
            this.disabled = true; // 这个this 指向的是 btn 这个按钮
            // var that = this;
            setTimeout(function() {
                // that.disabled = false; // 定时器函数里面的this 指向的是window
                this.disabled = false; // 此时定时器函数里面的this 指向的是btn
            }.bind(this), 3000); // 这个this 指向的是btn 这个对象
        }