JS 函数(arguments、箭头函数、bind)
参数
函数内部可用的 arguments
对象来访问函数的实参
注意
- 在函数递归调用的时候(在某一刻同一个函数运行了多次,也就是有多套实参),那么
arguments
属性的值是最近一次该函数调用时传入的实参 - 如果函数不在执行期间,那么该函数的
arguments
属性的值是null
arguments
对象不是一个Array
。它类似于Array
,但除了length属性和索引元素之外没有任何Array
属性。例如,它没有 pop 方法,但是可以使用Array.prototype.pop.call(arguments,obj)借用Array方法- 使用扩展运算符的方法可以讲arguments对象展开成一个真正的数组 例如:
var args = [...arguments];
- argument.callee 属性包含正在执行函数,这在函数的名称是未知时很有用,例如在没有名称的函数表达式 (也称为“匿名函数”)内
//计算阶乘
function factorial(n){
if(n == 1){
return 1
}
return n*arguments.callee(n-1);
}
console.log(factorial(5));
bind 方法
JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来,然后再调用,希望方法中的 this 是原来的对象(比如在回调中传入这个方法)。如果不做特殊处理的话,一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数
var module = {
x: 42,
getX: function() {
return this.x;
}
}
var unboundGetX = module.getX;
console.log(unboundGetX()); // 这里输出的是全局环境下 x 变量
var boundGetX = unboundGetX.bind(module); //绑定对象
console.log(boundGetX());
// expected output: 42
箭头函数
在箭头函数出现之前,每个新定义的函数都有它自己的 this
值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被称为“对象方法”则为基础对象等)例如
function Person() {
// Person() 构造函数定义 `this`作为它自己的实例.
this.age = 0; setInterval(function growUp() {
// 在非严格模式, growUp()函数定义 `this`作为全局对象,
// 与在 Person()构造函数中定义的 `this`并不相同.
this.age++;
}, 1000);
} var p = new Person();
过去的解决办法是在 Person中新建一个变量指向this 例如 var that = this
箭头函数的出现解决了这个问题,箭头函数不会创建属于自己的this,它使用封闭执行上下文的this值。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同
function Person(){
this.age = 0; setInterval(() => {
this.age++; // |this| 正确地指向person 对象
}, 1000);
} var p = new Person();
注意
- 箭头函数不绑定Arguments 对象
- 箭头函数只能用于非方法函数
- 箭头函数不能作为构造函数
- 箭头函数没有property属性
最后来看一下箭头函数使用语法
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
//相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; }
// 当只有一个参数时,圆括号是可选的:
(单一参数) => {函数声明}
单一参数 => {函数声明}
// 没有参数的函数应该写成一对圆括号。
() => {函数声明}
默认参数
JS函数也可以在声明参数时赋默认值,如果不给默认值,JavaScript 中函数的参数默认是undefined
function multiply(a, b = 1) {
return a * b;
}
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组
function(a, b, ...theArgs) {
// ...
}
剩余参数和 arguments对象之间的区别主要有三个:
- 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。
- arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sort,map,forEach或pop。
- arguments对象还有一些附加的属性 (如callee属性)
JS 函数(arguments、箭头函数、bind)的更多相关文章
- JS中的普通函数和箭头函数
最近被问到了一个问题: >javaScript 中的箭头函数 (=>) 和普通函数 (function) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...
- JS中的箭头函数与this
转载自:https://juejin.im/post/5aa1eb056fb9a028b77a66fd#heading-1 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不 ...
- JavaScript中的普通函数和箭头函数
最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...
- js函数( 普通函数、箭头函数 ) 内部this的指向
- 普通函数 | 具名普通函数.匿名普通函数,在不作为对象的属性值的情况下,其内部的 this 总是指向代码运行环境下的全局对象 ( 例如,浏览器中的 window ). 示例: (functio ...
- 普通函数跟箭头函数中this的指向问题
箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...
- ES6箭头函数(箭头函数和普通函数的区别)
箭头函数 一个参数 // 只有一个参数 // f : 函数名称 // v : 函数参数 // v+v : 函数内容 let f=v=> v+v console.log(f(10)) //20 两 ...
- 理解JavaScript普通函数以及箭头函数里使用的this
this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者.具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里 ...
- ES6深入浅出-2 新版函数:箭头函数 2 视频-1.视频 箭头函数
ES3里面的写法 匿名函数是用不了的 还是需要给他赋值 选中的这一部分叫做匿名函数 等于号叫做赋值 let xxx叫做声明 所以说这个地方是三个语法,首先声明一个匿名函数,然后声明一个xxx变量,最后 ...
- 6 JavaScript函数&内置构造&函数提升&函数对象&箭头函数&函数参数&参数的值传递与对象传递
JavaScript函数:使用关键字function定义,也可以使用内置的JavaScript函数构造器定义 匿名函数: 函数表达式可以存储在变量中,并且该变量也可以作为函数使用. 实际上是匿名函数. ...
- 区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题
ES3 ES5this的指向问题 this指的是该函数被调用的对象 var foo = function () { this.a = 'a', this.b = 'b', this.c = { a: ...
随机推荐
- 【mysql】IP地址整数int和varchar的转换
mysql中IP地址的存储 IP:如192.168.12.145,在存储时,若是采用varchar进行存储,存在两个主要缺点: 存储空间占用较大: 查询检索较慢: 解决方式: 存储时:将字符串类型的I ...
- servlet.xml 出现 Referenced file contains errors(http://.......)
问题描述: 打开Eclipse突然发现Web工程的servlet.xml突然报了红叉叉,错误信息如下: Referenced file contains errors (http://www.spri ...
- Windump教程-参数介绍
1 应用 Windump是tcpdump的Windows版本,主要的参数如下: -D 列出所有的接口 -i interface 指定用于抓包的接口 -c packetcount 指定抓包的个数 -w ...
- react表单事件和取值
常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...
- Mina2 udp--zhengli
一.包与类名. 1.所有类和方法严格使用驼峰法命名.例:SSLFilter 更名为 SslFilter.NIO传输类在命名时增加 Nio 前缀.因为NIO 并不是 socket/datagram 传输 ...
- 云区域(region),可用区(AZ),跨区域数据复制(Cross-region replication)与灾备(Disaster Recovery)(部分1)
本文分两部分:部分1 和 部分2.部分1 介绍 AWS,部分2 介绍阿里云和OpenStack云. 1. AWS 1.1 AWS 地理组件概况 AWS 提供三种地理性组件: Regions:区域,即A ...
- [转][html5]网页横屏
@@media screen and (orientation:portrait){ body{ transform: rotate(90deg); } } 将以上 CSS 加入网页,可以发现手机上查 ...
- centos6.8下l2tp客户端xl2tpd的安装配置
环境: DigitalOcean centos6.8作为l2tp客户端 ros6.43.8作为l2tp服务端 1.安装xl2tp和ppp rpm -ivh http://mirrors.yun-idc ...
- AD中常用的命令
1:查看客户机使用哪台DC进行登录的:在客户端cmd下运行 set命令可以查看使用哪台DC登录. 2:使用命令把客户端加入到域 netdom join fs01 /domain:contoso.co ...
- AI的胜利,人类的荣耀
在围棋界,AI战胜人类,这不是人类的耻辱,是人类的荣耀. 看到柯洁悲伤哭泣的画面,曾经放出豪言的大男孩,低下了骄傲的头.我相信经过这样一次挑战,对他的成长有好处,无论是人生,还是棋艺. 在围棋领域,人 ...