兩句話理解js中的this

前言: 一直都搞不清javascript中this的指向,你不知道的javascript(上卷)這本書中有3章都是在講解this,去年第一次看完仍是以爲似懂非懂的,一深刻的問仍是不清楚,如今在看一遍,真心以爲這本書裏講的是真好,想深刻了解一下的,這本書是一個不錯的選擇.

下面我就簡單的說一下個人理解,用兩句話記住了javascrpt中this的指向:

this的指向

1, 普通函數指向函數的調用者:有個簡便的方法就是看函數前面有沒有點,若是有點,那麼就指向點前面的那個值;

2, 箭頭函數指向函數所在的所用域: 注意理解做用域,只有函數的{}構成做用域,對象的{}以及 if(){}都不構成做用域;

const obj = {
    name: 'objName',
    say() {
        console.log(this.name);
    },
    read: () => {
        console.log(this.name);
    }
}
obj.say(); // objName
obj.read(); // undefined


複製代碼

• 普通函數,調用者是obj,因此結果是 objname;也是理解say()是普通函數,前面有點,因此this指向obj;
• 箭頭函數,this指向函數所在的做用域,當前的做用域爲全局環境,因此this.name爲undefined,
• 舉下面的例子更清楚的瞭解一下箭頭函數this的指向,箭頭函數所在的做用域是普通函數say,say()的調用者是obj

const obj = {
    say: function () {
        setTimeout(() => {
            console.log(this)
        });
    }
}
obj.say(); // obj,此時this指的是定義他的obj
複製代碼

補充知識點

• 瀏覽器默認的this爲window

function test() {
    console.log(this);
}
test(); //window
複製代碼

• node.js中全局環境默認this爲{},普通函數中默認this爲global

console.log(this); // {}
function test() {
   console.log(this);
}
test(); //global
複製代碼

來兩道題檢查你是否掌握了

example1

var length = 10;
function fn() {
 console.log(this.length);
}

const  obj = {
    length: 5,
    method: function(fn) {
        fn();
        arguments[0]();
    }
};

obj.method(fn, 1);

複製代碼

輸出 10, 2

剛開始看到這道題我也是濛濛的,如今也終於理解了, method這個函數傳入了兩個參數,一個參數爲fn(),fn()爲普通函數,this指向函數的調用者,此時指向全局(也能夠看這個函數前面沒有點),因此運行結果爲10,arguments是函數的全部參數,是一個類數組的對象,arguments[0] (),能夠當作是arguments.0(),調用這個函數的是arguments,此時this就是指arguments,this.length就是angument.length,就是傳入的參數的總個數2

注:

• 上面例子在node環境中的運行結果爲 undefined 2, var length = 10改爲global.length = 10;是由於node環境下定義在全局的變量不會綁定到global,瀏覽器也會自動綁定到全局環境window
• 以前寫的有點小問題,感謝你們的指出:用const來定義length,而後打印0和2; var在全局定義的變量會自動定義到window,可是const和let在全局定義的變量不會自動定義到window,改爲const打印window.length爲0,是由於window.length表示當前頁面有幾個iframe,能夠看一下MDN上關於window.length的定義

改爲下面這樣結果又是什麼呢?

var length = 10;

function fn() {
    console.log(this.length);
}

const obj = {
    length: 5,
    method: function(fn) {
        fn();
        const fun = arguments[0];
        fun()；
    }
};

obj.method(fn, 1);
複製代碼

10, 10

example 2

window.val = 1;
var obj = {
    val: 2,
    dbl: function() {
        this.val *= 2;
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8
複製代碼

這個就是有點繞了,不過一步步來分析就很容易理解了:

obj.dbl();執行這行代碼時，this指的是obj，因此this.val === obj.val*=2,最後結果爲4,val*=2 === window.val *= 2，最後結果是2

func()，執行這行代碼時，func()沒有任何前綴，this指的是window.func();因此此時this值得是window，this.val === window.val *= 2,此時window.val 爲4，val*=2 === window.val *2,最後結果爲8，最後console.log(this.val),與console.log(val),指的都是window.val，最後結果都是8 上述是我本身的理解,若是有什麼問題,歡迎指正~

參考

JavaScript 的 this 原理

About

• github
• blog