ES6之箭頭函式的簡單介紹

2021-09-27 03:28:31 字數 3150 閱讀 2071

// 1.箭頭函式不能直接存在,它等同於無名函式,一般用來作為值得存在

varfn=(

)=>fn(

)//語義化太差,傷害**的可讀性。

// 2.最簡化寫法:省略小括號,花括號,和return

// 注:這裡要只有乙個引數,是乙個簡單的語句,且有返回值的時候

varfn

= a=>a<10?

"0"+a : a;

var num =fn(

6)console.

log(num)

// 相當於下面的**

function

fn(a)

else

}

// 3.這裡如果使用最簡化寫法,返回的是乙個物件,需要將物件使用小括號包裹

varfn

=(a)

=>()

;var str =fn(

"哈哈"

).name

console.

log(str)

// 4.只要花括號沒有省略,想要有返回值,必須要加乙個return,乙個以上的引數時,小括號不能省略

varfn

=(a, b)

=>

}var str =fn(

"哈哈",18

).age

console.

log(str)

// 箭頭函式中的this

var obj =,0

);},

} obj.

say(

)var obj1 =,0

);}}

; obj1.

say(

)// 箭頭函式看上去是匿名函式的一種簡寫,但實際上,箭頭函式和匿名函式有個明顯的區別。

// 箭頭函式內部的this是由上下文確定的。箭頭函式的this總是指向外層呼叫者obj。

// 這裡可以看出箭頭函式中訪問的this實際上是其父級作用域中的this,

// 箭頭函式本身的this是不存在的,所以箭頭函式不能作為建構函式

let obj =

, fun:

function

(n);

return f2.

call

(m,n);}

};console.

log(obj.fn(

1));

// 11

console.

log(obj.

fun(1)

);// 11

// 6. 箭頭函式在es6 class中宣告的方法為例項方法,不是原型方法

// deom1

class

super1

} console.

log(super1.prototype)

// //通過super.prototype可以訪問到sayname方法,這種形式定義的方法,都是定義在prototype上

var a =

newsuper1()

var b =

newsuper1()

a.sayname ==

= b.sayname //true

// // //所有例項化之後的物件共享prototypy上的sayname方法

//demo2

class

super2

} console.

log(super2.prototype)

// //通過super.prototype訪問不到sayname方法,該方法沒有定義在prototype上

var a =

newsuper2()

var b =

newsuper2()

a.sayname ==

= b.sayname //false

//例項化之後的物件各自擁有自己的sayname方法,比demo1需要更多的記憶體空間

// 7.多重箭頭函式就是乙個高階函式,相當於內嵌函式

const add = x =

> y =

> y + x;

console.

log(

add(1)

(2))

//相當於

function add

(x);

} console.

log(

add(1)

(2))

// 8.箭頭函式也可以使用閉包:

// 標準的閉包函式

function fn()

;}; var v=fn(

);v(

);//1v()

;//2

// //箭頭函式體的閉包( i=0 是預設引數)

var add =

(i=0)=

>

; var v =

add();

v();

//1v()

;//2

// //因為僅有乙個返回,return 及括號()也可以省略

var add =

(i=0)=

>()

=>

(++i)

;

// 箭頭函式不適用的場景(或者不建議使用的場景)

// 1.作為物件的屬性

var obj =};

obj.b(

)

// 2.建構函式,因為箭頭函式中的this指向外層
// 3.作為原型方法

function person

(name)

person.prototype.say =

function()

; person.prototype.show =()

=>

; var pe =

newperson

('jack');

pe.say();

// pe.

show()

;// window

ES6之箭頭函式

一 基本用法 es6 允許使用 箭頭 定義函式。var f 5 等同於 var f function var sum num1,num2 num1 num2 等同於 var sum function num1,num2 如果箭頭函式的 塊部分多於一條語句,就要使用大括號將它們括起來,並且使用retu...

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,...