JS 中 call、apply、bind 那些事
来源:互联网 发布:淘宝格子铺能卖出去么 编辑:程序博客网 时间:2024/06/05 09:10
回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如…
怎么利用call、apply来求一个数组中最大或者最小值
如何利用call、apply来做继承
apply、call、bind的区别和主要应用场景
虽然网上有很多关于这方面的博客和文章,但还是决定写一篇自己对这方面知识的理解。
01-
作用
首先问个问题,这三个函数的存在意义是什么?答案是改变函数执行时的上下文,再具体一点就是改变函数运行时的this指向。有了这个认识,接下来我们来看一下,怎么使用这三个函数。
举个栗子
function Person(name){
this.name = name;
}
Person.prototype = {
constructor: Person,
showName: function(){
console.log(this.name);
}
}
var person = new Person('qianlong');
person.showName();
上面的代码中person调用showName方法后会在浏览器的控制台输出qianlong
接下来
var animal = {
name: 'cat'
}
上面代码中有一个对象字面量,他没有所谓的showName方法,但是我还是想用?怎么办?(坑爹了,这好像在让巧媳妇去做无米之炊),不过没关系,call、apply、bind可以帮我们干这件事。
// 1 call
person.showName.call(animal);
// 2 apply
person.showName.apply(animal);
// 3 bind
person.showName.bind(animal)();
啦啦啦,有木有很神奇,控制台输出了三次cat
我们拿别人的showName方法,并动态改变其上下文帮自己输出了信息,说到底就是实现了复用
02-
区别
上面看起来三个函数的作用差不多,干的事几乎是一样的,那为什么要存在3个家伙呢,留一个不就可以。所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的..
call、apply与bind的差别
call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。
call、apply的区别
他们俩之间的差别在于参数的区别,call和aplly的第一个参数都是要改变上下文的对象,而call从第二个参数开始以参数列表的形式展现,apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。
fn.call(obj, arg1, arg2, arg3...);
fn.apply(obj, [arg1, arg2, arg3...]);
03-
应用
知道了怎么使用和他们之间的区别,接下来我们来了解一下通过call、apply、bind的常见应用场景。
求数组中的最大和最小值
var arr = [34,5,3,6,54,6,-67,5,7,6,-8,687];
Math.max.apply(Math, arr);
Math.max.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687);
Math.min.apply(Math, arr);
Math.min.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687);
将伪数组转化为数组
js中的伪数组(例如通过document.getElementsByTagName获取的元素)具有length属性,并且可以通过0、1、2…下标来访问其中的元素,但是没有Array中的push、pop等方法。我们可以利用call、apply来将其转化为真正的数组这样便可以方便地使用数组方法了。
var arrayLike = {
0: 'qianlong',
1: 'ziqi',
2: 'qianduan',
length: 3
}
上面就是一个普通的对象字面量,怎么把它变成一个数组呢?最简单的方法就是
var arr = Array.prototype.slice.call(arrayLike);
上面arr便是一个包含arrayLike元素的真正的数组啦( 注意数据结构必须是以数字为下标而且一定要有length属性 )
数组追加
在js中要往数组中添加元素,可以直接用push方法,
var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1, arr2);
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]
判断变量类型
对于对象型的数据类型,我们可以借助call来得知他的具体类型,例如数组
function isArray(obj){
return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('qianlong') // false
✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦
- JS 中 call、apply、bind 那些事
- JS 中 call、apply、bind 那些事
- js中call,apply,bimd那些事
- JS call bind apply
- !!js中call、apply、bind的用法
- js中call、apply、bind的用法
- JS中call、apply、bind使用指南
- JS中apply call bind的区别
- JS中call、apply、bind大概区别
- js中bind、call、apply方法详解
- 详解js中call apply bind
- js中call、apply、bind函数
- js中call、apply和bind
- js中call、apply、bind方法
- JS中call、apply、bind的区别
- JS之apply、call、bind
- 【面向JS--apply、call、bind】
- [JS]JS中call/apply/bind方法总结
- HTML转义字符大全
- iOS_隐藏顶部状态栏方式
- 并发与并行的区别
- 禁用WebDAV-tomcat
- 针对http接口访问超时处理
- JS 中 call、apply、bind 那些事
- Linux ps 命令用于查看当前正在运行的进程
- 关于“ORA-12154: TNS: 无法解析指定的连接标识符”的另一种可能情况
- [2017-05-09] CSDN 我的第一篇博文
- 数据结构实验2-2:单链表及其相关操作
- 分布式架构学习之:002--Dubbo架构基本介绍和zookeeper单点安装
- 一个内存jpeg解码的work around
- windows 安装汽车之家falcon插件 采集数据
- 事务