各种函数的this指向问题

原创已于 2022-07-13 12:07:22 修改 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2022-07-11 13:48:43 首次发布

前端人专栏收录该内容

14 篇文章

订阅专栏

this的指向问题一直是面试的重中之重，深究起来很多人都不能完整地答出this的指向问题。这篇文章将完整地讲述各种函数的this指向问题。下一篇文章介绍了如何通过call、apply、bind来改变this指向，附上入口：改变this指向

建议收藏。前端技术交流Q群：610408494

this就是“这个、当前”的意思，它的指向一直指向当前函数的运行环境。

1. 普通函数

普通函数的this指向调用这个函数的对象，默认是window。严格模式情况下指向undefined。

函数被window调用的话，必定指向window，无论是否是严格模式。

    function A() {
        console.log(this) 
    }
    A(); //window
    window.A();//window
  

    function B() {
        "use strict"
        console.log(this) 
    }
    B();  //undefined
    window.B();  //window

2. 自执行函数

自执行函数的this指向window

(function B(){
  console.log(this)  //指向window
})()

3. 构造函数

this指向new出来的实例对象，而且优先级是最高的，不能被改变

    function D(name,age) {
        this.name=name
        this.age=age
        this.say=function(word) {
            console.log(this,word)
            //D {name: '刘禅', age: 99, say: ƒ} '本少爷从不坑爹'
        }
    }
    let ls = new D('刘禅',99)
    ls.say('本少爷从不坑爹');

4.事件处理函数

this指向绑定事件的元素

    const eLi =document.querySelector('.eLi')
    eLi.onclick=function(){
        console.log(this)
        // <div class="eLi">按钮</div>
    }

5.箭头函数

  function E(name,age){
        this.name=name
        this.age=age
        this.say=()=>{
            console.log(this)
            // {name: '鲁班七号', age: 99, say: ƒ}
        }
    }
    let lbqh=new E('鲁班七号',99)
    lbqh.say('来打我呀,抓不到我的');

箭头函数的this指向的是它外面的第一个不是箭头函数的函数的 this，在定义时就确定了，不能被改变。但是如果想在箭头函数内部访问外部的this，比如Vue框架中比较常用const _this=this、const that = this来定一个新的变量，在箭头函数内部就可以调用外部Vue上的方法和data了。