今天大雪,可是一点雪都没看到

68 阅读 0 评论 45 点赞

我是靠谱客的博主体贴奇迹，最近开发中收集的这篇文章主要介绍今天大雪,可是一点雪都没看到，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

this指向

1 全局变量

2 dom对象上的方法

3 dom事件的回调函数

4 定时器

5 构造函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<button>点击</button>
<body>
<script>
/*
1 全局变量
2 dom对象上的方法
3 dom事件的回调函数
4 定时器
5 构造函数
*/
console.log(this)
//window
const obj = {
name: '张三',
getNum() {
//函数内部的this 是调用这个函数时自动产生的变量 谁调用这个方法就指向谁
console.log(this);
//obj
}
}
obj.getNum()
//dom对象上的回调函数
document.querySelector('button').addEventListener('click', function () {
console.log(this);
//指向button 点击之后系统自动生成 不需要调用
})
//定时器
setTimeout(function () {
console.log(this);
//window
}, 1000)
//构造函数
let that
function Men() {
console.log(this)
//this值指向通过这个构造函数实例出来的实例化对象
that = this
}
const m1 = new Men()
console.log(that === m1);
</script>
</body>
</html>

箭头函数

在箭头函数内部是没有this指向的,箭头函数内部的this指向也遵循就近原则,因为箭头函数内部没有this,所以里面的this指向上一级作用域,如果上一级作用域也没有就去上上一级寻找.

call bind apply

上面我们了解到所有函数内部的this指向,this指向是固定的,那如果想要this指向其他的作用域,就可以使用上面的三个方法

call apply方法

 <script>
//call 参数要绑定的this值 参数1,参数2....
//apply 参数要绑定this值 [参数1 参数2]
//两个都是立即执行
const obj = {
name: '景天',
age: 27
}
function fn(x, y) {
console.log(this, 1, 2);
}
fn.call(obj, 1, 2)
fn.apply(obj, [1, 2])
</script>

bind方法


<script>
//bind 参数(this值指向,参数1,参数2,.....)
它返回的是一个经过bind处理之后的新函数不会立即调用这个函数
const p = {
address: '蜀山'
}
function fn() {
console.log(this);
}
fn.bind(p)
//这样不会输出任何内容
console.log(fn.bind(p)) //输出的是经过bind处理之后的新函数
</script>

上面分别使用简单的代码说明了一下三种方法的使用,但是可能很多人还是不清楚三种的区别

共同点:1 都是用来修改函数的this指向 2.第一个参数都是this要指向的对象 3.都可以利用后续参数传参

不同点: call方法的作用和apply方法类似, 区别在于call方法接收的的参数列表, apply方法接收的是一个参数数组,bind方法创建了一个新的函数,当这个新的函数被调用时,其this值为提供的值,他的参数列表前几项,值为创建时指定的参数序列