js中call、apply、bind方法的作用和区别


1. call方法

  • 作用:专门用于修改方法内部的 this 指向
  • 格式:xxx.call( 对象名, 参数1, 参数2 , ...);。即:将 xxx 方法的 this 指向为 对象名
  • 实例:
    javascript function test(a,b){ console.log(this); console.log(a + b); } test(1,2); // window 3 var obj = {name:'zjy'}; window.test.call(obj,3,5); // {name:'zjy'} 8
    解析:没有使用 call 方法时,test方法的this指向全局对象window,而当使用了call方法后,将test的this指向从window变成了obj对象,而后面的参数则是对应方法的形参顺序
    ***

    2. apply方法

  • 作用:和call方法一样也是修改方法内部的 this指向的,它们的区别在于apply的第二个参数必须为一个数组(部署了Iterator接口的类数组对象也可以)
  • 格式:xxx.apply( 对象名, [数组]);。即:将 xxx 方法的 this 指向为 对象名,数组中的元素依次与方法的形参对应
  • 实例:
    javascript function test(a,b){ console.log(this); console.log(a + b); } test(1,2); // window 3 var obj = {name:'zjy'}; window.test.apply(obj,[3,5]); // {name:'zjy'} 8
    解析:没有使用 apply 方法时,test方法的this指向全局对象window,而当使用了apply方法后,将test的this指向从window变成了obj对象,而后面的数组参数则是将数组中元素依次对应到test方法形参的位置
    ***

    3. bind方法

  • 作用:也是改变this的指向问题
  • 格式:xxx.bind( 对象名 , 参数1, 参数2 , ...);。即:将 xxx 方法的 this 指向为 对象名
  • 实例:
    javascript var obj = {key:"value"} var foo = function(){ console.log(this) } foo.bind(obj)() // obj
    解析:在没有使用bind方法时,foo()中的this指向的是全局对象window,而使用了bind方法之后则指向的是obj对象
    ***

    4. 真数组转变为类数组过程

  • 写法:
    var arr = [1,3,5];
    var obj = {};
    [].push.apply(obj,arr);     // { 0:1, 1:3 , 2:5 , length:3 }

5. 类数组转变为真数组过程

  • ES5写法:
    // 系统自带类数组对象
    var divs = document.querySelectorAll('div');
    // 自定义类数组对象
    var obj = {0:'zjy' , 1:18 , length:2};
    var arr = [];   //  真数组

    // 在高级的浏览器中使用如下的方法是可以实现类数组对象转换为真数组,但是在 IE8 及其以下是不行的
    // [].push.apply(arr,divs);
    // [].push.apply(arr,obj);
    // 为了兼容 IE8 及其以下的浏览器,需要使用数组的 slice 方法
    // 数组的 slice 方法不传递参数的时候是将数组中的元素依次遍历然后放到一个 新的数组 中原样返回
    var arr2 = [].slice.call(obj);
  • ES6写法:
    Array.from();方法用于将类数组对象和可遍历(Iterator)对象转换为真数组
    var obj = {0:'zjy' , 1:18 , length:2};
    var arr = Array.from(obj)   // ['zjy',18]

扩展运算符(...)也可以将可遍历(Iterator)对象转换为真数组

    [..document.querySelectorAll('div')]

apply、bind、call方法的作用与区别的更多相关文章

  1. call() 、 apply() 、bind()方法的作用和区别!

    从一开始,我是在书上看到关于bind().call() 和 apply(), 不过长久以来,在工作中与网上接触到了很多关于这三个方法的使用场景,对这三个方法也算是比较熟悉了.所以把他们的作用和区别简单 ...

  2. 有关java反射的几个小方法的作用和区别

    1.Class类中 getXXX()和getDeclaredXXX()的作用和区别: 前者获取某个类的所有公共(public)的字段(or方法or构造函数),包括父类.后者获取所有的字段(or方法or ...

  3. 跨域的几种方式以及call(),apply() bind()方法的作用和区别

    jsonp: jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议. 一个是描述信息的格式,一个是信息传递 ...

  4. call apply bind的作用及区别? 应用场景?

    call.apply.bind方法的作用和区别: 这三个方法的作用都是改变函数的执行上下文,换句话说就是改变函数体内部的this指向,以此来扩充函数依赖的作用域 1.call 作用:用于改变方法内部的 ...

  5. apply和call方法

    真伪数组转换 /* apply和call方法的作用: 专门用于修改方法内部的this 格式: call(对象, 参数1, 参数2, ...); apply(对象, [数组]); */ function ...

  6. JavaScript方法call、apply、caller、callee、bind的使用详解及区别

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). 即  “某个方法”当做“指定的某个对象”的“方法”被执行. Js代 ...

  7. JavaScript方法call,apply,caller,callee,bind的使用详解及区别

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). 即  “某个方法”当做“指定的某个对象”的“方法”被执行. Js代 ...

  8. js apply/call/caller/callee/bind使用方法与区别分析

    一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, ...

  9. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

随机推荐

  1. Django之模型层(2)

    Django之模型层(2) 一.创建模型 实例:我们来假定下面这些概念,字段和关系. 作者模型:一个作者由姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情 ...

  2. CF979C Kuro and Walking Route(简单的dfs/树形dp)

    题意:给出一个$n$个点,$n-1$条边的无向连通图,给出两个点$x,y$,经过$x$后的路径上就不能经过$y$,问可以走的路径$(u,v)$有多少条,($(u,v)$和$(v,u)$考虑为两条不同的 ...

  3. Redis小白入门系列

    一.从NoSQL说起 NoSQL 是 Not only SQL 的缩写,大意为"不只是SQL",说明这项技术是传统关系型数据库的补充而非替代.在整个NoSQL技术栈中 MemCac ...

  4. idea取消大小写自动提示

    file-settings 取消勾选Match case

  5. Java第三次作业第五题

    5. [问题描述]Fibonacci序列处理 从文件in.txt中读取第一个数作为Fibonacci数列的开始数n,读取第二个数,作为需要写入的数的个数m. 将从n开始的m个Fibonacci数列写入 ...

  6. Elastic Stack 笔记(一)CentOS7.5 搭建 Elasticsearch5.6 集群

    博客地址:http://www.moonxy.com 一.前言 Elasticsearch 是一个基于 Lucene 的分布式搜索引擎服务,采用 Java 语言编写,使用 Lucene 构建索引.提供 ...

  7. Centos 安装java

    1.下载jdk:jdk-8u181-linux-x64.tar.gz,下载地址不用我说了把.. 2.新建java文件夹 mkdir /usr/java 3.将下载的包传到此文件夹中,然后解压 cd / ...

  8. java取json 的方法

    public static void main(String[] args) { String jsonStr = "[{\"varieties_type\":\&quo ...

  9. github博客Hexo引流到微信

    相信有不少小伙伴都在github上创建了属于自己的博客,其中用Hexo的Next主题应该不少,那么,我们究竟该如何将博客的流量引流到微信呢?今天就来带你看一看. 如何引流 现在网上有一种套路,当你在看 ...

  10. Windows认证 | Windows本地认证

    Windows的登陆密码是储存在系统本地的SAM文件中的,在登陆Windows的时候,系统会将用户输入的密码与SAM文件中的密码进行对比,如果相同,则认证成功. SAM文件是位于%SystemRoot ...