浅谈JavaScript中的apply,call和bind
apply,call,bine 这三兄弟经常让初学者感到疑惑。前两天准备面试时特地做了个比较,其实理解起来也不会太难。
apply
MDN上的定义:
The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).
apply() 方法调用一个函数,指定该函数的 this 值并将一个数组(或类数组对象)作为该函数的参数。
语法 (Syntax)
fun.apply(thisArg,[argsArray])
直接上代码
function sayColor(arg) {var color = "red";console.log(arg + this.color);
}
var obj = {color: "blue"};
sayColor.apply(obj, ["The color is"]); //输出"The color is blue"
此时 this 指向 obj ,则 this.color 为 obj 的 color 属性,则输出 The color is blue。
call
call()
与 apply()
类似,区别在于 apply()
的第二个参数为数组,而 call()
把参数跟在第一个参数后面,并且可以跟多个参数。
语法 (Syntax)
fun.call(thisArg, arg1, arg2, arg3 ...)
看代码
function sayClothe(arg1,arg2) {console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
sayClothe.call(obj, "This is a ", " clothe" ); //输出"This is a blue clothe"
bind
bind()
与 call()
类似,有一点不同在于 bind()
返回一个新函数(new function),我们可以随时调用该函数。
语法(Syntax)
fun.bind(thisArg, arg1, arg2, arg3 ...)
返回值
返回一个具有指定 this
和初始参数的函数副本。
看代码
function sayClothe(arg1, arg2) {console.log(arg1 + this.color + arg2);
}
var obj = {color: "blue"};
var sayClothe2 = sayClothe.bind(obj, "This is a ", " clothe");
sayClothe2(); //输出 "This is a blue clothe"
使用
有时候我们会碰到 Array.prototype.slice.call(arguments)
这种用法。许多人会疑惑,直接使用 arguments.slice()
不就行了吗,为什么要多此一举。
原因在于,arguments 并不是真正的数组对象,只是 array-like object ,所以它并没有 slice 这个方法。而 Array.prototype.slice.call(arguments)
可以理解为把 slice 的对象指向 arguments ,从而让 arguments 可以使用 slice 方法。如果直接使用 arguments.slice()
则会报错。
bind()
的另一个用法则是让函数拥有预设参数,而又跟预设参数有所不同。
以下例子结合上面两条规则 本例出自MDN
function list() {return Array.prototype.slice.call(arguments);
}var list1 = list(1, 2, 3); //[1, 2, 3]//Create a function with a preset leading arguments
var leadingThirtysevenList = list.bind(null, 37);var list2 = leadingThirtysevenList();
//[37]var list3 = leadingThirtysevenList(1, 2, 3);
//[37, 1, 2, 3]
我们想到预设参数就会理所当然的想到 “如果该函数没有参数就使用预设参数,有参数就使用提供的参数”。不过 bind()
所提供的预设参数功能与此不同。
在我们的印象中, list3
应该输出 [1, 2, 3]
但实际输出的却是 [37, 1, 2, 3]
。因为 bind()
的特点,leadingThirtysevenList(1, 2, 3)
可以写为 list.bind(null, 37, 1, 2, 3)
。
总结
apply() call() bind()
三者区别不大,都是用来改变函数的 this 指向。
apply()
把 this 所需参数放入一个数组,作为 apply()
的第二个参数传入。当参数不定时,我们可以传入 arguments。 call()
和 bind()
则把参数按顺序依次传入。
bind()
返回对应函数,便于稍后调用,而 apply()
、call()
则立即调用
由于其特性,使用起来千奇百怪,有各种各样有趣的用法,还等待我们去挖掘。
浅谈JavaScript中的apply,call和bind相关推荐
- 浅谈JavaScript中的apply、call和bind
摘要 三种方法均可改变函数this关键字的指向. apply()接受一参数数组,返回函数执行的结果. call()接受一组参数,返回函数执行的结果. bind()接受一组参数,返回函数体.需在bind ...
- 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
- html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云 阅读:223 作者 ...
- 浅谈JavaScript中的NaN
浅谈JavaScript中的NaN NaN概念以及简单案例 追寻的纯粹该拥有自己的本质.-JC.F 什么是NaN? NaN:NaN(Not a Number),它表示不是数字,但是仍是数值类型. Na ...
- 浅谈JavaScript中闭包
引言 闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...
- 浅谈Javascript中的void操作符
由于JS表达式偏啰嗦,于是最近便开始采用Coffeescript来减轻负担.举个栗子,当我想取屋子里的第一条dog时,首先要判断house对象是否存在,然后再判断house.dogs是否存在,最后取h ...
- html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- 浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
- 浅谈JavaScript中的对象和类型(上)
JavaScript是一种不同于任何强类型程序设计语言的脚本语言,这决定了它对于许多强类型语言的程序员来说有很多莫名其妙.难以理解的地方,本文是本人对JavaScript的一些实践总结出来的简单易懂的 ...
最新文章
- 小白的.Net Core 2.0 ConsoleApp入门(keng)指南(一)
- IIS6+Tomcat7整合
- odyssey react鉴定_Nike Odyssey React SHLD开箱测评 Nike Odyssey React SHLD实物欣赏
- .net core webapi 列表返回指定的字段_ADO.NET 使用初探之SQL操作 | C# 数据操作系列...
- 100g流量在电脑上可以用多久_三大运营商5G体验方案出炉!100G一个月够不够?...
- 《数据结构上机实验(C语言实现)》笔记(2 / 12):线性表
- 用深度学习解决Bongard问题
- 爬了知乎200万数据,图说程序员都喜欢去哪儿工作~
- Oreo易支付程序开源源码分享发行版V1.3
- android和java中常见 Exception
- 苹果MacBook Air 2022款也将有刘海屏设计
- python中、函数定义可以不包括以下_python函数定义精讲
- radar nyoj 287
- 自然语言处理入门(4)——中文分词原理及分词工具介绍
- 13、图灵机器人能力
- 判断日期yyyymmdd
- 在线教育公司的硬件雄心:1秒查词,网易有道发布词典笔二代
- Not a managed type
- Excel Application对象应用大全
- HTML5属性选择器以什么开头,CSS3 选择器 属性选择器介绍
热门文章
- C# winform DevExpress上传图片
- 大数据时代来临 机房精密空调将迎来黄金发展期
- android分辨率与尺寸适配,UI切图方法
- 搜集素材“搜”出的产品设计灵感
- 斯柯达老明锐遥控器汽车钥匙换电池子磁(详细操作过程)
- 详解Tomcat 配置文件server.xml
- 【面向对象】一文了解Java继承(超详细、超有趣)
- 二维正态分布图python代码_Python数据可视化正态分布简单分析及实现代码
- cs服务器维护时间,CS服务器建设简明手册
- Hisilicon Hi3536RBCV100 编解码处理器