動態

詳情 返回 返回

關於this指向的一些梳理 - 動態 詳情

函數內

非嚴格模式

通常情況下,定義的函數的this就是window,比如:

function doit(){
    console.log(this);
}

doit();

打印結果:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

嚴格模式

不過,如果開啓了嚴格模式:

"use strict"

function doit(){
    console.log(this);
}

doit();

打印結果:

undefined

箭頭函數

不過,如果嚴格模式下改為箭頭函數,打印結果就還是window:

"use strict"

var doit = ()=>{
    console.log(this);
}

doit();

對象中

普通函數

總結起來就是:誰調用我,我指向誰。比如我們現在有一個json如下:

var obj = {
    key1: {
        key2: {
            doit: function () {
                console.log(this);
            },
            key3: {
                doit: function () {
                    console.log(this);
                }
            }
        }
    }
};

那麼,執行下面語句:

obj.key1.key2.doit();

打印結果就是:

{key3: {…}, doit: ƒ}

因為調用我的是obj.key1.key2,所以this就是它。而執行下面的語句:

obj.key1.key2.key3.doit();

打印結果就是:

{doit: ƒ}

同理,此時this就是obj.key1.key2.key3。

接收一下

如果下面這樣先存一下再調用:

var doit=obj.key1.key2.doit;
doit();

打印結果如下:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}

箭頭函數

這裏情況其實變得更簡單了,this永遠指向當前作用域中的this。

比如我們把上面的json改造一下:

var obj = {
    key1: {
        key2: {
            doit: ()=> {
                console.log(this);
            },
            key3: {
                doit: ()=> {
                    console.log(this);
                }
            }
        }
    }
}

那麼對於下面的語句:

obj.key1.key2.doit();
obj.key1.key2.key3.doit();

那麼打印結果就是:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

由於json定義在全局作用域上,所以this就是window。

柯理化函數

比如我們有如下一個json:

var json = {
    doit: function () {
        return function () {
            console.log(this);
        };
    }
};

打印結果:

Window {window: Window, self: Window, document: document, name: '', location: Location, …}
user avatar nihaojob 頭像 qingzhan 頭像 kobe_fans_zxc 頭像 hard_heart_603dd717240e2 頭像 xiaoxxuejishu 頭像 solvep 頭像 guixiangyyds 頭像 yixiyidong 頭像 nznznz 頭像 geeklab 頭像 haixiudezhusun 頭像 beckyyyy 頭像
點贊 103 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.