麒麟子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详解。

但实际上，这是一个老生常谈的基础问题。

小学三年级就应该会的。

然而这是社区出现最多的问题。

不写这个知识点吧，老有人问。

要真写了这个知识点吧，肯定又有人说，麒麟子就整这些没用的，忽悠小朋友。

反正嘴在你们身上，说什么都可以。你们爽就行。

散会，开饭！！！！