JavaScript全解析-this指向

最新推荐文章于 2024-07-12 22:54:26 发布

千锋IT教育

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量190

点赞数

分类专栏： JavaScript全解析专栏文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/longz_org_cn/article/details/130725262

版权

JavaScript全解析专栏专栏收录该内容

29 篇文章 2 订阅

订阅专栏

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>

如果上面的文章看着比较枯燥，点击下面的链接直接观看：
千锋教育JavaScript全套视频教程（10天学会Js，前端javascript入门必备）

也可以扫码直接观看视频哦！绝对的干货满满，更多精彩视频B站搜索“千锋教育”

千锋IT教育

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript全解析-this指向

●通过上面的学习大家知道，this在不同的情况指向是不同的，但是有时候需要指向一个制定的对象。●特点：函数不会立即调用，会返回一个改变this指向以后的函数，使用的时候需要调用。○第二参数的一个数组，要传递的实参要放到数组里面，就是有一个实参也要放到数组里面。●函数内的 this, 和函数如何定义没有关系, 和函数在哪定义也没有关系。●该函数内的 this 指向点前面的内容，也就是那个对象或者数组。也可以扫码直接观看视频哦！●普通函数中的this和全局调用一样，this指向window。
复制链接

扫一扫