this指向

最新推荐文章于 2023-03-08 16:50:32 发布

QinLin70

最新推荐文章于 2023-03-08 16:50:32 发布

阅读量153

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/QinLin70/article/details/125527758

版权

一、函数调用方式的不同，决定了this 的指向不同

1. 普通函数 this 指向 window

调用函数的时候一般直接写fun( )，其实隐藏了前面的window，全写应该是window.fun( )。

        function fun() {
            console.log(this) // Window
        }
        fun()

2. 对象的方法调用时，this指向该对象

        let obj = {
            name: 'xxx',
            addZero: function () {
                console.log(this) // {name: 'xxx', addZero: ƒ}
            }
        }
        obj.addZero()

3. 构造函数 this 指向实例对象，原型对象里面的this 指向的也是该实例对象

        function Star(uname, age) {
            this.name = uname;
            this.age = age;
            this.dance = function () {
                console.log('Hip hop dance')
                console.log(this) // Star {name: 'jj', age: 18, dance: ƒ}
            }
        }
        
        Star.prototype.sing = function () {
            console.log('美人鱼')
            console.log(this) // Star {name: 'jj', age: 18, dance: ƒ}
        }

        let jj = new Star('jj', 18)
        jj.dance()
        jj.sing()

4. 绑定事件函数 this 指向的是该事件的绑定者

<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>
    <style>
        button {
            width: 50px;
            height: 30px;
        }
    </style>
</head>

<body>
    <button>点击</button>

    <script>
        let btn = document.querySelector('button');
        btn.onclick = function () {
            console.log(this) // <button>点击</button>
        }
    </script>
</body>

5. 定时器函数 this 指向window

        setTimeout(function () {
            console.log(this) // Window
        }, 1000)

6. 立即执行函数 this指向window

        (function () {
            console.log(this) // Window
        })()

二、改变函数内this指向的方法： call() apply() bind()

1. call() 调用函数并改变函数内部this指向

     let obj = {
        name: 'xxx'
     }
     function fun() {
        console.log(this) // {name: 'xxx'}
     }
     fun.call(obj)

call 常用于实现继承

    function Father(surname, money) {
        this.surname = surname;
        this.money = money;
    }

    function Son(surname, money) {
        Father.call(this, surname, money)
    }

    let son = new Son('顾', '3000贯')
    console.log(son) // Son {surname: '顾', money: '3000贯'}

2. apply() 调用函数并改变函数内部this指向

     let obj = {
        name: '顾盼生辉'
     }
     function fun(...arr) {
        console.log(this) // {name: '顾盼生辉'}
        console.log(arr)
     }
     fun.apply(obj, ['倾盖如故', '白头如新'])

apply 常用于跟数组有关的数学计算，比如借助于数学对象实现数组最大值最小值

        let arr = [1, 22, 333]
        let max = Math.max.apply(Math, arr)
        let min = Math.min.apply(Math, arr)
        console.log(min, max) // 1  333

3. bind() 不会调用原来的函数，可以改变原来函数内部的this 指向；创建一个新的函数，返回的是原函数改变this之后产生的新函数。

        let obj = {
            name: 'xxx'
        }
        function fun(a, b) {
            console.log(this) // {name: 'xxx'}
            console.log(a + b) // 3
        }
        let newFun = fun.bind(obj, 1, 2)
        newFun()

不想立即调用函数,但是又想改变这个函数内部的this指向

        let btn = document.querySelector('button')
        btn.onclick = function () {
            this.disabled = true
            setTimeout(function () {
                this.disabled = false
                console.log(this) // 此时定时器的this指向由window 变成了btn
            }.bind(this), 1000)
        }