麒麟子Cocos Creator實用技巧十：function this self ()=>{}詳解

先說一聲對不起，這篇文章本應該是昨天寫的。（強行假裝有很多人在等着看）

昨天聚衆飲酒去了，喝醉了，可能喝了有兩百多瓶吧。

有人就說啦，唉麒麟子，你怎麼老愛吹牛*，動不動就兩百多瓶，你真當自己是牛麼。

大家不要急嘛，之所以說兩百多瓶，就是想證明我昨晚確實喝醉了，醉得來都記不起喝了多少了。

還有什麼能比這個不靠譜的數字更能說明問題的麼？

---

一、function與this

const {ccclass, property} = cc._decorator;

@ccclass
export default class NewClass extends cc.Component {

    // LIFE-CYCLE CALLBACKS:

    private _dontBBAnyMore:string = '不要再說了';

    start () {
        //方式一
        setTimeout(function(){
            console.log(this);
            this.dontBBAnyMore();
        }.bind(this),100);

        //方式二
        var self = this;
        setTimeout(function(){
            console.log(this);
            self.dontBBAnyMore();
        },100);

        //方式三
        setTimeout(this.dontBBAnyMore.bind(this),100);

        //方式四
        setTimeout( () => {
            console.log(this);
            this.dontBBAnyMore();
        },100);
    }

    dontBBAnyMore(){
        console.log(this);
        console.log(this._dontBBAnyMore);
    }
}

學過C++，JAVA, C#的人都知道，成員函數默認是有一個this驅動的。上面的代碼中，我們演示了一個setTimeout回調，方式一和方式二中console.log(this);的打印值我們可以看到，this並不是我們的NewClass。而是Window(部分瀏覽器會是undefined），這是爲什麼呢。這要從函數說起。

我們可以簡單認爲，setTimeout在計時器觸發的時候，會這樣來使用我們傳入的函數  callback();

這樣的調用方式，會使用當前的this作爲傳參。

爲了更深刻的理解這個問題，我們可以簡單地向下面這樣來理解。

1、騷氣的Function是一個對象，對象有一個 _thisArg 屬性

2、如果我們直接調用callback()這樣的函數，它會使用他的 _thisArg 來替換我們代碼中的 this ,如果 _thisArg 屬性爲空，在某些平臺上，會以Window形式出現。在另一些平臺上，直接就是undefined. 

3、如果我們調用了callback.bind(this) 並把callback傳遞給其他調用者，那麼相當於callback的 _thisArg 被提前賦值了，那麼你調用callback();也會使用 _thisArg 來替換代碼中的 this

回過頭去看，你會發現，世界如此奇妙。

---

二、 () => {} 是什麼

簡單的理解就是 () => {} 這樣的函數，他會幫你bind(this)
 
[隨便找了一篇文章，大家可以看看]

---

三、爲什麼要self

說到這個時候，肯定就有人會說啦。既然bind這麼屌，爲什麼還要self呢。

答案其實你們應該能猜到。 無非就兩種。

1、這樣寫 TS上有自動提示

2、可讀性好很多

3、我願意

4、我看好多人也這樣寫的

這一段好像沒什麼好說的，說多了就跑題了。大家選一個能夠說服自己的理由就行。

---

四、寫在最後

今天雖然標題起得很屌，XXXX詳解。

但實際上，這是一個老生常談的基礎問題。

小學三年級就應該會的。

然而這是社區出現最多的問題。

不寫這個知識點吧，老有人問。

要真寫了這個知識點吧，肯定又有人說，麒麟子就整這些沒用的，忽悠小朋友。

反正嘴在你們身上，說什麼都可以。你們爽就行。

散會，開飯！！！！