四种环境-八种情况-探讨this到底是怎么找对象的

Try Tomato

已于 2023-02-16 18:20:35 修改

阅读量404

点赞数 2

分类专栏： # + 浏览器 BOM 文章标签： javascript this指向问题 JS 箭头函数 es6

于 2022-04-16 16:57:55 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124215576

版权

+ 浏览器 BOM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一般来说，this最终指向的是那个调用它的对象

3.在addEventListener注册事件中

三.构造函数中this的指向情况

四.箭头函数中this的指向情况

一.全局作用域下的this三种指向情况

1.在全局作用域中

console.log(this)

控制台打印出了一个window对象，那么说明在全局作用域下this指向的是全局顶级对象window

2.在普通函数中

function test(){
    console.log(this)
}

test()
//或者window.test()

同样打印出来的是一个window全局顶级对象

3.在定时器中

//为了实验准确性-我们不使用箭头函数
const test = setInterval(function(){
    console.log(this)
},2000)


const test2 = setTimeout(function(){
    console.log(this)
},2000)

所以我们得出结论：全局作用域下的this或者普通函数中的this指向的都是全局对象

二.方法中的this三种指向情况

1.在自定义对象中

const getTest = {
    name:"小蜗",
    test:function(){
        console.log(this)
    }
}

getTest.test()

可以看到在自定义的对象中this指向的是调用它的对象

2.在传统注册事件中

const btn = document.querySelector('button')

btn.onclick = function(){
    console.log(this)
}

我们得到的是调用这个点击事件的按钮对象

3.在addEventListener注册事件中

const btn = document.querySelector('button')

btn.addEventListener('click',function(){
    console.log(this)
})

得到的也是调用这个事件的按钮

所以我们得出结论：方法中的this指向的都是调用者

三.构造函数中this的指向情况

function Test(){
    console.log(this)
}

const test = new Test()

这时this指向了构造函数创建的test对象实例

四.箭头函数中this的指向情况

const btn = document.querySelector('button')

btn.addEventListener('click',()=> {
    console.log(this)
})

之前我们所说的事件中this不应该指向调用者吗？为什么会指向全局顶级对象呢？

这是因为箭头函数没有function函数关键字，不可以形成一个作用域链，没有作用域链的话，this是查找不到调用它的对象的，所以只能找到顶级对象window（在本例子中）

那么如果将这个箭头函数放到一个构造函数中呢？

<body>
    <button type="submit">点我点我</button>
</body>
<script>
const btn = document.querySelector('button')

function getTest(){
    btn.addEventListener('click',()=> {
    console.log(this)
    })
}
const test = new getTest()

</script>

这时我们发现this指向了构造函数的实例化对象

所以我们得出结论：箭头函数中的this指向最近作用域链的对象

详细介绍箭头函数以及this指向问题：

ES6——函数与经典箭头函数-帮this找对象_Developer小蜗的博客-CSDN博客貌似ES6中最广为流传的就是它的箭头函数了吧，也难怪，ES6中函数使用方法不仅简便，而且还颇有几分美感且逻辑清晰，箭头函数更是常常使用目录一.带参数的默认值函数二.剩余运算与扩展运算三.箭头函数四.运用箭头函数来完成闭包函数的简化五.箭头函数注意事项——this也想找对象1.this与arguments2.箭头函数的new实例化对象一.带参数的默认值函数什么是带参数的默认值函数？我们知道ES5中我们在调用函数时，如果没有给到形参所对应的实参，那么一般会使用逻辑或来https://blog.csdn.net/weixin_63836026/article/details/123827309

Try Tomato

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
4
评论
四种环境-八种情况-探讨this到底是怎么找对象的

一般来说，this最终指向的是那个调用它的对象目录一.全局作用域下的this三种指向情况1.在全局作用域中2.在普通函数中3.在定时器中二.方法中的this三种指向情况1.在自定义对象中2.在传统注册事件中3.在addEventListener注册事件中三.构造函数中this的指向情况四.箭头函数中this的指向情况一.全局作用域下的this三种指向情况1.在全局作用域中console.log(this)控制台打印出了一个win...
复制链接

扫一扫