js箭頭函式和普通函式的區別

2021-09-05 09:23:44 字數 1837 閱讀 6383

1.不繫結this

在箭頭函式出現之前，每個新定義的函式都有其自己的 this 值

var myobject = ,


double:function()


}}myobject.double()();  //希望value乘以2


myobject.getvalue();  //1
在ecmascript5中將this賦給乙個變數來解決：

var myobject = ,


double:function()


}}myobject.double()();  //2


myobject.getvalue();  //2
除此之外，還可以使用 bind 函式，把期望的 this 值傳遞給 double() 函式。

var myobject = ,


double:function().bind(this)


}}myobject.double()();  //2


myobject.getvalue();  //2
箭頭函式會捕獲其所在上下文的 this 值，作為自己的 this 值，因此下面的**將如期執行。

var myobject = ,


double:function()


}}myobject.double()();  


myobject.getvalue();
var myobject = ,


addthrucall:function(a);


return f.call(b,a);


}}console.log(myobject.add(1));    //2


console.log(myobject.addthrucall(1));    //2
3.箭頭函式不繫結arguments,取而代之用rest引數…解決

var foo = (...args) => 


console.log(foo(1))    //1
4.使用new操作符

箭頭函式不能用作構造器，和 new 一起用就會丟擲錯誤。

var foo = () => {};


var foo = new foo();  //foo is not a constructor
5.使用原型屬性

箭頭函式沒有原型屬性。

var foo = () => {};


console.log(foo.prototype) //undefined
6.不能簡單返回物件字面量

var func = () => ;


// calling func() returns undefined!


var func = () =>   };


// syntaxerror: function statement requires a name


//如果要返回物件字面量,用括號包裹字面量


var func = () => ();
7.箭頭函式當方法使用的時候沒有定義this繫結

var obj = 


}obj.add();  //undefined


obj.double(); //2
8.箭頭函式不能換行

var func = ()


=> 1; // syntaxerror: expected expression, got '=>'

js中箭頭函式和普通函式this的區別

最近在學習angularjs的時候由於裡面涉及到了箭頭函式，箭頭函式除了宣告上有點區別以外，和普通函式最主要的區別還是在this的問題上。js中函式中巢狀的函式this不會 繼承 比如說以下 1 var o 5function outer 7 function inner 10 11 outer.c...

箭頭函式和普通函式的區別

面試時被問到箭頭函式和普通函式的區別。借用別人的乙個栗子 function make var testfunc make.call testfunc testfunc.call object object可以看到箭頭函式在定義之後，this 就不會發生改變了，無論用什麼樣的方式呼叫它，this 都不...

普通函式和箭頭函式的區別

箭頭函式 let fun 普通函式 function fun 箭頭函式相當於匿名函式，並且簡化了函式定義。箭頭函式有兩種格式，一種只包含乙個表示式，連和return都省略掉了。還有一種可以包含多條語句，這時候就不能省略和return。1 箭頭函式是匿名函式，不能作為建構函式，不能使用new let ...