call、apply、bind的使用

旧城等待， 2022-12-19 00:58 71阅读 0赞

### call方法总结 ###

call可以改变this指向,并立即调用函数  
call可以调用函数  
call可以改变函数内部的this指向  
使用call方法传递参数使用逗号隔开  
call方法一般应用于继承

### apply() ###

apply可以改变this指向,并立即调用函数  
apply可以调用函数  
apply可以改变函数内部的this指向  
使用apply方法传递参数使用数组传递  
apply方法一般应用于操作数组数据

// 2. apply() 应用 运用的意思
            var o = { 
                name: 'andy'
            };
    
            function fn(arr) { 
                console.log(this);
                console.log(arr); // 'pink'
    
            };
            fn.apply(o, ['pink']);
            // 1. 也是调用函数 第二个可以改变函数内部的this指向
            // 2. 但是他的参数必须是数组(伪数组)
            // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
            // Math.max();
            var arr = [1, 66, 3, 99, 4];
            var arr1 = ['red', 'pink'];
            // var max = Math.max.apply(null, arr);
            var max = Math.max.apply(Math, arr);
            var min = Math.min.apply(Math, arr);
            console.log(max, min);

### bind ###

bind可以改变函数的this指向  
是否会指行函数

bind不会调用原来的函数 可以改变原来函数内部的this 指向  
返回的是原函数改变this之后产生的新函数  
应用场景：如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind

<body>
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
        <script>
            // 改变函数内this指向 js提供了三种方法 call() apply() bind()
    
            // 3. bind() 绑定 捆绑的意思
            var o = { 
                name: 'andy'
            };
    
            function fn(a, b) { 
                console.log(this);
                console.log(a + b);
    
    
            };
            var f = fn.bind(o, 1, 2);
            f();
            // 1. 不会调用原来的函数 可以改变原来函数内部的this 指向
            // 2. 返回的是原函数改变this之后产生的新函数
            // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
            // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
            // var btn1 = document.querySelector('button');
            // btn1.onclick = function() { 
            // this.disabled = true; // 这个this 指向的是 btn 这个按钮
            // // var that = this;
            // setTimeout(function() { 
            // // that.disabled = false; // 定时器函数里面的this 指向的是window
            // this.disabled = false; // 此时定时器函数里面的this 指向的是btn
            // }.bind(this), 3000); // 这个this 指向的是btn 这个对象
            // }
            var btns = document.querySelectorAll('button');
            for (var i = 0; i < btns.length; i++) { 
                btns[i].onclick = function() { 
                    this.disabled = true;
                    setTimeout(function() { 
                        this.disabled = false;
                    }.bind(this), 2000);
                }
            }
        </script>
    </body>

### call和apply以及bind总结 ###

#### 相同点： ####

都可以改变this指向

#### 不同点： ####

call 和 apply 会调用函数, 并且改变函数内部this指向  
call传递参数使用逗号隔开传递,apply传递参数使用数组传递  
bind 不会调用函数

#### 应用场景: ####

call 经常做继承  
apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值  
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向