动态

详情 返回 返回

關於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.