call() 、 apply() 、bind()方法的作用和区别!
时间:2021-07-21
本文章向大家介绍call() 、 apply() 、bind()方法的作用和区别!,主要包括call() 、 apply() 、bind()方法的作用和区别!使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文转载:https://www.cnblogs.com/liuyilong/p/11710798.html
js中call、apply、bind方法的作用和区别
1. call方法
- 作用:专门用于修改方法内部的
this
指向 - 格式:
xxx.call( 对象名, 参数1, 参数2 , ...);
。即:将xxx
方法的this
指向为对象名
- 实例:
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
指向为对象名
,数组中的元素依次与方法的形参对应 - 实例:
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
指向为对象名
- 实例:
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')]
原文地址:https://www.cnblogs.com/deng-jie/p/15038342.html
- React编程思想
- 前台分页,以及类别选择
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular
- 数据库 105道题目整理与吐血总结
- 使用angular4和asp.net core 2 web api做个练习项目(一)
- =.=
- JavaScript经典面试题之for循环click
- 学习docker on windows (1): 为什么要使用docker
- 使用VS Code开发asp.net core (下)
- 使用VS Code开发asp.net core (上)
- 小程序开发总结
- Silverlight Load Client Image 加载客户端图片
- 使用xUnit为.net core程序进行单元测试(4)
- 使用xUnit为.net core程序进行单元测试(3)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 习题10-4 递归求简单交错幂级数的部分和
- JSP分页显示(前端处理)
- 拓扑排序-HDU2647 Reward
- hadoop2.7.3源码解析之HA架构分析
- hadoop源码解析之hdfs内部结构分析
- 浙大版《C语言程序设计(第3版)》题目集 习题10-5 递归计算Ackermenn函数
- 浙大版《C语言程序设计(第3版)》题目集 习题10-6 递归求Fabonacci数列
- hadoop2.7.3源码解析之hdfs删除文件全流程分析h
- 二维树状数组-POJ 2155 Matrix
- 浙大版《C语言程序设计(第3版)》题目集 习题10-7 十进制转换二进制
- flink开发过程中遇到的问题集锦
- FLINK实战-使用CEP进行网站监控报警和报警恢复
- 浙大版《C语言程序设计(第3版)》题目集 习题10-8 递归实现顺序输出整数
- 浅谈DAO设计模式(示例)
- 浙大版《C语言程序设计(第3版)》题目集 习题11-1 输出月份英文名