一、函式引數的解構賦值
function foo([a,b]) {
console.log(a+b); // 3
}
foo([1,2]);
function bar({c,d}) {
console.log(c+d); // 7
}
bar({c:3,d:4});
二、函式默認引數
2.1 基本方式
function foo(a,b=10) {
console.log(a+b); // 1+10=11 => 11
}
foo(1);
function bar([a,b=10]) {
console.log(a+b); // 3+10=13 => 13
}
bar([3]);
function fn({a,b=10}) {
console.log(a+b); // 5+10=15 => 15
}
fn({a:5});
2.2 可以預設實參
function bar([a,b=10] = [20]) {
console.log(a+b); // 20+10=20 => 20
}
bar();
function fn({a,b=10} = {a:20}) {
console.log(a+b); // 20+10=30 => 30
}
fn();
2.3 預設實參的覆寫
但如果傳入實參，那么就會把預設的覆寫，
function bar([a,b=10] = [20]) {
console.log(a+b);
}
bar([100]); // 100+10 => 110
bar([100, 200]); // 100+200 => 300
function fn({a,b=10} = {a:20}) {
console.log(a+b);
}
fn({a:100}); // 100+10 => 110
fn({a:100,b:200}); // 100+200 => 300
2.4 默認值可以是函式
function getB() {return 10};
function foo(a,b=getB()) {
console.log(a+b); // 1+10=11 => 11
}
foo(1);
三、箭頭函式
語法：引數=>函式體
- 單行陳述句可以省略花括號，如果還是return陳述句，還可以省略return關鍵字，
- 多行陳述句不可以省略花括號，
- 一個引數可以省略圓括號，多個引數不可以省略圓括號，
// 傳統寫法（無引數）
let fn = function() {return 1;}
// 箭頭函式寫法
let fn = ()=>(1);
let fn = ()=>1;
// 傳統寫法（一個引數）
let bar = function(a) {return 2};
// 箭頭函式寫法
let bar = (a)=>2;
let bar = a=>2;
// 傳統寫法（多個引數）
let fn = function(a,b) {return a+b};
// 箭頭函式寫法
let fn = (a,b)=>a+b;
// 多行陳述句時不可省略花括號
let br = function(a,b) {
let res = a+b;
return res;
}
let br = (a,b)=>{
let res = a+b;
return res;
}
四、箭頭函式的特點
4.1 箭頭函式內的this固定化
函式體內的this物件是固定的，就是定義時所在的物件，而不是使用時所在的物件，
- 普通函式內的this情境
var id = 10;
let obj = {
id: 15,
fn: function(){
setTimeout(function(){
alert(this.id); // 10
},1000)
}
}
obj.fn();
分析：1秒后執行window.setTimeout()，this指向window，因此回傳的結果是全域下的id:10
如果想要獲取obj內的id，一般采用_this = this的辦法，
var id = 10;
let obj = {
id: 15,
fn: function(){
_this = this; // 呼叫后，這里的this指向obj
setTimeout(function(){
alert(_this.id); // 15
},1000)
}
}
obj.fn();
- 箭頭函式內的this情境（1）
var id = 10;
let obj = {
id: 15,
fn: function(){
setTimeout(()=>{
alert(this.id);
},1000)
}
}
obj.fn(); // 15
obj.fn.call({id:123}); // 123
分析：setTimeout()中用了箭頭函式，因此箭頭函式內的this物件就固定在父級作用域下的this上，（這里就是函式fn）
也就是說，fn函式內的this指向了誰，箭頭函式的this就指向了誰，
當被obj呼叫時，fn函式的this指向了obj，所以回傳obj下的id:15
當被物件{id:123}呼叫時，fn函式的this指向了{id:123}，所以回傳該物件下的id:123
- 箭頭函式內的this情境（2）
var id = 10;
let obj = {
id: 15,
fn: ()=>{
setTimeout(()=>{
alert(this.id);
},1000)
}
}
obj.fn(); // 10
obj.fn.call({id:123}); // 10
分析：當obj下的fn方法也用箭頭函式，那么就會沿著作用域鏈往上找它的父級作用域的this，這里找到的是全域window，
于是this就固定在了window上，不管誰去呼叫它，它都只會回傳window下的id:10
4.2 箭頭函式沒有arguments物件
普通函式在初始化的程序中，會產生一個arguments物件用來保存實參，
但是在箭頭函式中是不存在的，如果要使用實參串列，那么用rest引數來代替，
// 普通函式
let fn = function(a,b,c) {
console.log(arguments);
}
fn(1,2,3);
// 箭頭函式
let bn = (...args)=> {
console.log(args);
}
bn(1,2,3);
4.3 箭頭函式不可以用new實體化
let Person = (name)=> {
this.name = name;
}
let p = new Person('mm'); // TypeError: Person is not a constructor
4.4 箭頭函式不可以使用yield命令
五、箭頭函式的使用場景
- 當我們要維護一個this背景關系環境時，就可以用箭頭函式，
var id = 10;
let obj = {
id: 15,
fn: function(){
setTimeout(()=>{
alert(this.id);
},1000)
}
}
obj.fn(); // 15
- 定義物件方法，且要用到this時，不要用箭頭函式！
let person = {
name: 'mm',
say: ()=>{
console.log(this.name); // 'gg'
}
}
var name = 'gg';
person.say();
- 監聽DOM事件時，不要用箭頭函式！
let box = document.getElementById('box');
box.addEventListener('click', function(){
if(this.classList!='red') {
this.classList = 'red';
}else {
this.classList = 'green';
}
console.log(this); // box
});
box.addEventListener('click', ()=>{
if(this.classList!='red') {
this.classList = 'red';
}else {
this.classList = 'green';
}
console.log(this); // window
});
六、總結
- 函式引數也可以解構賦值，
- 函式引數可以設定默認值，可以預設實參，
- 函式引數的默認值可以是函式呼叫，
- 箭頭函式的語法：引數=>函式體
- 箭頭函式的this是固定的，指向了父級作用域的this，
- 箭頭函式沒有arguments，可以用rest引數代替，
- 箭頭函式不可以new實體化，
- 箭頭函式不可以使用yield命令
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/96612.html
標籤：JavaScript
上一篇：蒲公英 · JELLY技術周刊 Vol.05: Rust & Electron 的高性能實踐 -- Finda
下一篇：JavaScript DOM操作