OLD函数默认参数
// 缺点：布尔值为false的变量都会被赋为默认值
function fn(x) {
x = x || 'hello'
}
// 比较麻烦
function fn (x) {
if (typefo x === 'undefined') {
x = 'hello'
}
}
基本用法
在 ES2017 中，允许定义和调用函数时，最后一个参数有
,
惰性求值
let x = 99;
function foo(p = x + 1) {
console.log(p);
}
foo() // 100
x = 100;
foo() // 101
报错情景
- 当函数参数
x有默认值，再在函数中声明就会报错 - 当函数参数都没有默认值，允许参数同名。只要函数参数有一个就没有默认值，就不允许函数参数同名。
- 当函数参数有对象解构的情况，函数对象中的属性不能和其它参数同名
// 情景3 ---- 报错
function fn (x,{x = 1,n = 2}={}) {
console.log(x,n)
}
fn('yy');
函数参数对象
function fn({x,y=1}) {
console.log(x,y)
}
fn({}) // undefined,1
fn() // 报错
- 报错原因，当没有参数时，其实默认参数为
undefined。对象和undefined发生解构报错。 - 正确原因，传入对象，发生解构，x没有默认解构值，则为undefined,y有默认解构值，则为1
function fn({x,y=1} = {}) {
console.log(x,y)
}
fn({}) // undefined,1
fn() // undefined,1
-
fn()执行过程如下
- 调用
fn，没有参数，使用函数默认参数{} - 发生对象解构，x没有解构默认值，y有默认解构值
// 分析以下案例
// 写法一
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
默认值位置
- 应该时函数的尾参数
- 有默认值，会影响
fn.length
- 一般是
fn.length - 默认参数个数 - 当默认参数不是尾参数，
fn.length是第一个默认参数之前的参数的个数 - 当参数是
...rest,fn.length是0
作用域
当函数有默认值时，参数会形成一个独立的作用域
简单案例
var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2) // 2
function ff (y = x) {
console.log(y);
}
- 函数
f的参数形成一个默认作用域。函数初始化过程
- 参数
x被赋值为2 - 参数
y被赋值为x，在当前作用域中找x，找到x = 2，因此y = 2
- 函数初始化过程
- 没有参数
x - 参数
y被赋值为x，在当前作用域中没有x，找到全局变量x，因此y = 1
参数为函数的案例
var x = 1;
function foo(x, y = function() { x = 2; }) {
var x = 3;
y();
console.log(x);
}
foo() // 3
x // 1
- 函数初始化
- 参数
x没有默认值，因此，在函数foo中再声明x不会报错 - 在函数
foo的参数作用域中，x先为undefined，在调用y时，x是参数而不是全局变量x，此时参数x改为2 - 但是由于，在函数再次声明了
x，这个x完全不是参数，因此函数foo打印x为3
- 当去掉
var x = 3，函数foo的参数，其实相当于声明并赋值参数x，没有函数内部变量x，参数x就会被打印。
rest参数
- 形式，
function fn(...rest) - rest参数是数组，之后不允许有参数
严格模式
- 函数中可以使用
use strict设置严格模式 - 当函数参数有默认值，解构赋值，扩展运算符时，不允许使用严格模式
- 有两种方法可以规避以上规则
- 全局严格模式
- 在立即调用的函数中使用严格模式
name属性
-
name属性使用方式fnName.name
function fn() {} // fn.name--->fn
var fn = function () {} // fn.name--->fn
var fn = function fun() {} // fn.name----->fun
fn.bind({},1) // fn.name---->bound fn
(new Function).name // ----> anonymous
(function () {}).name //---->''
箭头函数
箭头函数结构
functionName = (arg1,arg2) => {arg1 + arg2};
- 其中函数名省略，则为匿名函数
- 根据参数情况也可以省略
- 当没有参数或者两个及两个以上参数时，
(小括号不可省略 - 当有一个参数时，小括号可以省略
- 当函数体只有一条语句，可以省略
{大括号，并默认有return返回。当不需要返回值时
- 即使一条语句也加上
{，这样就没有返回值 - 使用
void (一条语句)，这样也没有返回值
var fn = (x,y) => x + y;
// 等价于
function fn (x,y) {
return x + y;
}
箭头函数
-
this固定，指向定义时的this - 箭头函数不能做构造函数
- 不能使用
arguments - 不能使用
yield，也就是箭头函数不能做Generator
注意点
- 箭头函数中没有自己的
this，只是引用外层的this - 箭头函数无法使用
call(),apply(),bind()改变this执行
分析过程(一)
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// result: 42
- 当执行
foo.call({id: 42})内部的this指向{id: 42} - 此时，箭头函数没有自己的
this。外部的this就是{id:42} - 即使100毫秒后，在
setTimeout中，this也不改变为window
分析过程(二)
function foo() {
setTimeout(function() {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// result: 21
- 普通函数，
this指向运行时的上下文环境 -
setTimeout伪代码function setTimeout() {//delay... callback();},可以看到callback函数，也就是普通函数的没有绑定到其它对象上
尾调用
- 最后一步调用其它函数，称为尾调用
- 尾调用函数定义时，不使用外层函数的变量
- 尾调用，有利于节约内存
// 这种情况没有使用外层函数的变量
function f() {
let m = 1;
let n = 2;
return g(m + n); // 最后一步用
}
f();
// 这种情况使用了外层函数的变量
function f() {
let m = 1;
function g(n) {
return m + n;
}
return g(2); // 最后一步用
}
f();
