前端素材 设计元素 界面设计 网页素材 网站模板 按钮素材 名片素材 字体设计 图标设计 生活百科
官方客服QQ号:3007971137  (一条龙搭建-联系我)
官方客服QQ号:3007947123  (一条龙搭建-联系我)

JavaScript之call()、apply()、bind() 详解!

前端素材 技术02-千编万码 7月前  次浏览
        作为一名合格的前端开发者,大家都知道JavaScript中的this指向问题是一件很苦恼的事情,因为你稍不留意他就跳来跳去 很多Bug就是在不经意间this上下文出错导致。call()、apply()、bind()的作用也恰恰与this有关,因为在项目开发中很少用到,大家只知道他们是为了:“改变this指向”,但是这样草草了事的答案,只会暴露出你对它们“根本不了解”!!OK,先来看一段简单的代码:
    
 //  window
  var name, age, love;
  function Create(name, age, love) {
      this.name = name
      this.age = age
      this.love = love
  }
  Create('王二牛', '18岁', '唱歌') //调用函数 Create()
  console.log(name, age, love)    //输出结果 王二牛 18岁 唱歌

          再此之前先了解call()函数的定义:

    

call():它可以用来调用所有者对象作为参数的方法。通过 call(),能够使用属于另一个对象的方法。
         首先,在window中定义了name age love三个变量,当执行Create()函数时 函数内部的this毫无疑问指向window,因为他没有具体指向调度者是谁,所以只能是window对象,其实此处调用相当于下面的写法:

    

Create.call(window, '王二牛', '18岁', '唱歌') //编译器默认加上了call、并且指向window
          然后,我们使用call()、()apply()函数改造一段改变this指向的代码:注意第一个参数此刻不是window对象,而是Person对象,故this不再指向winodw。

    

//  call 
  var name, age, love;
  var Person = {} //创建新对象
 
  function Create(name, age, love) {
      this.name = name
      this.age = age
      this.love = love
  }
  Create.call(Person, '王二牛', '18岁', '唱歌') //第一个参数指向Person对象
  console.log(Person) // 输出结果 {name: "王二牛", age: "18岁", love: "唱歌"}
         语法:call()、apply()函数的第一个参数都是this的指向,即调用者。第二个参数及其以后的所有参数都是Create函数的实参;

        区别:call()第二个以及之后的若干参数可以是string、function、Array、object等,且可以有多个参数;

                  apply()只能有两个参数,并且实参只能以数组类型传递到调用函数内部,这也是两者唯一的区别;

    



        接着我们来看看bind()函数的作用:

    

bind():将函数绑定到某一个特定的对象上,调用函数内的this指向的值会被绑定到传入bind()第一个参数的值,例如,f.bind(obj),实际上可以理解为obj.f();
    
//  bind
  var name = '张三疯', age = 88;
  var obj = {
      name: '杨过',
      age: 18,
      sex: '男',
      fun: function () {
          console.log(this.name + " 今年" + this.age + "岁," + "性别:" + this.sex)
      }
  }
  var Girl = {
      name: "小龙女",
      age: 16,
      sex: "女"
  }
  obj.fun()   // 输出结果 杨过 今年18岁,性别:男
  obj.fun.bind(window)() // 输出结果 张三疯 今年88岁,性别:undefined
  obj.fun.bind(Girl)()   // 输出结果 小龙女 今年16岁,性别:女
        上述代码,直接调用 obj.fun() 函数、内部的this指向了 obj 自身对象,因为调度者是obj自身。

        当使用 bind 函数调用时 bind的第一个参数指向了 window 对象,即改变了 this 指向  window 中只定义了变量 name、age ,sex未定义,所以输出结果为“张三疯 今年88岁,性别:undefined”。

        第三次调用改变了this指向为Girl对象,那么她的小龙女就上场了。

        注意: bind()除了返回是函数以外,它的参数和 call 一样。

相关链接

发表评论