es6箭頭函式的理解及面試題

2021-08-19 20:24:31 字數 1629 閱讀 1092

箭頭函式的介紹

箭頭函式是es6當中對函式的一種全新表示法。其將函式的簡潔性發揚到了極致！先來看乙個最簡單的箭頭函式：

let fn=v=>v;


console.log(fn("好酷的箭頭函式！"));//好酷的箭頭函式！
初次接觸箭頭函式的人可能會為其簡潔性的語法而驚訝！和之前的寫法進行一次比較：

let fn=function(v)


console.log(fn("好酷的箭頭函式！"));//好酷的箭頭函式！
箭頭函式的寫法

1、如果只有一條語句，可以將{}和return省略掉

v=>v+v;


//相當於


function (v)
2、如果語句為多條，則不可以省略{}和return

v=>和return時，如果返回的內容是乙個物件，物件需要用括號（）括起來:()=>();
箭頭函式不能用於建構函式

先看不是箭頭函式的建構函式**，一切正常！

var box=function(age)


var obj=new box(20);


console.log(obj.myage);//20
如果改為箭頭函式的形式，再來看看：

var box=age=>


var obj=new box(20);//box is not a constructor


console.log(obj.myage);
箭頭函式沒有prototype屬性
var foo = () => {};


console.log(foo.prototype); // undefined
箭頭函式不繫結arguments

一道面試題可以說明一切：

var arguments = 42;


var fn = () => arguments;


console.log(fn()); // 42


function foo() 


console.log(foo(1)); // 3
箭頭函式不繫結this

箭頭函式中的this指向的是定義時的this，而不是執行時的this。也就是說箭頭函式沒有自己的this，其內部的this繫結到它的外圍作用域。物件內部的箭頭函式若有this，則指向物件的外圍作用域。

再來看道面試題：

window.color = "red";


//let 宣告的全域性變數不具有全域性屬性，即不能用window.訪問


let color = "green";


let obj = 


};let saycolor = () => ;


obj.getcolor();//red


saycolor();//red
再來一道面試題

window.color = "red";


let color = "green";


let obj = ;


let saycolor = () => ;

ES6 箭頭函式理解

一 關於箭頭函式的基本使用 以前的寫法 const add function a,b 箭頭函式 將普通函式的 function 關鍵字刪掉，在小括弧與大括弧中間加上1個箭頭 用法與普通函式一樣。const sayhi a,b 二 關於箭頭函式的引數 如果引數只有乙個，那麼包圍引數的小括弧 可以省略，...

es6箭頭函式

本例是在了解es6知識後在原來定義函式的基礎上進行理解var searchvalue 查詢匹配物件 var button var input var select button if searchvalue.input undefined button.click else 重新整理 tableli...

es6 箭頭函式

1.單引數 function cheng a 3 let cheng a 3 a a console.log cheng 9 2.多引數 function add a,b let add a,b a b 預設返回值 console.log add 3,9 3.無返回值 function add a,...