2021-07-06

最新推荐文章于 2021-11-23 11:42:06 发布

buty_nice

最新推荐文章于 2021-11-23 11:42:06 发布

阅读量64

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118527517

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

this指向和强制改变this指向

this指向问题

全局函数中调用this： this指向window

在对象的方法中调用this： this指向调用者。 a.b.c.fn() 调用者是c 看函数名前面的是谁。

事件处理函数中的this：this指向事件源

定时器(setTimeout setInterval)函数中的this：this指向window

    <style>
        div {
            width: 300px;
            height: 300px;
            margin: 0 auto;
            background-color: brown;
        }
    </style>
    <body>
     <div id="box">
        <button>按钮</button>
     </div>
   </body>
   <script>
    // function fn() {
    //     console.log(this); //this指向window
    // }
    // fn();

    // var obj = {
    //         name: "zhangsan",
    //         say: function() {
    //             console.log(this); // this指向调用者。
    //         }
    //     }
    //     // obj.say()

    // var a = {
    //     b: {
    //         name: "lisi",
    //         c: {
    //             name: "wangwu",
    //             say: function() {
    //                 console.log(this.name);
    //             }
    //         }
    //     },
    //     name: "zhangsan"
    // }
   // a.b.c.say();//a.b.c.fn() 调用者是c  看函数名前面的是谁

    box.onclick = function(event) {
        //this指向事件源
        console.log(this);
        //target 事件触发对象
        console.log(event.target);
    }
    setTimeout(function() {
        console.log(this);
    }, 1000)
   </script>

修改this指向的方法

apply()使用格式：

函数名.apply(this指向的对象，原函数的参数数组)
【注意】 apply会让原函数立即执行。 apply第二个参数是一个数组。

call()

使用格式：函数名.call(this指向的对象，原函数的参数列表…)
【注意】call（）也会让原函数立即执行，call方法从第二个参数开始，传入的参数是原函数的参数。

bind()

使用格式：函数名 = 函数名.bind(this指向的对象，参数列表…)
会返回一个新的函数，这个函数的内容与原函数一模一样。但是里面的this指向已经被修改了。
【注意】bind函数不会立即执行。

apply call bind 这三种方法的区别

面试经常遇到此题
1.apply call 方法会立即执行，而bind方法会返回一个新的函数，函数中的this以及被修改了。
2.apply 和 call方法的区别就在于传参的形式不同，apply的参数是一个数组。 call和bind方法都是从第二个参数开始为原函数的参数列表。

<script>
    var obj = {
        name: "zhangsan"
    }
    var obj2 = {
        name: "lisi"
    }

    function show(x, y) {
        console.log(x, y);
        console.log(this);
    }
    show.apply(obj2);
    show.call(obj, 10, 20);
    show = show.bind(obj, 10, 20);
    show();
</script>