es6函式的拓展與箭頭函式
阿新 • • 發佈:2018-11-15
1、函式的預設值:
function fn (a=1,b=2) {
console.log(a) //10
console.log(b) //2
}
fn(10)
可以看到,當沒有傳第二個引數的時候,b的值為預設值2。
var age = 2
function fn (func = () => {console.log(age)}) {
var age = 1
func() //2
}
fn()
值得一提的是,設定預設值的時候,在函式進行宣告初始化時,會形成一個單獨的作用域。
可以看到,fn的預設引數是一個函式,函式裡列印age變數,呼叫fn時,引數形成一個單獨的作用域,在這個作用域裡面,
並沒有找到age變數,所以打印出了全域性的age變數。
function fn (...arr) {
console.log(arr)
}
fn(1,2,3,4) //[1, 2, 3, 4]
使用…運算子,會將傳入的所有值都包裝進…運算子後面的變數中,變數的值為一個數組。
function fn (a,...arr) { console.log(arr) //[2, 3, 4] console.log(a) //1 } fn(1,2,3,4) function fn (...arr,a) { console.log(arr) console.log(a) } fn(1,2,3,4) 報錯 注意:...arr後面不能再有引數
2、箭頭函式
2.1、箭頭函式的寫法
var f = name => name;
console.log(f("a")) //a
上面的程式碼可以看成是這樣
function f (name) {
return name;
}
2.2、關於箭頭函式的圓括號和花括號
var f = () => name; //不需要引數的時候,必須要加圓括號 var f = (a,b) => name; //引數有多個的時候,必須加圓括號 var f = () => ({name:1}) //返回一個物件的時候,如果不寫花括號,需要使用括號,否則會報錯。 var f = () => { var name = 1; return name; } //執行的語句多餘一條的話,需要使用花括號。
2.3 箭頭函式的this
普通函式中擁有this指標,但箭頭函式中沒有this,因此,當在箭頭函式中使用this的時候,其引用的是箭頭函式定義時所在的作用域,
或者說,是引用外部作用域中的this
function fn () {
setTimeout(() => console.log(this) ,0)
}
var obj = {name:"我是小明"};
fn.call(obj) //{name: "我是小明"}
上面的程式碼,其實可以看成是這樣:
function fn () {
var that = this;
setTimeout(() => console.log(that) ,0)
}
var obj = {name:"我是小明"};
fn.call(obj) //{name: "我是小明"}
這裡,箭頭函式中的this引用的其實是fn函式中的this,而fn函式中的this在執行時指向了obj。
如果是使用普通函式的話,this會指向window,因為普通函式擁有自己的this
由於箭頭函式沒有自己的this,所以當然也不能用call,apply,bind方法去改變this的值,因為this根本不存在。
同樣的,由於沒有this,箭頭函式不能作為建構函式,使用new操作符對箭頭函式進行呼叫將會報錯。
例子1:
var obj = {
age : 1,
fn : () => {
console.log(this)
}
}
var fn = () => {
console.log(this.age)
}
function func () {
console.log(this.age)
}
fn.call(obj) //undefined
obj.fn() //window
func.call(obj) //1
例子2:
function fn () {
console.log(this.age) //1
return () => {
console.log(this.age) //1
return () => {
console.log(this.age) //1
}
}
}
var obj = {
age : 1
}
var f = fn.call(obj)
由於內層都是箭頭函式,沒有自己的this,因此其實this用的是最外層的fn函式中的this
2.5、箭頭函式沒有arguments物件。
var f = () => console.log(arguments)
f() //報錯
function fn (a) {
var f = () => console.log(arguments[0]) //1 根據作用域鏈,檢索到的arguments為fn的arguments物件。
f() //報錯
}
fn(1)