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

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

小学三年级就应该会的。

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

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

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

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

散会,开饭!!!!

发布了230 篇原创文章 · 获赞 542 · 访问量 118万+

猜你喜欢

转载自blog.csdn.net/qq_36720848/article/details/90243431
今日推荐