call apply bind 区别与联系

目录

1.共同点：功能一致

2.区别：

1. call,apply 可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。

1.通过call 修改this指向  立即执行

 2.通过apply修改this指向   立即执行

 3.通过bind修改this指向  不会立即执行

 2：参数不同：第一个参数都是this新的指向对象。第二个参数，apply第二个参数是数组。call和bind有多个参数就需要挨个写。

1.call 有多个参数就需要挨个写

 2.bind 有多个参数就需要挨个写

 3.apply第二个参数是数组

3.使用场景

1.apply使用场景

2.bind 使用场景

3.call使用场景(除开apply,bind才能使用的场景)

---

1.共同点：功能一致

可以改变函数体内的this指向。

语法：函数.call()      函数.apply()         函数.bind()

2.区别：

1. call,apply 可以立即执行。bind不会立即执行，因为bind返回的是一个函数需要加入()执行。

分析：易知道，这里的this指向window,所以this.str 就是 你好。

如果通过call,apply,bind修改this指向呢？

1.通过call 修改this指向  立即执行

结果：

分析:修改成功，若没成功，this.str结果应该是：你好 

 2.通过apply修改this指向   立即执行

结果：

 3.通过bind修改this指向  不会立即执行

结果：

 通过加入() 执行：

结果： 

 2：参数不同：第一个参数都是this新的指向对象。第二个参数，apply第二个参数是数组。call和bind有多个参数就需要挨个写。

1.call 有多个参数就需要挨个写

结果：

 2.bind 有多个参数就需要挨个写

 3.apply第二个参数是数组

3.使用场景

1.apply使用场景

eg：数组 [1,36,2,7,321] ,求其最大值？

分析：Math.max(1,36,2,7,321)这种可以得到最大值，但是是求数组中最大值，所以可以想到apply的第二个参数要求是数组来解决。为什么这里第一个参数填null,因为Math.max这里的运用是判断数组arr的最大值，并不是需要研究this指向。

2.bind 使用场景

    <h1 id="h1">ish1h1>
    <button id="btn">1111111button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            console.log(this.id);  // btn
        }
    script>

分析：这里this指向的是btn,因为是给btn绑定的点击事件，但是如果想让this指向 h1，然后点击按钮，打印出h1的id的话，就需要改变this指向。

1.选择用 箭头函数

    <h1 id="h1">ish1h1>
    <button id="btn">1111111button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = ()=>{
            console.log(this);//window
            console.log(this.id);// undefined
        }
    script>

分析：此时this指向window达不到this指向h1要求

2.用call / apply

    <h1 id="h1">ish1h1>
    <button id="btn">1111111button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            console.log(this);
            console.log(this.id);
        }.apply(h1);
    script>

分析：可以实现 this指向 h1，但是实现不了 点击按钮，才打印出h1的id。这里还未点击按钮就直接打印出h1的id了。

3.使用bind

    <h1 id="h1">ish1h1>
    <button id="btn">1111111button>
    <script>
        let h1 = document.querySelector('#h1');
        let btn = document.querySelector('#btn');
        btn.onclick = function(){
            console.log(this);
            console.log(this.id);
        }.bind(h1);
    script>

分析：可以实现 this指向 h1，也实现了 点击按钮，打印出h1的id。 它这里点击按钮，就相当于时给bind返回的函数添加了(),只有点击时才执行。

3.call使用场景(除开apply,bind才能使用的场景)