鍍金池/ 問答/網(wǎng)絡安全  HTML/ 神奇的問題,子類構造函數(shù)中若存在訪問this的函數(shù)表達式,則其中 this 在調(diào)

神奇的問題,子類構造函數(shù)中若存在訪問this的函數(shù)表達式,則其中 this 在調(diào)試時始終為 undefind

構建兩個最簡單的 class,
Athis 增加一個 'a' 屬性,
Bthis 增加一個 'b' 屬性, 值為 this.a + 1, B 繼承 A

但是 如果在構造函數(shù)存在函數(shù)體中訪問了 this 的函數(shù)表達式, 則 在調(diào)試中 就取不到 this 的值了。
目前發(fā)現(xiàn)似乎只影響斷點調(diào)試。

正常情況:
圖片描述

把函數(shù)表達式取消注釋,會發(fā)現(xiàn)進入斷點后 thisundefined, 此時在控制臺輸入 console.log(this) 結果也是 undefined
圖片描述

兩次運行的控制臺輸出相同, 都是正確的!!
ps: 一次運行有兩個輸出: 2 是代碼中 console.log 的輸出, undifined 是 代碼片段的運行結果(立即執(zhí)行函數(shù)的返回值)
圖片描述

代碼:

(function(){
    class A{
        constructor(v) { this.a = v; }
    }

    class B extends A{
        constructor(opt) {
            super(opt);

            debugger;
            this.b = this.a + 1;

            console.log(this.b);
            
            () => this;
        }
    }

    new B(1);
})();

這是 es6 的特性還是 瀏覽器的 bug 呢?有沒有大佬之前了解這個問題的,能否幫忙分析分析,非常感謝!

補充

VSCode 錯誤
clipboard.png

Edge 里 this 倒是有了, this.a 還是沒有,
注釋掉函數(shù)表達式 this.a 也沒有,
eval("debugger") 時訪問不到 this
clipboard.png

回答
編輯回答
無標題

詳情看這里:https://stackoverflow.com/a/2...
簡單地說是因為v8的代碼優(yōu)化造成的結果。答案的下面的回復(https://stackoverflow.com/a/4...)也提到了一個繞過去這個問題的方法:使用eval('debugger');代替debugger

2017年8月5日 04:34