函数默认参数
arguments一个诡异的地方
function mixArgs (a, b) {
console.log(a === arguments[0], b === arguments[1])
a = 'a'
b = 'b'
console.log(a === arguments[0], b === arguments[1])
}
非严格模式下：
true true
VM305:3 Arguments(2) ["x", "y", callee: ƒ, Symbol(Symbol.iterator): ƒ]
VM305:6 Arguments(2) ["a", "b", callee: ƒ, Symbol(Symbol.iterator): ƒ]0: "a"1: "b"callee: ƒ mixArgs(a, b)length: 2Symbol(Symbol.iterator): ƒ values()__proto__: Object
VM305:7 true true
严格模式：
function mixArgs1 (a, b) {
'use strict'
console.log(a === arguments[0], b === arguments[1])
console.log(arguments)
a = 'a'
b = 'b'
console.log(arguments)
console.log(a === arguments[0], b === arguments[1])
}
/**
true true
VM508:4 Arguments(2) ["x", "y", callee: (...), Symbol(Symbol.iterator): ƒ]
VM508:7 Arguments(2) ["x", "y", callee: (...), Symbol(Symbol.iterator): ƒ] "x"
VM508:8 false false
*/
使用es6默认参数
function mixArgs2 (a, b = 'y') {
console.log(a === arguments[0], b === arguments[1])
console.log(arguments)
a = 'a'
b = 'b'
console.log(arguments, arguments[0])
console.log(a === arguments[0], b === arguments[1])
}
/**
*
* true true
VM536:3 Arguments(2) ["x", "y", callee: (...), Symbol(Symbol.iterator): ƒ]
VM536:6 Arguments(2) ["x", "y", callee: (...), Symbol(Symbol.iterator): ƒ] "x"
VM536:7 false false
* */
es6 中，如果一个函数使用了默认参数，则无论是否显式的定义了严格模式，arguments对象的行为都与es5严格模式下保持一致。
当默认参数是表达式的时候
问题：getVal是什么时候调用的，定义add还是调用add的时候
function getVal() {
console.log('you use me')
return 5
}
function add (a, b = getVal()) {
return a + b
}
再看一个例子
let x = 5
function getVal () {
return x++
}
function add (a, b = getVal()) {
return a + b
}
add(1,1) // 2
add(1) // 6
add(1) // 7
add(1) // 8
add(1) // 9
默认参数的临时死区
// example 1
function getVal (val) {
return val + 5
}
function add (a, b = getVal(a)) {
return a + b
}
add(1) // 7
// example 2
function getVal (val) {
return val + 5
}
function add (a = getVal(b), b) {
return a + b
}
add(undefined, 1)
// 报错了
VM1218:4 Uncaught ReferenceError: b is not defined
at add (<anonymous>:4:26)
at <anonymous>:1:1
这里相当于执行了let 赋值
根据上个例子，默认参数在执行时赋值
example 1:
let a = 1
let b = getVal(a) // 6
example 2:
let 是有临时死区的
let a = getVal(b)
let b = 1
不定参数
let book = {
name: 'es6 study',
author: 2019,
year: 2019
}
function pick(obj){
let result = Object.create(null)
let arg = arguments
for (let i = 1 ; i < arg.length ; i++) {
result[arg[i]] = obj[arg[i]]
}
return result
}
pick(book, 'year', 'name')
// {year: 2019, name: "es6 study"}
function pick2(obj, ...keys){
let result = Object.create(null)
for (let i = 0 ; i < keys.length ; i++) {
result[keys[i]] = obj[keys[i]]
}
return result
}
pick2(book, 'year', 'name')
// {year: 2019, name: "es6 study"}
pick2:keys才是我们需要关心的,函数的length属性依旧是1
ps:只能有一个展开的参数
function.name属性
function f1 () {}
f2 = function () {}
f2.name // "f2"
f1.name // "f1"
f3 = function f4 () {}
f3.name // "f4"
f5 = new Function ('a', 'return a')
f5.name // "anonymous"
f1.bind().name // "bound f1"
函数表达式有一个名字，这个名字比赋值的权重高。
函数的用途
es6之前函数一般有两种用途：直接调用和通过关键字new调用。js函数有两个不同的内部方法:[[call]]和[[construct]]。通过new执行的是construct方法(箭头函数没有该方法),创建一个新的实例对象，不是new的情况则是执行call方法。
Vue判断你是不是通过new 关键字调用的
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
...
}
function Vue (options) {
if (
!(this instanceof Vue)
) {
console.warn('Vue is a constructor and should be called with the `new` keyword')
}
}
Vue({})
// Vue is a constructor and should be called with the `new` keyword
vm = new Vue({})
vm2 = Vue.call(vm, {a: 1})
通过这种方式就没法判断是不是new关键字调用的，当然这个也是重新执行某个实例，但是就必须要求new 方法调用，其他的就是不行。怎么办？
es6引入了元属性(非对象的属性)：new.target。调用函数的[[construct]]方法，new.target被赋值为new 操作符的目标。调用[[call]]方法则为undefined。
可以改进为：
function Vue (options) {
if (
!(new.target)
) {
console.warn('Vue is a constructor and should be called with the `new` keyword')
}
}
vm = new Vue({})
vm2 = Vue.call(vm, {a: 1})
// 报错：Vue is a constructor and should be called with the `new` keyword
