1. 程式人生 > >es6函式的拓展與箭頭函式

es6函式的拓展與箭頭函式

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)