函数的扩展
来源:互联网 发布:ubuntu安装monaco字体 编辑:程序博客网 时间:2024/06/16 11:42
文章编写参考 阮一峰《ECMAScript 6 入门》
1. 函数参数的默认值
1.1 基本用法
在ES6之前如果要给函数赋值一般采用以下这样的方式
function fun(x, y) { y = y || "Blue"; console.log(x, y);}fun("Hi") //Hi Bluefun("Hi", "Lucky") //Hi Lucky
上面代码中为参数【y】指定了默认值,但是这样的写法在遇到【y】如果是布尔类型的值的时候,加入我为【y】赋值为false,那么会发现没法赋值成功。
为了避免上面的问题,我们将上面的函数进行改写
function fun(x, y) { if (typeof y === 'undefined') { y = y || "Blue"; } console.log(x, y);}
有了ES6之后就方便,我们可以直接在函数参数列表中进行参数默认值的定义
function fun(x, y = 'Blue') { console.log(x, y);}fun("Hi") //Hi Bluefun("Hi", "Lucky") //Hi Lucky
上面的例子看出ES6的写法比ES5的简洁了很多,而且不存在布尔值的问题,下面是另外一个【构造函数】的例子
function fun(x = 'Hi', y = 'Blue') { this.x = x; this.y = y;}var foo = new fun(); //{ x: 'Hi', y: 'Blue' }
【注意】:函数的参数是默认声明的,所以在函数作用域中不能存在与参数相同名称的变量声明
function fun(x = 'Blue') { let x = 'Crazy'; // error const x = 'Jack'; // error}
上面代码片段中,x 为参数变量,在该函数作用域中进行再次声明引起报错。
函数参数的默认值可以使用表达式,但是表达式是【惰性求值】的,也就是说在函数调用的时候重新计算默认值。
let x = 10;function fun(r = x + 1) { console.log(r);}fun(); //11x = 100;fun(); //101
上面代码中函数默认值是一个【简单表达式】,可以看出表达式在赋值的时候是在应用的时候才进行的。
let add = (x, y) => x + y;let sub = (x, y) => x - y;let fun = (r = add(1, 2)) => console.log(r);fun(); //3fun(sub(4, 2)); //2
上面代码中函数默认值使用的是【函数赋值】,可以更加清晰的看出函数默认值的赋值时【惰性求值】的。
1.2 函数默认值与解构赋值结合使用
既然函数参数实际上也是一个变量声明的过程,那么函数默认值也可以使用【解构赋值】
let fun = ({ x, y = 'Blue' }) => console.log(x, y);fun({}); //undefined Bluefun({ x: "Hi" }); //Hi Bluefun({ x: 'Hi', y: 'Crazy' }); //Hi Crazyfun(); //// TypeError: Cannot read property 'x' of undefined
上面解构赋值代码中,只有当fun参数是一个对象时,默认值的解构赋值才会生效,最后一行代码没有传参就报错了。
我们看看对上面例子的改造
let fun = ({ x, y = 'Blue' } = {}) => console.log(x, y);fun(); //undefined 'Blue'
上面代码中函数未给予参数仍然能够正常的运行。
【注意】看一看下面两种写法的差别,就明白上面两个例子的差异在哪儿了
//写法一let fun = ({ x = 'Hi', y = 'Blue' } = {}) => console.log(x, y);//写法二let fun1 = ({ x, y } = { x: 'Hi', y: 'Blue' }) => console.log(x, y);
上面两种写法都对函数参数设定了默认值,区别是写法一函数参数的默认值是空对象,但是设置了对象解构赋值的默认值,写法二函数参数的默认值是一个有具体属性的对象,但是没有设置对象解构赋值的默认值。
let fun = ({ x = 'Hi', y = 'Blue' } = {}) => console.log(x, y);let fun1 = ({ x, y } = { x: 'Hi', y: 'Blue' }) => console.log(x, y);//都没有参数的情况fun(); //Hi Bluefun1(); //Hi Blue//一样参数的情况fun({x: 'Hello', y: 'Crazy'}); //Hello Crazyfun1({x: 'Hello', y: 'Crazy'}); //Hello Crazy//缺失值得情况fun({x: 'Hello'}); //Hello Bluefun1({x: 'Hello'}); //Hello undefined//都无值得情况fun({}); //Hi Bluefun1({}); //undefined undefined
看出区别了吗?函数在传入参数的时候,会替换原有=右边的对象,如果我们将默认值放在=右边的对象属性中进行默认解构,那么当函数传入参数的时候这个对象就被替换掉了。
1.3 参数默认值的位置
通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。
let fun = (x, y = 'Blue', z) => console.log(x, y, z);fun(); //undefined 'Blue' undefinedfun('Hi', 'Crazy', 'Nice') //Hi Crazy Nicef('Hi',, 'Nice') // 报错
上面代码中,有默认值的参数不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入undefined。
let fun = (x, y = 'Blue', z) => console.log(x, y, z);fun('Hi', undefined, 'Nice'); //Hi Blue Nice
上面代码中y传入undefined参数,根据解构赋值的规则会触发默认值
1.4 函数的length属性
函数的【length】属性返回的是没有默认值的参数个数,也就是说指定了默认值的参数就不会计入length属性的计数中。
(x => x).length //1((x='Blue') => x).length //0((x, y, z = 'Blue') => x).length //2
上面代码中第二段和第三段都设置了参数默认值,可以看出设置了默认值的参数不计入length计算。
((x = 'Blue', y, z) => x).length; //0((x, y = 'Blue', z) => x).length; //1((x, y, z = 'Blue') => x).length; //2
上面代码中参数默认值的位置不同导致了【length】属性的不同,其实是,【如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。】
1.5 作用域
一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。
let x = 'Blue';let fun = (x, y = x) => console.log(x, y);fun('Crazy'); //Crazy Crazy
上面代码中,参数y的默认值等于变量x。调用函数f时,参数形成一个单独的作用域。在这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是Crazy Crazy。
let x = 'Blue';let fun = (y = x) => { let x = 'Crazy'; console.log(y);}fun(); //Blue
上面代码中,函数调用时,参数y = x形成一个单独的作用域。这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,由于块级作用域,所以函数体内部的局部变量x影响不到默认值变量x。
上面例子中因为默认值赋值的X变量是指向外层的全局x,所以如果全局没有x则会报错
let fun = (y = x) => { let x = 'Crazy'; console.log(y);}fun(); // 'ReferenceError: x is not defined'
下面这样子写也会报错
var x = 1;function foo(x = x) { // ...}foo() // ReferenceError: x is not defined
上面代码中,参数x = x形成一个单独作用域。实际执行的是let x = x,由于暂时性死区的原因,这行代码会报错”x 未定义“。
1.6 默认值应用
利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
function throwIfMissing() { throw new Error('Missing parameter');}function foo(mustBeProvided = throwIfMissing()) { return mustBeProvided;}foo()// Error: Missing parameter
上面代码中参数默认值设置为一个函数,由于是【惰性求值】,所以foo在运行时,如果没有传入参数则执行函数抛出错误。
另外,可以将参数默认值设为undefined,表明这个参数是可以省略的
function foo(optional = undefined) { ··· }
2.rest参数
什么事rest参数,形式为(…变量名)这样子的函数参数我们称之为rest参数,rest参数将多余的组合成一个数组。
function fun(...values) { console.log(values);}fun(1, 2, 3, 4)//[ 1, 2, 3, 4 ]
上面代码中rest参数将所有传入的参数都放入了values数组中,这样就完全取代了arguments对象,并且拥有更多的属性。
【注意】rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
// 报错function f(a, ...b, c) { // ...}
函数的length属性,不包括 rest 参数。
(function(a) {}).length // 1(function(...a) {}).length // 0(function(a, ...b) {}).length // 1
3.严格模式
ES6规定,只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。
// 报错function doSomething(a, b = a) { 'use strict'; // code}// 报错const doSomething = function ({a, b}) { 'use strict'; // code};// 报错const doSomething = (...a) => { 'use strict'; // code};const obj = { // 报错 doSomething({a, b}) { 'use strict'; // code }};
4.name属性
函数的name属性,返回该函数的函数名。
function foo() {}foo.name // "foo"
这个属性是在ES5中就有的,但是ES6对其做了一些修改,如果将一个匿名函数赋值给一个变量,ES5 的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。
var f = function () {};// ES5f.name // ""// ES6f.name // "f"
上面代码中,变量f等于一个匿名函数,ES5 和 ES6 的name属性返回的值不一样。
如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。
const bar = function baz() {};// ES5bar.name // "baz"// ES6bar.name // "baz"
Function构造函数返回的函数实例,name属性的值为anonymous。
(new Function).name // "anonymous"
bind返回的函数,name属性值会加上bound前缀。
function foo() {};foo.bind({}).name // "bound foo"(function(){}).bind({}).name // "bound "
5.箭头函数
5.1 基本用法
以前的函数定义就是function,ES6使得这一切更加简单清晰
let f = x => x;
上面代码翻译跟ES5就是下面这样子
var f = function f(x) { return x;};
和if语句一样,代码库多余一条语句,就要使用大括号将它们括起来,并且要返回值时使用return语句
let f = x => { if (typeof x === undefined) { x = 'Blue'; } return x;};
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });
既然箭头函数也是函数,那么参数同样可以与变量解构结合使用
let fun = ({ x, y }) => console.log(x + y);fun({ x: 1, y: 2 }); //3
上面代码为对象的解构赋值和箭头函数的应用
let fun = ([x, y]) => console.log(x + y);fun([1, 2]); //3
上面代码为数组的解构赋值和箭头函数的应用
如果参数列表只有一个参数,则可以省略参数列表的括号
[1, 2, 3, 4].map(x => x * 10);//[ 10, 20, 30, 40 ]
如果箭头函数不需要参数或者需要多个参数,则必须使用圆括号代表安琥是列表
let fun = () => 'Blue';let fun = (x, y, z) => x + y + z;
既然正常函数可以与rest参数联合使用,那么箭头函数也可以
const mkArr = (...arr) => arr;mkArr(1, 2, 3, 4); //[1, 2, 3, 4]const mkArr = (first,...arr) => [first,arr];mkArr(1, 2, 3, 4);//[1, [2, 3, 4]]
5.2 使用箭头函数的注意点
- 函数体内的this对象,就是【定义时所在的对象】,而不是使用时所在的对象。
- 【不可以当作构造函数】,也就是说,不可以使用new命令,否则会抛出一个错误。
- 【不可以使用arguments对象】,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
- 【不可以使用yield命令】,因此箭头函数不能用作 Generator 函数。
function fun() { setTimeout(() => { console.log('name:', this.name); }, 100);}var name = 'Crazy';fun.call({ name: 'Blue' }); //name: Blue
上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在fun函数生成时,而它的真正执行要等到100毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出Crazy。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{ name: ‘Blue’ }),所以输出的是Blue。
箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。下面是另一个例子。
function Timer() { this.s1 = 0; this.s2 = 0; // 箭头函数 setInterval(() => this.s1++, 1000); // 普通函数 setInterval(function () { this.s2++; }, 1000);}var timer = new Timer();setTimeout(() => console.log('s1: ', timer.s1), 3100);setTimeout(() => console.log('s2: ', timer.s2), 3100);// s1: 3// s2: 0
上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)。所以,3100毫秒之后,timer.s1被更新了3次,而timer.s2一次都没更新。
- mysqli的扩展函数
- es6函数的扩展
- 07 函数的扩展
- 函数的扩展
- ES6-函数的扩展
- 函数的扩展
- ES6--函数的扩展
- kotlin的扩展函数和扩展属性
- Array的一些扩展函数
- 扩展javascript的trim函数
- 多层扩展BOM的函数
- jQuery扩展函数的用法
- jq的扩展函数解析
- Lua String 的扩展函数
- mysqli扩展函数的应用
- ECMAScript6笔记:函数的扩展
- 第八节,函数的扩展
- ES6--对象、函数的扩展
- centos配置nginx防盗链
- 28-字符串的排列
- Python+不同的数据存储方式比较
- selenium(四)--iframe
- 关于Fildder更改ip简单配置
- 函数的扩展
- Ubuntu下apt-get安装与pip安装的区别
- NSFileManager终极杀手
- LeetCode | 58. Length of Last Word
- java中关键字volatile的作用
- UE(虚幻)4 蓝图可视化编程进阶篇 02 发报机
- Android 解决Smart Lock 打不开的问题
- 学习其它网站的布局
- Lua基础学习2-逻辑操作符和table构造式