javaScript中call()、bind()和apply()都是改变this的指向,那么它们的区别和用法是如何的呢?

了解call()、bind()、apply()之前我们需要先了解一下this的指向
案例1:

var name = "王五",age =20; 
    var Person ={
      name:"张三",
      age:18,
      message:function(){
        console.log("姓名:"+name+"  年龄:"+age)  
      }
    }
Person.message();	//姓名:王五  年龄:20

案例1 的结果似乎和所想的结果有些差别,name和age所输出的是window下的name和age的值,而不是当前对象里面的值

案例2:

var name = "王五",age =20; 
    var Person ={
      name:"张三",
      age:18,
      message:function(){
        console.log("姓名:"+this.name+"  年龄:"+this.age)
      }
    }
    Person.message();//姓名:张三  年龄:18

案例1 和案例2 的区别,可以看出加了this,name和age对象变成了当前对象Person里面的值,所以this是指向当前对象

案例3:

 var name = "王五",age =20; 
    var Person ={
      name:"张三",
      perAge:this.age,
      message:function(){
        console.log("姓名:"+this.name+"  年龄:"+this.age)
      }
    }
 Person.message();//姓名:张三  年龄:undefined

案例3 我们可以看出,this只会在当前对象(Person)中找age,没有找到age,那么结果就是undefined

了解了this,我们来看一下call()、bind()、apply()

  1. 改变this的指向,重定义this这个对象
 var name = "王五",age =20; 
    var Person ={
      name:"张三",
      perAge:this.age,
      message:function(sex,address,){
        console.log("姓名:"+this.name+"  年龄:"+this.age)
      }
    }
    var person = {
      name:"赵六",
      age:25
    }
  Person.message.call(person);//姓名:赵六  年龄:25
  Person.message.bind(person)();//姓名:赵六  年龄:25
  Person.message.apply(person);//姓名:赵六  年龄:25

共同点 :call()、bind()、apply()都是改变this的指向
区别bind 返回的是一个新的函数,你必须调用它才会被执行

  1. 三者传入参数问题
var name = "王五",age =20; 
    var Person ={
      name:"张三",
      perAge:this.age,
      message:function(sex,address,){
        console.log("姓名:"+this.name+"  年龄:"+this.age+"  性别:"+sex+"  住址:"+address)
      }
    }
    var person = {
      name:"赵六",
      age:25
    }
    Person.message.call(person,"男","上海");
    Person.message.bind(person,"男","上海")();
    Person.message.apply(person,["男","上海"]);

共同点: 第一个参数传入的都是所要指向的对象
不同点: 从第二个参数开始,就是三者的区别。

  • call和bind传入的参数都是以 字符串 形式传入,多个参数之间用逗号隔开
  • apply从第二个参数开始,后面的参数都需要放在 一个数组中,每个参数之间同样需要用逗号隔开。如果没有放在数组中则会报错
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值