call apply bind 用法简单介绍

小灰灰 2022-09-11 02:19 132阅读 0赞

call apply bind 用法 简单介绍

> fn1函数名.call(作用域对象A,参数1,参数2)  
> fn2函数名.apply(作用域对象A,\[参数1,参数2\])  
> fn3函数名.bind(作用域对象A)  
> fn3() 调用fn3

**把函数fn 放在A的作用域里执行，this指向A**

### 简易版 ###

var a = { 
        name: 'cherry',
        fn: function (a, b) { 
            console.log(this);
            console.log(a + b);
        }
    }
    var b = a.fn
    
    b(1, 2) // 3 作用域是:Window this --->指向 Window 
    
    b.apply(a, [1, 5]) // 6 作用域是:a this --->指向 a
    
    var d = b.bind(a)
    d(2, 7) // 9 作用域是:a 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>
        <script>
            const jiang = { 
                name: 'Jiang', // 酱
                phoneBattery: 70, // 手机电池 电量
                charging: function (level) { 
                    this.phoneBattery = level // 充电宝
                }
            }
            const mike = { 
                name: 'Mike',
                
                phoneBattery: 30 // 手机电池 电量
            }
            console.log(mike);
            jiang.charging.call(mike, 95)
            console.log(mike);
            // =====================================================================
            const jiang = { 
                name: 'Jiang', // 酱
                phoneBattery: 70, // 手机电池 电量
                charging: function (level, level2) { 
                    this.phoneBattery = level + level2 // 充电宝
                }
            }
            const mike = { 
                name: 'Mike',
                phoneBattery: 30 // 手机电池 电量
            }
            console.log(mike);
            jiang.charging.apply(mike, [30, 50])
            console.log(mike);
            // =====================================================================
            const jiang = { 
                name: 'Jiang', // 酱
                phoneBattery: 70, // 手机电池 电量
                charging: function (level, level2) { 
                    this.phoneBattery = level + level2 // 充电宝
                }
            }
            const mike = { 
                name: 'Mike',
                phoneBattery: 30 // 手机电池 电量
            }
            console.log(mike);
            const mikeCharge = jiang.charging.bind(mike)
            mikeCharge(30, 60)
            console.log(mike);
        </script>
        <script>
    
        </script>
    </body>
    
    </html>