ES6中的函式(函式引數 預設值 箭頭函式)

2022-08-18 04:21:17 字數 3150 閱讀 6134

function foo([a,b]) 

foo([1,2]);

function bar()

bar();

function foo(a,b=10) 

foo(1);

function bar([a,b=10])

bar([3]);

function fn()

fn();

function bar([a,b=10] = [20]) 

bar();

function fn( = )

fn();

但如果傳入實參,那麼就會把預設的覆蓋。

function bar([a,b=10] = [20]) 

bar([100]); // 100+10 => 110

bar([100, 200]); // 100+200 => 300

function fn( = )

fn(); // 100+10 => 110

fn(); // 100+200 => 300

function getb() ;

function foo(a,b=getb())

foo(1);

語法:引數=>函式體

// 傳統寫法(無引數)

let fn = function()

// 箭頭函式寫法

let fn = ()=>(1);

let fn = ()=>1;

// 傳統寫法(乙個引數)

let bar = function(a) ;

// 箭頭函式寫法

let bar = (a)=>2;

let bar = a=>2;

// 傳統寫法(多個引數)

let fn = function(a,b) ;

// 箭頭函式寫法

let fn = (a,b)=>a+b;

// 多行語句時不可省略花括號

let br = function(a,b)

let br = (a,b)=>

函式體內的this物件是固定的,就是定義時所在的物件,而不是使用時所在的物件。

var id = 10;

let obj = ,1000)

}}obj.fn();

分析:1秒後執行window.settimeout(),this指向window,因此返回的結果是全域性下的id:10

如果想要獲取obj內的id,一般採用_this = this的辦法。

var id = 10;

let obj = ,1000)

}}obj.fn();

var id = 10;

let obj = ,1000)

}}obj.fn(); // 15

obj.fn.call(); // 123

分析:settimeout()中用了箭頭函式,因此箭頭函式內的this物件就固定在父級作用域下的this上。(這裡就是函式fn)

也就是說,fn函式內的this指向了誰,箭頭函式的this就指向了誰。

當被obj呼叫時,fn函式的this指向了obj,所以返回obj下的id:15

當被物件呼叫時,fn函式的this指向了,所以返回該物件下的id:123

var id = 10;

let obj = ,1000)

}}obj.fn(); // 10

obj.fn.call(); // 10

分析:當obj下的fn方法也用箭頭函式,那麼就會沿著作用域鏈往上找它的父級作用域的this,這裡找到的是全域性window。

於是this就固定在了window上,不管誰去呼叫它,它都只會返回window下的id:10

普通函式在初始化的過程中,會產生乙個arguments物件用來儲存實參。

但是在箭頭函式中是不存在的,如果要使用實參列表,那麼用rest引數來代替。

// 普通函式

let fn = function(a,b,c)

fn(1,2,3);

// 箭頭函式

let bn = (...args)=>

bn(1,2,3);

let person = (name)=> 

let p = new person('mm'); // typeerror: person is not a constructor

var id = 10;

let obj = ,1000)

}}obj.fn(); // 15

let person = 

}var name = 'gg';

person.say();

let box = document.getelementbyid('box');

box.addeventlistener('click', function()else

console.log(this); // box

});box.addeventlistener('click', ()=>else

console.log(this); // window

});

函式引數也可以解構賦值。

函式引數可以設定預設值,可以預設實參。

函式引數的預設值可以是函式呼叫。

箭頭函式的語法:引數=>函式體

箭頭函式的this是固定的,指向了父級作用域的this。

箭頭函式沒有arguments,可以用rest引數代替。

箭頭函式不可以new例項化。

箭頭函式不可以使用yield命令

ES6 函式引數的預設值

在es6之前,不能直接為函式的引數指定預設值,只能採取變通的方法。function log x,y log kkk kkk world這種寫法的缺點在於 如果引數y賦值了,但是對應的布林值為false,則該賦值不起作用。如果在呼叫函式的時候,傳入的y引數是乙個空字串,那麼y就會被修改為預設值。避免這...

方法引數 預設值 ES6 函式的預設值

es6 之前,不能直接為函式的引數指定預設值,只能採用變通的方法。function log x,y log hello hello world log hello 你好 hello china 這裡可以看到,檢查函式log的引數y有沒有賦值,如果沒有,則指定預設值為 哈嘍 這種寫法的缺點在於,如果引...

ES6函式擴充套件(函式引數預設值)

一 函式的預設引數基本使用方法function test x,y hello test winne 函式引數 winne hello test winne hi 函式引數 winne hi如上 我們可以看出,當函式引數有了預設值可以不傳入那個引數,那麼就直接使用預設的引數。注意 引數變數是預設宣告的...