this的指向

起个名难死

已于 2023-12-22 17:33:30 修改

阅读量333

点赞数 10

文章标签： javascript 前端开发语言

于 2023-12-20 15:59:12 首次发布

本文链接：https://blog.csdn.net/weixin_71104826/article/details/135110217

版权

简单的概括

箭头函数中的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>



<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方法

let obj6 = {

a: 12,

fn7: () => {

console.log(this)

}

}

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

var fn8 = () => {

console.log(this)

}

fn8()

// 使用function定义的函数，this的指向随着调用环境的变化而变化，而箭头函数中的this指向是固定不变的，一直指向定义函数的环境。call apply bind方法无法改变箭头函数的指向

</script>

</body>

</html>

起个名难死

关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
this的指向

head>-- 普通函数的this指向window -->console.log(this, '普通函数的this指向');fn1()// 对象的方法中this指向对象本身a: 12,console.log(this, '对象中普通函数this指向')obj.fn2()// 构造函数的this指向新创建的对象console.log(this, '构造函数this指向')// 箭头函数的this指向定义时所在的对象a: 12,
复制链接

扫一扫