JavaScript中的this指向-CSDN博客

本文链接：https://blog.csdn.net/apple_61973423/article/details/125792694

今天我们就简单聊一聊JavaScript里面的this指向吧

this的指向

this:解析器在调用函数每次都会向函数内部传递进一个隐含的参数
这个隐含的参数就是this，this指向的是一个对象，这个对象是函数执行的上下文对象

函数内的this指向

以函数的形式（包括普通函数，定时器函数，立即执行函数）调用时，this指向永远是window
以方法的形式调用时，this指向调用方法的就是哪个对象；
以构造函数的形式调用时，this指向实例对象
以事件绑定函数的形式调用时，this指向绑定事件的对象
使用call或apply或blnd调用时，this指向的需要查找的对象

call()方法的运用

call()方法可以调用一个函数，与此同时，它还可以改变这个函数内部的this指向；
call()方法还可以继承
fn.call(想要this指向哪里，val1,val2......)
第一个参数中，如果不需要改变this的指向，则传递null；
function fn1(name, age) {
             this.name = name;
             this.age = age;
             this.fn = function () {
                 console.log(this.name)
             }
         }
         function fn2(name, age) {
             fn1.call(this, name, age);//此时的this指向就是fn1里面的name，age
         }
         var fn3 = new fn2("张三", 18);//给我们fn2赋值
         console.log(fn3);//这里我们输出声明的fn3；
         fn3.fn();//这里我们的fn调用的是fn1里面的方法 输出的是name;也就是fn3里面赋值的值“张三”;
输出结果如下：

当然还有一个充电宝的案例同时使用了call（）或apply（）或blnd（）

如下：

 //当is只有一个值时
        //充电宝
        var o1 = {
            name: "张三",
            dl: 20,
            is: function fn(cd) {
                this.dl = cd;
            }
        }
        var o2 = {
            name: "李四",
            dl: 5
        }
        console.log(o1);
        o1.is(100);
        console.log(o1);

        //使用call()方法
        o1.is.call(o2, 100);
        console.log(o2);

        //使用 apply()方法
        o1.is.apply(o2, [80]);
        //使用apply方法的话  传的参数需要加中括号
        console.log(o2);

        //使用bind()方法
        var res = o1.is.bind(o2, 100);//传的参数
        res();
        console.log(o2.dl);

        console.log("----------------------------------------------")
        //当is有两个参数时
        //充电宝
        var o1 = {
            name: "张三",
            dl: 20,
            is: function fn(cd, dc) {
                this.dl = cd + dc;
            }
        }
        var o2 = {
            name: "李四",
            dl: 5
        }
        console.log(o1);
        o1.is(50, 50);
        console.log(o1);

        //使用call()方法 改变this的指向
        o1.is.call(o2, 90, 5);
        console.log(o2);

        //使用 apply()方法 改变this的指向
        o1.is.apply(o2, [80, 15]);
        //使用apply方法的话  传的参数需要加中括号
        console.log(o2);

        //使用bind()方法 bind()可以先调用改变this的指向 然后储存到新的函数体里面，当调用的时候调用新的函数体即可；
        var res = o1.is.bind(o2, 50, 50);//传的参数 
        res();
        console.log(o2.dl);

        //call(),apply(),bind();它们三个都可以改变this的指向，但bind() 相比较call(),apply();有点繁琐，但是有的地方不得不使用bind() 方法

输出如下

使用apply方法的话传的参数需要加中括号

//我的理解是这样的不知道大家是如何理解的有更好的理解方法的话也可以给我传授一点；

使用bind()方法 bind()可以先调用改变this的指向然后储存到新的函数体里面，当调用的时候调用新的函数体即可；

//call(),apply(),bind();它们三个都可以改变this的指向，但bind() 相比较call(),apply();有点繁琐，但是有的地方不得不使用bind() 方法