带你走进this,全面了解this指向,冲冲冲

 前言:

解析器在每次调用函数的时候都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this;this对象是在运⾏时基于函数的执⾏环境绑定的,简单说就是this的指向取决于它在什么位置。

  • 作为普通函数调用
  • 绑定事件的函数
  • 作为对象的方法调用
  • 闭包条件下的调用
  • 构造函数中调用
  • 立即执行函数中调用
  • 定时器里面的函数
  • 箭头函数
  • call 、apply、 bind方法

根据以上列举的情况,下面我们在代码中进行体验并加以扩展,准备好了吗!


一、普通函数:   

非严格模式下:在node环境下this指向global,浏览器下指向window。全局

严格模式下:this 是 underfined

//    普通函数    在node环境下this指向global,浏览器下指向window。全局
        function f() {
            console.log(this)    // 输出 window
        }
        f()
//    严格模式下的普通函数     this是underfined
        function f() {
            "use strict"
            console.log(this)   // 输出  underfined
        }
        f()
复制代码

二、绑定事件的函数:

绑定事件的函数内的this指向函数的调用者,调用的dom元素,这里是btn按钮对象

 //     绑定事件的函数   this指向函数的调用者,调用的dom元素,这里是btn按钮对象
        
        btn.onclick = function(){console.log(this)};     // 点击按钮1,this指向按钮1
        btn2.onclick = function(){console.log(this)};    // 点击按钮2,this指向按钮2
复制代码

三、作为对象的方法调用:

作为对象的方法调用时,this 指向当前对象 这里是对象 o

//    作为对象的方法     this 指向当前对象 这里是对象 o
        var o = {
            user:1,
            sayHi: function () {
                console.log(this);    // 输出 o 这个对象
            }
        }
        o.sayHi()
复制代码

四、闭包条件下的调用:

闭包函数体内的this默认指向window

//    闭包条件下的调用       闭包函数体内的this默认指向window
        var user = 2;
        var o = {
            user:1,
            getUser:function(){
                return function(){
                    // 闭包函数体内的this默认指向window.所以这里输出 2
                    console.log(this.user);
                }
            }
        }
        var get = o.getUser();
        get();  // 2
复制代码

五、构造函数下调用:

构造函数下,this指向实例对象。  这里是实例对象f   原型对象里面的this也指向实例对象f

//    构造函数    this指向实例对象。  这里是实例对象f   原型对象里面的this也指向实例对象f
        function Star() {
            console.log(this);
        }
        var f = new Star();
复制代码

六、立即执行函数:

立即执行函数内的this指向 window

//    立即执行函数   自动调用   this指向window
        (function(){
            console.log(this);
        })()
复制代码

七、定时器内的函数:

定时器里面的函数的this指向window

 //  定时器里面的函数      this指向window
    setInterval(function(){console.log(this);},1000);     //1秒自动输出一次window对象  
复制代码

八、箭头函数内:

箭头函数不绑定this,它的this就指向该函数定义位置的this,以下面这个代码为例,这个箭头函数被写在obj对象内,obj是个对象,没有产生作用域,也就是说箭头函数被定义在了全局下,this自然就指向了window,window下的age是10,所以输出10

//   箭头函数不绑定this     它的this就指向该函数定义位置的this
        var age = 10;
        var obj = {
            age:20,
            say:() => {
                console.log(this.age);    // 输出 10
            }
        }
        obj.say();
复制代码


结尾:

call 、apply 、bind这三个方法都能改变this的指向,简单理解就是你想让他指向谁,就指向谁,具体的语法、区别以及应用场景等等,会在下一篇文章内进行分析扩展。

猜你喜欢

转载自juejin.im/post/7042888736077512735
今日推荐