Js普通函式和箭頭函式相關知識
1.箭頭函式和普通函式區別
箭頭函式:
1.箭頭函式是匿名函式,不能作為建構函式,不能使用New
2.箭頭函式不繫結arguments,取而代之的是reset引數...解決
3.箭頭函式不繫結this,會捕獲其上下文的this,作為自己的this
4.箭頭函式沒有原型屬性
5.箭頭函式在用apply()或者call()呼叫一個函式時,只傳入了一個引數,對this沒影響,任何方法都改變不了其指向
6.箭頭函式不能當做Generator函式,不能使用yield關鍵字
普通函式:
普通函式的this指向呼叫它的那個物件(詳細見下面)
2.
普通函式的this指向
1.如果一個函式中有this,但是它沒有被上一級的物件所呼叫,那麼this指向的就是window,這裡需要說明的是在js的嚴格版中this指向的不是window,但是我們這裡不探討嚴格版的問題(在嚴格版中的預設的this不再是window,而是undefined。
function dog(){ var user = "二狗子"; console.log(this.user); //undefined console.log(this); //Window } dog(); //相當於window.a(); //this最終指向的是呼叫它的物件,這裡的函式a實際是被Window物件所點出來的
2.如果一個函式中有this,這個函式有被上一級的物件所呼叫,那麼this指向的就是上一級的物件。
var dog = { user:"二狗子", fn:function(){ console.log(this.user); //二狗子 console.log(this); //{user: "二狗子", fn: ƒ} } } dog.fn(); //this執行時被它的上一級物件dog{user: "二狗子", fn: ƒ}呼叫
3.如果一個函式中有this,這個函式中包含多個物件,儘管這個函式是被最外層的物件所呼叫,this指向的也只是它上一級的物件
var dog = { a:1, b:{ //a:2, fn:function(){ console.log(this.a); //undefind 有兩個物件b和dog,所以此this.a指向它的上一級 } }, fn1:function(){ console.log(this.a); //1 } } dog.fn1(); dog.b.fn();
特殊情況:
1.當this遇到return
1. function fn() { this.user = '二狗子'; return {}; } var a = new fn; console.log(a.user); //undefined 2. function fn() { this.user = '二狗子'; return function(){}; } var a = new fn; console.log(a.user); //undefined 3. function fn() { this.user = '二狗子'; return 1; } var a = new fn; console.log(a.user); //二狗子 4. function fn() { this.user = '二狗子'; return undefined; } var a = new fn; console.log(a.user); //二狗子 5. function fn() { this.user = '二狗子'; return null; } var a = new fn; console.log(a.user); //二狗子
總結:如果返回值是一個物件,那麼this指向的就是那個返回的物件,如果返回值不是一個物件那麼this還是指向函式的例項。
還有一點就是雖然null也是物件,但是在這裡this還是指向那個函式的例項,因為null比較特殊。
2.this指向的是window
var dog = { a:1, b:{ a:2, fn:function(){ console.log(this.a); //undefined console.log(this); //window } } } var j = o.b.fn; j();
總結:this永遠指向的是最後呼叫它的物件,也就是看它執行的時候是誰呼叫的,例子中雖然函式fn是被物件b所引用,但是在將fn賦值給變數j的時候並沒有執行所以最終指向的是window