bind、call、apply区别


一、代码

   function person(p1, p2, p3) {
        console.log('this: ', this)
        console.log('name: ', this.name)
        console.log('传递的参数p1: ', p1)
        console.log('传递的参数p2: ', p2)
        console.log('传递的参数p3: ', p3)
    }

    let obj1 = {
        name: 'zhangsan',
        age: 17
    }
let obj2 = { name: 'sunwu', age: 18 } let obj3 = { name: 'aguang', age: 19 }

 

二、bind 应用场景(一切不需要立即执行的情况,如,点击事件触发某个函数执行,需要改变函数内this指向的),只是绑定不立即执行

 1     person.bind(obj1, 33) // bind(this要绑定的对象, 其它参数)
 2 
 3     // bind 如果是绑定后立即执行则,bind立即执行需()
 4     person.bind(obj1, 44)()
 5     /*
 6         运行结果:
 7         this: {name: "zhangsan", age: 17}
 8         name: zhangsan
 9         传递的参数p1: 44
10         传递的参数p2: undefined
11         传递的参数p3: undefined
12      */
13 
14    // bind 使用场景举例:一个按钮单击事件,点击后触发
15     const btn = document.getElementById('btn1');
16     btn.addEventListener('click', person.bind(obj1, 55, 66, 77))
17     /*
18         运行结果:
19         this: {name: "zhangsan", age: 17}
20         name: zhangsan
21         传递的参数p1: 55
22         传递的参数p2: 66
23         传递的参数p3: 77
24      */

 

三、call

 1    // call 改变函数内部this指针到obj2对象,且传递参数88,99,多个参数可以并列用逗号排开 88,99 ... ,是立即执行
 2     person.call(obj2, 88, 99)
 3     /*
 4         运行结果:
 5         this: {name: "sunwu", age: 18}
 6         name: sunwu
 7         传递的参数p1: 88
 8         传递的参数p2: 99
 9         传递的参数p3: undefined
10      */

 

四、apply

 1   // bind 改变函数内部this指针到obj3对象,且传递参数[100,200,300],与call区别仅在于apply传递参数是一个数组,多个参数可存在一个数组传递,是立即执行
 2     person.apply(obj3, [100, 200, 300])
 3     /*
 4         运行结果:
 5         this: {name: "aguang", age: 19}
 6         name: aguang
 7         传递的参数p1: 100
 8         传递的参数p2: 200
 9         传递的参数p3: 300
10      */

 

上一篇:我这三年被kafka坑惨了


下一篇:Android 9.0 查看分区信息 Partition size view after android p