es6入门笔记-函数

es6中,新增函数方法。

参数默认值

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
//es6之前
function fn1(x){
//x = x || 'world';
//当x = false,上式不成立
if (typeof x === 'undefined') {
x = 'world';
}
console.log('hello'+x);
}
//es6写法
function fn1(x = 'world'){
console.log('hello'+x);
}

与解构结合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//只有当函数参数等于一个对象时,才会使用函数的默认赋值,下例单纯运用结构赋值。
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

//参数等于对象时函数默认赋值
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5

参数相关

  • 默认参数的位置一般在尾部,否则不能省略该参数。
  • 当指定默认参数之后,它的length失真,不再返回其个数。
  • 当设置了默认参数,参数在初始化时形成作用域,初始化结束消失。

rest参数

ES6 引入 rest 参数(形式为…变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10

function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

注:rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。函数的length属性,不包括 rest 参数。

严格模式

从 ES5 开始,函数内部可以设定为严格模式。ES2016 做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。

name属性

函数的name属性,返回该函数的函数名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"

//如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。
const bar = function baz() {};
bar.name // ES5 "baz"
bar.name // ES6 "baz"

//Function构造函数返回的函数实例,name属性的值为anonymous。
(new Function).name // "anonymous"

//bind返回的函数,name属性值会加上bound前缀。
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "

箭头函数

基本用法

1
2
3
4
var f = function(v) {
return v;
};
var f = v => v;

注意点

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

双冒号运算符

箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头函数并不适用于所有场合,所以现在有一个提案,提出了“函数绑定”(function bind)运算符,用来取代call、apply、bind调用。
函数绑定运算符是并排的两个冒号(::),双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为上下文环境(即this对象),绑定到右边的函数上面。

1
2
3
4
5
6
7
8
9
10
11
12
foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return obj::hasOwnProperty(key);
}

参考链接
http://es6.ruanyifeng.com/#docs/function

------本文结束 感谢阅读------