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

超级超bug

已于 2022-12-07 20:34:45 修改

阅读量83

点赞数 2

文章标签： javascript 前端 html5

于 2022-12-07 20:33:15 首次发布

本文链接：https://blog.csdn.net/wzfnba/article/details/128226167

版权

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值为提供的值,他的参数列表前几项,值为创建时指定的参数序列