js系列-函數Function

先思考幾個問題：

1.函數是什麼

2.怎麼定義函數

函數是對象

函數是Function的執行個體對象，函數名是指針，通過下面這種方式定義函數很容易了解這句話：

let fun = new Function('a','b','c','return a+b+c');
           

Function是構造函數，括号内為參數，最後一個參數始終會被解析為函數體。

定義函數

//函數聲明方式
function user(){
    console.log('user')
}
//聲明變量方式
let user = function() {
    console.log('user')
}
           

注意：标準聲明優先級高于指派聲明

//标準聲明優先級高于指派聲明
user('WoNiuJun');//function:WoNiuJun
//函數聲明方式
function user(name){
    console.log('function:' + name)
}
//聲明變量方式
var user = function(name) {
    console.log('var:' + name)
}
           

匿名函數

經常用到

let arr = [1, 2, 3].filter((item,index) => item > 1);
console.log(arr);//[2,3]
           

立即執行函數

函數定義時立即執行

預設參數

//以前我們需要在函數中使用管道符||指派
function add(a,b){
    b = b || 3;
    console.log(a+b);
}
add(1);//4
//現在我們可以使用預設值
function total(a,b=3){
    console.log(a+b);
}
total(1);//4
           

arguments

arguments 是函數參數集合(類數組)

//以前我們可以通過arguments擷取傳遞的多個參數
function add() {
   return [...arguments].reduce((total,item) => total + item,0);
}
console.log(add(1,2,3));
//現在我們可以用展開文法接收多個參數
function add1(...args) {
   return args.reduce((total,item) => total + item,0);
}
console.log(add1(1,2,3));
           

箭頭函數

箭頭函數是函數聲明的簡寫形式，有下面幾種情況表現形式。

無參數時使用空擴号即可

let sum = () => {
	return 1 + 2;
}
console.log(sum()); //3
           

函數體為單一表達式時不需要 

return

 傳回處理，系統會自動傳回表達式計算結果。

let sum = () => 1 + 2;
console.log(sum()); //3
           

隻有一個參數時可以省略括号 

let small = [1, 2, 3, 5].filter(item => item <= 3);
console.log(small);
           

this指向

調用函數時 

this

 會隐式傳遞給函數指函數調用時的關聯對象，也稱之為函數的上下文。其實結合上面講的arguments,我們可以知道調用函數時會預設傳遞兩個對象一個是this，一個是arguments。

函數調用

'use strict'
function user(){
    console.log(this);//非嚴格模式下：Window {window: Window, self: Window, document: document, name: "", location: Location, …}
    console.log(this);//嚴格模式下：undefined
    console.log(arguments);//Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
user();
           

箭頭函數

箭頭函數中的this指向定義函數時的所在的上下文

let user = {
  name: 'Tom',
  getName: ()=>{
      console.log(this.name);//Tom
  }
}
           

call

改變this，即改變函數上下文。

有這樣一個場景，有一個Tom對象，他需要一個計算年齡的方法，但他自身沒有，剛巧有一個User函數有這個計算年齡的方法，Tom就想借用User的方法，這時call就派上用場了，用代碼實作就是：

function User(age){
    this.age = age;
    this.getTenAfterAge = ()=>{
        return this.age + 10
    }
}

let Tom = {name:'Tom'};

User.call(Tom,20);//改變User中的this上下文，即this指向Tom
console.log(Tom.getTenAfterAge());//30
           

call和apply

call與apply 兩個方法作用一樣都是改變this指向，隻是在傳遞參數上不同。

• apply 用數組傳參
• call 需要分别傳參

bind和call/apply

bind()是将函數綁定到某個對象

• 與 call/apply 不同bind不會立即執行
• bind 是複制函數形為會傳回新函數