JavaScript中call()、apply()、bind()的区别以及手写apply

51 篇文章 1 订阅
49 篇文章 1 订阅

call()、apply()、bind()是用来改变this的指向的。
语法:

fun.call(thisArg, param1, param2, ...)
fun.apply(thisArg, [param1,param2,...])
fun.bind(thisArg, param1, param2, ...)

返回值:

  • call/apply:fun执行的结果
  • bind:返回fun的拷贝,并拥有指定的this值和初始参数

一、call和apply

直接举例子:


var cat = {
  name:"喵喵",
  eatFish:function(param1,param2){
    console.log("吃鱼");
	console.log("this的指向=>");
	console.log(this);
	console.log(param1,param2);
  }
}
 
var dog = {
	name:"汪汪",
	eatBone:function(param1,param2){
		console.log("啃骨头");
		console.log("this的指向=>");
		console.log(this);
		console.log(param1,param2)
	}


//第一种,用call方法
cat.eatFish.call(dog,"旺财-13岁","call");
//第二种,用apply方法,参数不一样
cat.eatFish.apply(dog,["旺财-13岁","apply"]);

在这里插入图片描述
如果call()和apply()的第一个参数是null或者undefined,那么this的指向就是全局变量,在浏览器里就是window对象。

二、bind

var eatFishFun = cat.eatFish.bind(dog,"旺财-13岁","bind"); //返回的是方法
eatFishFun();

在这里插入图片描述
bind()方法在这里再多说一下,bind的时候传的参数会预先传给返回的方法,调用方法时就不用再传参数了。

三、手写apply

function fn(a,b,c) { 
      console.log(this);
      console.log(a,b,c);
     }
    Function.prototype.myApply= function(context){
      // 此处this为fn (谁调用了myApply谁就为fn)
       context.fn = this
      //  为apply所绑定的对象添加一个fn为function fn
       if(arguments[1]){
        //  判断是否有第二个参数 如果有则将参数解构传入到context.fn中 然后执行函数
        context.fn(...arguments[1])
       }
       else{
        // 如果没有直接执行函数
         context.fn()
       }
    }  
      fn.myApply({name:'29kun'},[1,2,3,4])

参考:https://blog.csdn.net/u010176097/article/details/80348447

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值