首页 > 其他分享 >js基础之call、apply

js基础之call、apply

时间:2022-08-21 16:01:01浏览次数:64  
标签:function ... context js call key apply

call与apply的异同

相同点:1、都可以用来修改函数内部的this指向

    2、都会立即执行函数

不同点:

1、传参方式不同

  第一个参数都是传递需要指向的obj,之后的传递参数的方式不相同,apply是把剩下的参数通过数组的形式传递,call剩下的参数传递个数不固定,一个一个的传递。

应用场景:

  call可以用来判断数据类型,如:Object.prototype.toString.call([]) // 返回值[object Array]

  apply可以用来求数组的最值,如:const arr = [3,4,6,1,4,50]; Math.max.apply(this, arr);同样用call也可以实现,只不过传参不一样。

手动实现call和apply:

Function.prototype.myCall = function (context) {
  if (typeof this !== 'function') {
    throw new Error('Not a function')
  }
  //
  context = Object(context)
  const key = Symbol(); // 这里为了方便就使用Symbol保证唯一性,当然也可以使用其他的方式,如自己再写个生成uuid的方式获取唯一值。
  const args = [...arguments].slice(1); // [...arguments]这一步是把类数组arguments变为真正的数组,使其具有slice方法,从而获取参数。
  context[key] = this; // 这里的this就是代表要执行的方法。
  context[key](...args);

  delete context[key]; 
}

Function.prototype.myApply = function (context, rest) {
  if (typeof this !== 'function') {
    throw new Error('Not a function')
  }
  //
  context = Object(context)
  const key = Symbol();
  context[key] = this;
  context[key](...rest);

  delete context[key];
}

  解析:

    上面执行执行 context[key](...args)和 context[key](...rest)之所以能改变this的指向是因为把对应的执行方法先挂载在context上,然后通过context来执行,因为普通函数内部this的指向的是其直接调用者。明白这个道理就自己实现起来就简单了。




标签:function,...,context,js,call,key,apply
From: https://www.cnblogs.com/brucefq/p/16610132.html

相关文章

  • JSON解析器Jackson
    JSON解析器JacksonJSON解析器:常见的解析器:Jsonlib,Gson,fastjson,jacksonnjava对象转为JSON使用步骤导入jackson的相关jar包创建Jackson核心对象ObjectMapper调用ob......
  • js小项目
    1.点击图片换壁纸《ulclass="a">《li>《imgsrc="E://图片//0.png">《/li>《li>《imgsrc="E://图片//1.png">《/li>《li>《imgsrc="E://图......
  • JAVA对象与JSON转换的各种方法-fastjson
    1<!--https://mvnrepository.com/artifact/com.alibaba/fastjson-->2<dependency>3<groupId>com.alibaba</groupId>4<artifactId>fastjson</artifactId>......
  • JSON概念和语法定义
    JSON概念概念:JavaScriptObjectNotationJavaScript对象表示法Personp=newPerson();p.setName("张三“);p.setAge(23);p.setGender("男");varp={"name":"张三"......
  • JSON数据和Java对象的相互转换
    JSON数据和Java对象的相互转换JSON解析器创建的解析器:Jsonlib,Gson,Fastjson,jacksonJSON转为Java对象使用步骤:导入jackson相关的jar包创建Jackson革新对象Obje......
  • json转java对象以及校验用户名是否存在案例
    json转java对象使用步骤:1、导入jackson的相关jar包2、创建Jackson核心对象ObjectMapper3、调用ObjectMapper的相关方法进行转换1、readValue(js......
  • JSON_语法_值得获取
    JSON_语法_值得获取json对象.键名json对象["键名"]数据对象[索引]获取值:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</......
  • chunk-vendors.js优化
    chunk-vendors.js优化对于打包来说,chunk-vendors文件大导致加载熟读慢的优化。是很常见的,在我的项目开发中,实际没有没有引用太多的三方插件。但是总体积为900kb。加载耗时......
  • AJAX_概念和AJAX原生js方式
    AJAX_概念概念:ASynchronousJavaScriptAndXML异步的JavaScript和XML异步和同步:客户端和服务器端相互通信的基础上客户端必须等待服务器端的响应在等待期间客户端......
  • JSON_概念和JSON_语法_定义
    JSON:概念:JavaScriptObjectNotationJavaScript对象表示法Personperson=newPerson();person.setName("张三");person.setAge(23);person.setGender("男");v......