js中this绑定详解

最新推荐文章于 2022-09-04 21:53:25 发布

耶瞳

最新推荐文章于 2022-09-04 21:53:25 发布

阅读量229

点赞数 5

分类专栏： js 文章标签： javascript es6

本文链接：https://blog.csdn.net/tongkongyu/article/details/116277471

版权

js 专栏收录该内容

50 篇文章 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>this的指向问题</title>
</head>

<body>

</body>
<script>
    /*
        简介：在方法中，this 表示该方法所属的对象。
            1. 如果单独使用，this 表示全局对象。
            2. 在函数中，this 表示全局对象。
            3. 在函数中，在严格模式下，this 是未定义的(undefined)。
            4. 在事件中，this 表示接收事件的元素。
            5. 类似 call()和apply()和band()方法可以将 this 引用到任何对象。
            6. new绑定：执行new操作的时候，将创建一个新的对象，并且将构造函数的this指向所创建的新对象
            7. es6语法中箭头函数中的this。
    */

    // 1. 如果单独使用，this 表示全局对象。此时为默认绑定
    console.log('----- 1.单独使用的this -----')
    console.log(this === window); // 返回true

    // 2.在函数中，this 表示全局对象。因为函数相当于全局对象的一个方法。此时为默认绑定 
    console.log('----- 2.函数中的this -----')

    function test() {
        console.log(this === window);
    }
    test(); // 返回true

    // 3. 在函数中，在严格模式下，this 是未定义的(undefined)。因为严格模式下不允许默认绑定
    console.log('----- 3.严格模式下 -----')

    function myFunction() {
        "use strict"; // 函数内部严格模式
        console.log(this);
    }
    myFunction();

    // 4. 隐式函数绑定：
    console.log('----- 4 隐式函数绑定 -----')
    var a = 0;
    var obj = {
        a: 2,
        foo: function () {
            console.log(this);

            function test() {
                console.log(this); // 该函数在foo()里面，但并不是obj调用
            }
            test();
        }
    }
    obj.foo(); // 分别输出 object  window

    // 5. 显式函数绑定。JavaScript 中 call()、apply()、bind() 都是用来重定向this的
    console.log('----- 5. 重定向this -----');
    var name = '小虚',
        age = 19;
    var obj = {
        name: '小超',
        age: 18,
        objAge: this.age, // 该this指向window
        myFun1: function () {
            console.log(this.name + "年龄" + this.age);
        },
        myFun2: function () {
            console.log(this.name + "年龄" + this.objAge);
        },
        myFun3: function () {
            console.log(arguments); // 打印所传参数
        }
    }
    // 一般情况下this的指向：
    obj.myFun1(); // 小超年龄18
    obj.myFun2(); // 小超年龄19
    //call(),apply(),bind()都是用来重定义this这个对象的
    var dl = {
        name: '小鸡',
        age: 20
    }
    obj.myFun1.call(dl); // 调用一个对象的一个方法，以另一个对象替换当前对象。this指向dl
    obj.myFun3.call(dl, '张三', 1); //  Arguments {0 : '张三', 1 : 1}
    
    obj.myFun1.apply(dl); // 应用某一对象的一个方法，用另一个对象替换当前对象。this指向dl
    obj.myFun3.apply(dl, ['李四', 2]); //  Arguments {0 : '李四', 1 : 2}
    
    obj.myFun1.bind(dl)(); // bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，
    obj.myFun3.bind(dl, ['麻子', 4])(); // 传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

    // 6. new绑定：执行new操作的时候，将创建一个新的对象，并且将构造函数的this指向所创建的新对象
    console.log('----- 8. new绑定 -----');

    function foo(a) {
        this.a = a;
    }
    var a1 = new foo(1);
    var a2 = new foo(2);
    var a3 = new foo(3);
    var a4 = new foo(4);
    console.log(a1.a); // 输出1
    console.log(a2.a); // 输出2
    console.log(a3.a); // 输出3
    console.log(a4.a); // 输出4

    // 7. es6语法中箭头函数中的this，箭头函数常用于回调函数中。它会继承父级作用域 this 绑定的对象，等价于ES6之前self = this的书写方式。
    console.log('----- 7. 匿名函数的this -----');
    const people = {
        name: "Merry",
        sayHi() {
            console.log(this.name)
        },
        wait() {
            setTimeout(() => {
                console.log(this.name)
            })
        }
    }
    people.sayHi() // Merry
    people.wait() // Merry
</script>

</html>

更多相关内容大家可以前往我的个人博客浏览：eyes++的个人空间

耶瞳

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
js中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">
复制链接

扫一扫