zoukankan      html  css  js  c++  java
  • call、apply和bind的用法

    在改变 this 指向的时候,经常会把这三个方法混淆,下面就详细的整理一下三者的用法和区别

    call() 方法

    • call() 方法可以有无数个参数
    • 第一个参数是改变 this 指向的对象
    • 后面的参数直接传递给函数的自身
    • 使用后会自动执行
    var a = {
      name: '张三'
    }
    
    var b = {
      name: '李四',
      sayName: function (a,b,c) {
        console.log(this.name, a+b+c)
      }
    }
    
    b.sayName.call(a, 1,2,3)
    // 输出 --> 张三 6
    

    apply() 方法

    • apply() 方法只能由两个参数
    • 第一个参数是改变 this 指向的对象
    • 第二个参数必须是一个数组
    • 使用后会自动执行
    var a = {
      name: '张三'
    }
    
    var b = {
      name: '李四',
      sayName: function (a,b,c) {
        console.log(this.name, a+b+c)
      }
    }
    
    var arr = [1,2,3]
    
    b.sayName.apply(a,arr)
    // 输出 --> 张三 6
    

    bind() 方法

    • bind() 方法可以有无数个参数
    • 第一个参数是改变 this 指向的对象
    • 后面的参数直接传递给函数的自身
    • 使用后不会自动执行,会返回一个新函数
    var a = {
      name: '张三'
    }
    
    var b = {
      name: '李四',
      sayName: function (a,b,c) {
        console.log(this.name, a+b+c)
      }
    }
    
    var c = b.sayName.bind(a,1,2,3)
    // 需手动调用新函数 c 才会执行
    c()
    // 输出 --> 张三 6
    

    三个方法的共同点

    • 第一个参数都为改变this指向的对象
    • 在非严格模式下,若第一参数为null/undefined,this默认指向window
    • 在严格模式下,若第一参数为null/undefined,this默认指向undefined

    三个方法的区别

    这里用一个表格来展示吧,可能看起来要稍微直观点

    方法名 可含参数个数 是否自动执行
    call 无数个
    appy 两个,第二个必须为数组
    bind 无数个 否,会返回一个新函数
  • 相关阅读:
    jmeter非GUI界面运行脚本
    jmeter函数助手
    jmeter远程压力测试
    linux无工具命令监控
    nmon定时任务
    nmon安装
    Charles抓包
    正交工具allpairs应用
    数据库常用架构和同步工作原理
    ARTS习惯(2)
  • 原文地址:https://www.cnblogs.com/pingzx/p/10654168.html
Copyright © 2011-2022 走看看