1. 程式人生 > 實用技巧 >Js普通函式和箭頭函式相關知識

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