持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

this指向是js中一个非常重要的知识点,合理的运用和了解this的指向可以很有效的提高我们书写程序的时间. 下面我们一起来看看各种函数环境中的this指向

各种函数的this指向

 // 1.普通函数中this - window
        function fn() {
            console.log(this);
        }
        // fn();
    
        // 2.构造函数中this - 实例对象
        function Star(name) {
            this.name = name;
            console.log(this);
        }
        // const s1 = new Star('张三');
    
        // 3.原型方法中this - 实例对象
        Star.prototype.sing = function () {
            console.log(this);
        }
        // s1.sing();
    
        // 4.对象中的方法中的this - 实例对象
        let obj = {
            name: '李四',
            sayHi: function () {
                console.log(this);
            }
        }
        // obj.sayHi();

        // 5.定时器函数里面的this - window
        setTimeout(function () {
            // console.log(this);
        }, 1);

        // 6.事件绑定中的this - 事件源
        document.addEventListener('click', function () {
            console.log(this);
        })

        // 7.箭头函数中的this，没有默认指向，一般指向外层函数的this;
        document.addEventListener('dblclick',  () => {
            console.log(this);
        })

虽然各种环境中的this指向各不相同,但我们不难从其中发现规律.简而言之:this永远指向函数的调用者！ 那么在使用中能不能改变this指向呢?

call方法

call() 是每一个函数，都具有的方法，可以变this的指向;

        function fn(a, b) {
            console.log(this);
            console.log(a, b);
        }
        // // 普通调用
        // fn(1, 2);
        let obj = { name: '张三', age: 18 };
        //call调用
        fn.call(obj, 2, 3);

通过函数调用call()改变了this指向的同时函数本身也会被执行;

apply方法

apply方法与call()大同小异，可以变this的指向;

 function fn(a, b) {
   console.log(this)
   console.log(a, b)
  }
  const obj = { name: '李四', age: 20 }
  fn(1, 2)
  fn.apply(obj, [3, 4])

通过函数调用apply()改变了this指向的同时函数本身也会被执行;

bind方法

bind方法与其他两种方法最大的不同就是通过函数调用bind()的时候，函数本身 不会被执行;

        function fn(a, b) {
            console.log(this);
            console.log(a, b);
        }
        
        // 演示 bind 调用
        const obj = { name: '张三', age: 18 };
        // 函数不会立即被执行，而是返回一个模板
        const aaa = fn.bind(obj, 1, 2);
        // 模板可以随时被调用;
        aaa();