this的指向

2023-12-20 18:12:19

简单的概括

箭头函数中的this指向是固定不变的，一直指向定义函数的环境。
使用function定义的普通函数this的指向随着调用环境的变化而变化

详细说一下普通函数this指向问题

普通函数的this指向window
对象的方法中this指向对象本身
构造函数的this指向新创建的对象

<!DOCTYPE html>

<html lang="en">

<head>

? <meta charset="UTF-8">

? <meta name="viewport" content="width=device-width, initial-scale=1.0">

? <title>Document</title>

</head>

<body>

? <!-- 普通函数的this指向window -->

? <script>

? ? let arr1 = [1, 2]

? ? let arr2 = arr1.splice(0, 1)

? ? function fn1(par1) {

? ? ? console.log(this, '普通函数的this指向');

? ? }

? ? fn1()

? ? // 对象的方法中this指向对象本身

? ? let obj = {

? ? ? a: 12,

? ? ? fn2: function () {

? ? ? ? console.log(this, '对象中普通函数this指向')

? ? ? }

? ? }

? ? obj.fn2()

? ? // 构造函数的this指向新创建的对象

? ? function Fn3() {

? ? ? this.a = 12

? ? ? console.log(this, '构造函数this指向')

? ? }

? ? let obj3 = new Fn3()

? ? let obj3_copy = new Fn3()

? ? // 箭头函数的this指向定义时所在的对象

? ? let obj4 = {

? ? ? a: 12,

? ? ? fn5: function () {

? ? ? ? console.log(this)

? ? ? }

? ? }

? ? obj4.fn5()

? ? // 改变普通函数的this指向的方法

? ? // 在函数定义时，使用call方法，apply方法，bind方法改变this指向

? ? obj4.fn5.call(window) //call方法 ?

? ? obj4.fn5.apply(window) ?//apply方法

? ? obj4.fn5.bind(window)() ? //bind方法

? ? // 箭头函数的this指向定义时所在的对象

? ? let obj6 = {

? ? ? a: 12,

? ? ? fn7: () => {

? ? ? ? console.log(this)

? ? ? }

? ? }

? ? obj6.fn7() //一般的写法

? ? var fn8 = () => {

? ? ? console.log(this)

? ? }

? ? fn8()

? ? // 使用function定义的函数，this的指向随着调用环境的变化而变化，而箭头函数中的this指向是固定不变的，一直指向定义函数的环境。

? </script>

</body>

</html>

文章来源:https://blog.csdn.net/weixin_71104826/article/details/135110217
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。