JavaScript全解析——this指向

来源：千锋教育

发布人：lxl

时间： 2023-05-12 11:55:42

　　this指向(掌握)

　　●this 是一个关键字，是一个使用在作用域内的关键字

　　●作用域分为全局作用域和局部作用域(私有作用域或者函数作用域)

　　全局作用域

　　●全局作用域中this指向window

　　局部作用域

　　●函数内的 this, 和函数如何定义没有关系, 和函数在哪定义也没有关系

　　●只看函数是如何被调用的(箭头函数除外)

　　●分为以下场景：

　　普通函数中调用

　　●普通函数中的this和全局调用一样，this指向window

　　●语法：函数名()

<script>
    // 全局使用 this
    console.log(this) //window
    console.log(window) //window
    console.log(window === this) //true
    //普通函数调用
    function fn() {
        console.log('我是全局 fn 函数')
        console.log(this) //window
    }
    fn()
</script>

　　对象(包含数组)中调用

　　●该函数内的 this 指向点前面的内容，也就是那个对象或者数组

　　●语法：

　　○对象名.函数名()*

　　○对象名

<script>
    //对象函数调用
    function fn() {
        console.log(this) //{fun: ƒ}
    }
    var obj = {
        fun: fn
    }
    obj.fun()
    obj['fun']()
</script>

　　定时器处理函数中调用

　　●定时器中的this同样也是指向window

<script>
    // 定时器处理函数
    setTimeout(function() {
        console.log(this); //window
    }, 1000)
</script>

　　事件处理程序中调用

　　●事件处理程序中的this指向的是事件源

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>hello world</div>
    <script>
        var res = document.querySelector('div')

        res.onclick = function() {
            console.log(this); //<div></div>
        }
    </script>
</body>

</html>

　　自执行函数中调用

　　●自执行函数中的this也指向window

<script>
    (function() {
        console.log(this); //window
    })()
</script>

　　强行改变this指向

　　●通过上面的学习大家知道，this在不同的情况指向是不同的，但是有时候需要指向一个制定的对象

　　●这就需要改变this的指向

　　●可以理解成不管之前指向哪里，现在我让你指向哪里你就要指向哪里

　　●强行改变this指向的方式可以通过call、apply和bind来来改变

　　call调用

　　●作用：改变函数内部this的指向

　　●语法：

　　○函数名.call()

　　○对象名.函数名.call(参数1，参数2，参数3...)

　　●参数：

　　○第一个参数是this要指向的对象

　　○从第二个参数开始，依次给函数传递实参

　　●特点：会立即调用函数或者说立即执行


<script>
    function fn(a, b) {
        console.group('fn 函数内的 打印')
        console.log('this : ', this)
        console.log('a : ', a)
        console.log('b : ', b)
        console.groupEnd()
    }
    var obj = {
        name: '我是 obj 对象'
    }
    var arr = [100, 200, 300, 400, 500]
    // 用 call 调用
    fn.call(obj, 100, 200)
    fn.call(arr, 1000, 2000)
    /*
    this :  {name: '我是 obj 对象'}
    a :  100
    b :  200
    fn 函数内的 打印
    this :  (5) [100, 200, 300, 400, 500]
    a :  1000
    b :  2000
    */
</script>

　　apply调用

　　●作用：改变函数内部this的指向

　　●语法：

　　○函数名.apply()

　　○对象名.函数名.apply(参数1，[参数2，参数3...])

　　●参数：

　　○第一个参数是this要指向的对象

　　○第二参数的一个数组，要传递的实参要放到数组里面，就是有一个实参也要放到数组里面

　　●特点：会立即调用函数或者说立即执行

<script>
    function fn(a, b) {
        console.group('fn 函数内的 打印')
        console.log('this : ', this)
        console.log('a : ', a)
        console.log('b : ', b)
        console.groupEnd()
    }
    var obj = {
        name: '我是 obj 对象'
    }
    var arr = [100, 200, 300, 400, 500]
    // 用 apply 调用
    fn.apply(obj, [100, 200]) 
    fn.apply(arr, [1000, 2000])
    /*
    fn 函数内的 打印
     this :  {name: '我是 obj 对象'}
     a :  100
     b :  200
     fn 函数内的 打印
     this :  (5) [100, 200, 300, 400, 500]
     a :  1000
     b :  2000
    */
</script>

　　bind调用

　　●作用：改变函数内部this的指向

　　●语法：

　　○函数名.bind()

　　○对象名.函数名.bind(参数1，参数2，参数3...)

　　●参数：

　　○第一个参数是this要指向的对象

　　○从第二个参数开始，依次给函数传递实参

　　●特点：函数不会立即调用，会返回一个改变this指向以后的函数，使用的时候需要调用

<script>
    function fn(a, b) {
        console.group('fn 函数内的 打印')
        console.log('this : ', this)
        console.log('a : ', a)
        console.log('b : ', b)
        console.groupEnd()
    }
    var obj = {
        name: '我是 obj 对象'
    }
    var arr = [100, 200, 300, 400, 500]
    // 用 bind 调用
    // 注意: 因为是 bind, 不会把 fn 函数执行, 而是把 fn 
    // res 接受的就是 bind 方法复制出来的 fn 函数, 和 fn 
    var res = fn.bind(obj, 100, 200)
    var res1 = fn.bind(arr, 1000, 2000)
    res()
    res1()
    /*
    fn 函数内的 打印
    this :  {name: '我是 obj 对象'}
    a :  100
    b :  200
    fn 函数内的 打印
    this :  (5) [100, 200, 300, 400, 500]
    a :  1000
    b :  2000
    */
</script>