• bind、call、apply区别


     

     

     

    bind、call、apply都是用来改变函数内部this指向的方法,使用上仅有细微差别


    一、代码

       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      */
  • 相关阅读:
    1.1 创造性和动机
    【普及分享】云计算=/=云主机,阿里云=低价低端
    【大话设计模式】——策略模式
    Android 学习笔记之Bitmap位图的缩放
    Android 学习笔记进阶十二之裁截图片
    Android 学习笔记进阶14之像素操作
    Android 给图片 加边框
    android 图片特效处理之 光晕效果
    android 图片特效处理之 图片叠加
    android 图片特效处理之光晕效果
  • 原文地址:https://www.cnblogs.com/rapale/p/14983255.html
Copyright © 2020-2023  润新知