前言

回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如…

  1. 怎么利用call、apply来求一个数组中最大或者最小值
  2. 如何利用call、apply来做继承
  3. apply、call、bind的区别和主要应用场景

虽然网上有很多关于这方面的博客和文章,但还是决定写一篇自己对这方面知识的理解。

作用

首先问个问题,这三个函数的存在意义是什么?答案是改变函数执行时的上下文,再具体一点就是改变函数运行时的this指向。有了这个认识,接下来我们来看一下,怎么使用这三个函数。

举个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
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

接下来

1
2
3
var animal = {
name: 'cat'
}

上面代码中有一个对象字面量,他没有所谓的showName方法,但是我还是想用?怎么办?(坑爹了,这好像在让巧媳妇去做无米之炊),不过没关系,call、apply、bind可以帮我们干这件事。

1
2
3
4
5
6
// 1 call
person.showName.call(animal);
// 2 apply
person.showName.apply(animal);
// 3 bind
person.showName.bind(animal)();

啦啦啦,有木有很神奇,控制台输出了三次cat

我们拿别人的showName方法,并动态改变其上下文帮自己输出了信息,说到底就是实现了复用

区别

上面看起来三个函数的作用差不多,干的事几乎是一样的,那为什么要存在3个家伙呢,留一个不就可以。所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的..

call、apply与bind的差别

call和apply改变了函数的this上下文后便执行该函数,而bind则是返回改变了上下文后的一个函数。

call、apply的区别

他们俩之间的差别在于参数的区别,call和aplly的第一个参数都是要改变上下文的对象,而call从第二个参数开始以参数列表的形式展现,apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。

1
2
3
 
fn.call(obj, arg1, arg2, arg3...);
fn.apply(obj, [arg1, arg2, arg3...]);

应用

知道了怎么使用和他们之间的区别,接下来我们来了解一下通过call、apply、bind的常见应用场景。

  • 求数组中的最大和最小值
1
2
3
4
5
6
7
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来将其转化为真正的数组这样便可以方便地使用数组方法了。

1
2
3
4
5
6
var arrayLike = {
0: 'qianlong',
1: 'ziqi',
2: 'qianduan',
length: 3
}

上面就是一个普通的对象字面量,怎么把它变成一个数组呢?最简单的方法就是

1
var arr = Array.prototype.slice.call(arrayLike);

上面arr便是一个包含arrayLike元素的真正的数组啦( 注意数据结构必须是以数字为下标而且一定要有length属性 )

  • 数组追加

在js中要往数组中添加元素,可以直接用push方法,

1
2
3
4
5
6
7
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来得知他的具体类型,例如数组

1
2
3
4
5
6
function isArray(obj){
return Object.prototype.toString.call(obj) == '[object Array]';
}
 
isArray([]) // true
isArray('qianlong') // false

2016.12.31日更新,有些读者对文章提了一些意见,觉得还是蛮好的,现在就其中部分进行更新。

利用call和apply做继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Person = function (name, age) {
this.name = name;
this.age = age;
};
 
var Girl = function (name) {
Person.call(this, name);
};
 
var Boy = function (name, age) {
Person.apply(this, arguments);
}
 
var g1 = new Girl ('qing');
var b1 = new Boy('qianlong', 100);
 
 

js中call、apply、bind那些事的更多相关文章

  1. js 中call,apply,bind的区别

    call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...

  2. JS中call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  3. JS中call,apply,bind的区别

    1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...

  4. 深入理解js中的apply、call、bind

    概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...

  5. JS 的 call apply bind 方法

    js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]] ...

  6. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  7. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  8. js: this,call,apply,bind 总结

    对js中的一些基本的很重要的概念做一些总结,对进一步学习js很重. 一.this JavaScript 中的 this 总是指向一个对象,而具体指向那个对象是在运行时基于函数的执行环境动态绑定的,而非 ...

  9. JavaScript中call,apply,bind方法的总结

    原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...

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

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

随机推荐

  1. vue原来可以这样上手

    今儿与一群友讨论vue相关问题让我思量极深,1.我们是否在争对性解决问题或者说是帮助别人:2.我们是否在炫耀自己的技能.以下是被戏剧化的对白: "群友":最近按照vue官网示例学习 ...

  2. 游戏音频技术备忘 (三) 集成Wwise到Unreal Engine

    当前受众较广的商业游戏引擎有 Unreal Engine.Unity.cocos2d-x等,在音频领域的第三方中间件则有Wwise.FMOD.Criware等,言多且烦,我们首先集成Wwise到 Un ...

  3. css浮动(float,clear)

    1. 以div元素布局为例,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流,是指标准流中的div. 无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”,显然标准 ...

  4. 依赖lean cloud的注册与登录

    前言 实现登录注册的基本功能,没有添加手机验证和邮箱验证的功能,有相应的方法,如果需要,可以自己加上其相应的方法 github的网址: 效果图: 正文 1.导入leancloud相应的第三方,这个等我 ...

  5. 用jdk在cmd下运行编译java程序

    1.首先通过创建一个txt文档,将java代码写入txt文档中保存 2.将保存好的HelloWorld.txt文档重命名为HelloWorld.java文件. 3.打开windows中的"命 ...

  6. Android EclipseIDE技巧

    一.Eclipse配置使用 1.显示行号(Winodw-->Preferences-->General-->Editors-->Text Editors-->勾上右侧的S ...

  7. LAMP学习小记

    记录今天学习到的解决LAMP环境搭建的两个小问题: 问题1.xshell无法连接到虚拟机上的linux主机 解决方法: (1)进入网络配置文件: vi /etc/sysconfig/network-s ...

  8. php新建数据库对象 基础知识

    数据访问 结合html 数据库 PHP面向对象的方式函数的方式 1建立通道 MySQLi 类通过构造函数造出 连接数据库地址 uesername 连接用户名 passwd dbname port so ...

  9. BZOJ 3391: [Usaco2004 Dec]Tree Cutting网络破坏(搜索)

    这道直接遍历一遍求出每个点的子节点数目就行了= = CODE: #include<cstdio>#include<iostream>#include<algorithm& ...

  10. 将Error异常日志从普通日志中剥离

    开发过程中经常需要调试和线上环境查看异常日志的需求,但普通消息与异常消息混在一起实在是非常难得找,上则NM的文档够你头痛,所以就将Error级别的日志抽离出来. 本示例采用log4net来配置: 1. ...