JavaScript中的this指向，this关键字，改变this指向的三种办法，call()，apply()，bind()

最新推荐文章于 2024-01-14 21:43:58 发布

这是一个对象

最新推荐文章于 2024-01-14 21:43:58 发布

阅读量84

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/m0_67576744/article/details/126797613

版权

1，普通函数

<!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>
<body>
    
</body>
<script>
    function fn() {
        console.log(this); //window
    }
   fn() 
</script>
</html>

2，事件处理函数

<!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>
<body>
    <button id="btn">按钮</button>
</body>
<script>
  btn.onclick=function() {
    console.log(this); //button标签，事件源
  }
</script>
</html>

3，定时器函数

<!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>
<body>

</body>
<script>
setTimeout(function() {
    console.log(this); //window
},100)
</script>
</html>

4，普通对象

<!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>
<body>

</body>
<script>
var obj = {
    name:'蛤蛤',
    age:20,
    hi:function() {
        console.log(this);
    }
}
obj.hi() //对象本身 {name: '蛤蛤', age: 20, hi: ƒ}
</script>
</html>

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>
<body>

</body>
<script>
    function Person (name,age) {
        this.name=name,
        this.ae=age
        console.log(this); //实例对象Person {name: '蛤蛤', ae: 20}
        this.hi=function() {
            console.log(this); //在构造函数原型方法里面this也指向实例对象Person {name: '蛤蛤', ae: 20, hi: ƒ}
        }
    }
    var hh = new Person('蛤蛤',20)
    hh.hi() 
</script>
</html>

6，箭头函数的this指向上一层作用域的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>
</head>

<body>

</body>
<script>
    var age = 50;
    var obj = {
        name: 'mumu',
        age: 18,
        say: function () {
            console.log(this.age);
        },
        grow: function () {
            setInterval(() => {
                this.age++;
                console.log(this.age)
            }, 1000)
        }
    }

    obj.grow()

</script>

</html>

改变this指向的三种办法

1，call方法

<!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>

<body>

</body>
<script>
    function fn(a,b,c) {
        console.log(this);
        console.log(a+b+c);
    }
    var obj = {
        name:'蛤蛤'
    }
    // fn.call(obj) //用了call方法this指向obj
    fn.call(obj,1,1,1) //call方法从第二个参数开始就是给函数的实参
    // fn() //没用call方法this指向window
</script>

</html>

2，apply方法

<!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>

<body>

</body>
<script>
    function fn(a,b,c) {
        console.log(this);
        console.log(a+b+c);
    }
    var obj = {
        name:'蛤蛤'
    }
    // apply方法第一个参数于call方法一样，都是改变this指向的目标对象，跟call方法区别的是第二个参数是数组，数组里面是函数本身所需的参数
    // fn.qpply(obj) //用了call方法this指向obj
    fn.apply(obj,[1,1,1]) //call方法从第二个参数开始就是给函数的实参
    // fn() //没用qpply方法this指向window
</script>

</html>

3，bind方法

<!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>

<body>

</body>
<script>
    function fn(a,b,c) {
        console.log(this);
        console.log(a+b+c);
    }
    var obj = {
        name:'蛤蛤'
    }
    // bind方法会复制一个改变了this指向的函数 ,传参和call方法是一致的,区别在于call方法直接调用,bind方法不会直接调用会返回一个该方法的复制
    var fnn =fn.bind(obj,1,1,1)
    fnn()  
</script>

</html>

这是一个对象

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的this指向，this关键字，改变this指向的三种办法，call()，apply()，bind()

【代码】JavaScript中的this指向，this关键字，改变this指向的三种办法，call()，apply()，bind()
复制链接

扫一扫