神出鬼沒的this

神出鬼沒的this

上一篇挖了個坑，今天給補上

你是否是也曾像我同樣：

編寫了個函數明明能夠正常工做，可是一作爲事件回調函數就報undefind了

在編寫React組件時，看到在構造函數中還得對每一個方法bind一下 ：

this.funOne = this.funOne.bind(this);
this.funTwo = this.funTow.bind(this);

多麼奇怪的寫法，爲啥子還要再bind下呢? 不如刪了，而後就各類undefined了

要理解爲何會undefined還得從this提及:

var name = 'tianlang';
function getName() {
    console.log(this.name);
}
getName();

這段代碼會輸出:

tianlang

咱們只需加一行看是不相關的代碼，就能讓它報undefined:

var name = 'tianlang';
function getName() {
    'use strict'
    console.log(this.name);
}
getName();

VM412:4 Uncaught TypeError: Cannot read property 'name' of undefined
at getName (<anonymous>:4:22)
at <anonymous>:6:1
getName @ VM412:4
(anonymous) @ VM412:6

只因在人羣中多看了你一眼，就在代碼中多寫了行use strict整個程序都崩潰了。

JavaScript執行引擎看到咱們寫了use strict就啓用了嚴格模式，嚴格模式下函數getName中的this指向undefind

，在非嚴格模式下getName中的this指向全局變量（在瀏覽器運行環境中就是window, 在node運行環境中就是global）。

就這麼簡單? 這也不神出鬼沒啊。 鬼那能容易看到，若是那麼容易看到也就不叫鬼了,接着往下面看：

var name = 'tianlang'
var person = {
    name: 'tianlangstudio'
}
function getName() {
    console.log(this.name);
}
person.getName = getName;
person.getName();
getName();

你能夠猜下，在看執行結果：

tianlangstudio

tianlang

一樣是調用getName爲何獲取的name不同呢?

這是由於函數中的this是執行函數調用者的。當咱們使用person.getName的方式執行時getName中的this就指向了person.

只有在直接執行函數又沒有手動綁定操做（後面會介紹）又在非嚴格模式下this才指向全局變量.

也就是函數內的this具體執行誰跟調用的方式有關。不信你能夠再添加兩行代碼試下:

var personGetName = person.getName;
personGetName();

執行結果是：

tianlang

這就是爲何定義的函數明明能夠正常執行，可是一作爲事件回調函數就報undefind了。

就像這樣：

someHtmlDomNode.addEventListener('click', person.getName);

你能夠認爲person.getName被賦值給了一個變量personGetName 再事件觸發時實際是執行的personGetName(). 再也不是person.getName這種樣式的了，它變了。

那怎麼讓它仍是以person.getName的方式被調用呢?能夠再外面包個函數，或者使用手動綁定操做:

someHtmlDomNode.addEventListener('click', funciton() {
                                 person.getName()
});

someHtmlDomNode.addEventListener('click', person.getName.bind(person));

這就是爲何定義React組件時爲何還須要對每一個方法再bind次了。bind操做就是手動爲函數指定this

。除了bind還有call和apply也能夠爲函數指定執行時的this值。不一樣的是bind的返回值是一個新的函數，你能夠在你樂意的時候再執行這個函數而call和apply是綁定和執行一塊兒執行的，因此它們接受不僅一個參數。除了跟bind同樣須要一個參數做爲this還須要函數運行所須要的參數，這也是apply和call不同的地方，一個接受數組做爲執行函數的參數，一個是使用任意個參數的形式。

fun.apply(thisObj, ['arg1', 'arg2'])

fun.call(thisObj, 'arg1', 'arg2', 'arg3')

在React組件中寫那麼多看是無用的bind真的有點辣眼睛，有沒有更好的方式解決呢？

能夠實用箭頭函數註冊事件監聽或定義方法，就像這個樣子：

someHtmlDomNode.addEventListener('click', () => {
                                 this.getName()
});

class SomeClass {
    constructor(name) {
        this.name = name;
    }
    getName = () => this.name;
}
var obj1 = new SomeClass("tianlang");
obj1.getName();// tianlang
var objGetName = obj1.getName;
objGetName();//tianlang

簡單說這是由於：

The best thing is that arrow functions couldn't care less about this! Practically, it means they are totally ignoring it (and maybe hoping this will go away), so the context of this right outside the arrow function stays the same inside it

哇! 該煮飯了，拜拜!