00:00
好的,各位继续,目前写到这儿了,你的标题呢,已经有了点击事件,走走走。那现在你需要做一件事呢,你就成功了,就是在这个标题被点击的那个回调当中了,你去更改a hot的值,把它的值取个反是不是就可以了,说老师呢,挺简单的,那来我就写一写吧,这儿呢,我不说这句话,我说这句话叫做此处修改A字hot的值。说老师,哎呀,真墨迹,直接在这改不就得了吗?我拿到is hot,然后我一改,哎,同学,就刚才的这句话,你拿到is hot。你拿一下我看看。对,就在这儿,你拿一下我看看。这行代码先注掉,你拿一个a hot在这输出,我看看说老师那不挺简单的吗?之前怎么拿就怎么拿呗,之前我不是这么拿的吗?Z star state解构赋值,我拿到a hot这不就用了吗?哎呀,我的天,老师太简单了,我也这么做,复制拿过来,然后conslo输出这个a hot值,那还能难倒我啊,那你试试吧。
01:07
来到这儿。点啊,走报错同学,他说的是什么?你仔细读,不能够去读取一个属性state在谁身上啊,And find。那所以说你啊,一定要看好这句话,不能够读取state在anddean的身上,你比如说举个例子,同学a.B如果出问题了,如果A是unde find,那么他报的错误就是不能够在andde find上读取谁B,那所以说是点B点的那个左侧出问题了,所以说是点死state点的左侧出问题了,那是谁呀?同学,谁点的state this说老师,This,哎呀,那怎么回事呢?同学啊,是不是忘了一个事情啊?这是你定义的类式组件对吗?你在渲染组件对吗?这什么呀?这是不是您自定义的一个函数啊。
02:05
Bible在翻译你这段代码的时候,同学我想问一下,是不是禁止自定义的函数this指向window,所以说this其实是谁呀?And find说,老师,那都怪Bible,你也别怪他。如果Bible不开启严格模式,同学我就问你DEMO里的this是谁呀?哥们儿,那是window。对吗?你比如说来写一段代码啊,来点al。走,你看效果啊,我写一函数,函数的名字叫做DEMO,走lo,输出这里的this。DEMO调用,同学,你说this是谁?走。如果你开启了严格模式,那你试试吧,走use,那这时候你看吧,那就是安范的。哎,所以说同学你也别把那些过错呢都归给Bible,哎,说你怎么怎么地,人家不帮你开启严格模式,你这个this的指向那不也是window吗?哎,咋的window身上有state没有啊,同学,哎说老师,那刚才我在这怎么能写,那是因为render里的this是组建实例对象,OK。
03:21
哎,所以说同学有没有一种感觉,就在这个地方,光标闪烁的位置,你根本碰不到它的实力对象。老师,我怎么碰不见了呢?因为这个whether类的实例对象压根都不是你拗出来的,你怎么碰?你只是写了组件标签,哥们儿,React帮你拗的那个实例在react手上呢?完了写不下去了怎么办?接下来我不想直接写出那个最标准的形式,我想引导大家一波,同学,是不是在构造器里边,我可以触碰到组建实例对象,所以我才能初始化状态,是不是在render里边,我的this也是组件实例对象,那所以说我才能从这身上是不是读出来东西,那么到这不就是因为你丢失了那个this吗?那你说我能不能这么做呢?同学,一个最笨的办法在外侧,我定义一个变量叫做that。
04:21
我在构造器里边进行这么一个动作,That等于this,啥意思?同学,这是不是叫做缓存this,你不是丢吗?行啊,我在外边给你定义一个,然后赋值把它交出去,那你觉不觉得在这儿我canolo就可以输出这个that,那你说这个that是谁?那肯定是构造器里的this,那构造器里的this又是谁呢?组建实例对象,所以说同学,that.state.a hot能不能取到值?必须能来,我们试试回到代码当中。打开这个页面。右键控制台上键啊,来点击行不。
05:01
你看正是因为它是falses,他才凉爽吗?啊,你说好嘞,老师,那接下来的事情就交给我吧,我把它取反,我再付回去,哎,等同学,你这段代码呢,有点问题,首先第一个你这名就不标准,那DEMO那是个什么呢?来,起个好听的名字,我再更改天气相关的信息,那就是change whether,把它拿过来放在这儿,这是一个小事儿啊,瞬间咱们就做完了,同学,你觉得这样写合理吗?你观察一下你的代码结构啊,整个红色框里的呢,是你在定义组件对吧,那整个蓝色框里的呢,是你渲染组件到页面对吧?那你瞪大你的眼睛看粉色的盒子啊,我给你加粗一下。这儿。还有这儿。觉不觉得写的有点繁琐?同学,你就想真正开发可能这么写吗?在构造器里边把this出去,完了这边再拿,哎呦喂,同学,觉不觉得有点太烦了呀?而且最主要的是啊,我们的目标是你用类定义的组件,那最完美的就是你把类意折叠,所有组件里的东西就都带过去了。
06:10
也就是说我最终的目标是红色的盒子,就是在创建组件,什么事件监听啊等等一些乱七八糟的东西都在这里边儿呢,然后这个蓝色的就是渲染组件周围,剩下的别再给我乱七八糟定义很多东西了,那所以说接下来怎么办呢?我要想办法把这个change whether呢挪到类里边去。哎,好了,那来我们试试吧,说老师那还不简单,别急啊,构造器呢,我给你折叠render的,我给你折叠,那你说同学除了有构造器,除了有render,是不是把咱们的这个A函数是不是给它放在里边呢?来走着同学他咋报错了呢?哎,同学注意啊,你感觉呀,这是类的花括号,这是类的花括号,结尾说老师那里边就能随便写东西呗,不是你真拿类当函数体了呀,函数题里边可以写任意的代码,但是类不行,谁家类定义方法这么写呀,对吧?同学那怎么写?哎,方式删掉对吗?好的,同学写到这儿啊,你一定要仔细听我说了。
07:15
我问你两个问题,Change weather是放在哪儿的?嘿,告诉我change weather放在了weather的啊,这么写啊,放在哪里,咱之前不是诶有一个问号,哎,完这么写的吗?好放在哪了呀,Whether的原形上对吧。哎,那同学你看我给你复习类相关知识的时候啊,咱说speak方法放在哪里了呀?啊,类的原型对象上,那咱都给它补齐了供谁用啊?哎,实例使用好啦,走,那再把这句话拿回来,通过person的实例对象调用speak,那speak中的this就是谁呀?哎,Person实例咱给它拿回来,那我给它放在这儿走同学呢,这是通过whether的实例调用change weather时,那么change weather中的this就是谁呢?Weather?
08:14
哦,那这会儿你不可否认的是吧,哎,同学,那我问一下,你说咱都聊到这儿了,你觉得还需要这个that吗?不需要了,那这里边还需要再交出去吗?不需要了,构造器折叠,那你说这里边还能that.state.is hot吗?那肯定也不用了,同学,那你觉不觉得我用一个人就行了,谁呢?不就是想拿到他的实力对象吗?那你瞧这句话咱说的,哎,你只要通过whether的实力对象调用了change whether,那change whether中的this就是谁呀?Whether的实例对象,哎,那所以说写谁呢?This好。先这么写着啊。来同学保存。现在你回到代码当中啊,它就会报一个错误。
09:00
慢慢来啊,一定要仔细去看他说什么不对了,他说change weather is not DeFined,哎,这什么情况呀?说老师这怎么个意思,他为啥说没有定义呢,你捋顺一下啊同学。你在这是不是写了uncleli呀,啊对呀,啥意思呀啊,点的时候帮我调这函数,那这函数呢,老师这不在这儿的吗?哎哟喂,兄弟我问一下。你这直接这么写change weather就能找到他吗?根本不能。来回到复习这个里边。人是不是有说话和学习的方法?同学有个需求,我想让人在说话的同时再学习一下,你还真这么写呀,Study啊,就这么写,那你看看吧,我给你创建一个人的实力啊,一个学生的实力啊,学生的student,那给他一个名字,Tom,年龄18岁,年级呢,高一,好。
10:03
人呢,让他去说话,Speak来说话,走,老师,那我看看这段代码,那你看吧,右键打开。来到这儿,那绝对报错,Study is not DeFined不对,为什么?同学,谁能调到study呀?啊,谁能调到study说的多明白,给实例用的,你这不属于直接调用吗?啊,也是哈,老师,那所以说得通过实例,Speak中的this刚好就是他的实例对象,所以说您得这么写啊,this.study这不就结了吗?那同理,同学,Speak study你得写this study才能找得到,那你说你这给人家指定回调的时候能这么写吗?不能前面加个东西就好了,谁this点。对吧,OK,回到咱们的效果当中,哎,没问题吧,好说老师,那我就成了呗,那你看这不就可以了吗?然后诶,我一点啊,你看这我写的是this.change whether,然后呢,诶就找到这儿了,然后我就调用它了,然后this就是实例对象,然后点state,哎,这都是你的想象,你点一下呢。
11:15
你就知道了,不行,同学啊,这有意思了。他说什么呢?不能够读取state在安的身上。那就是点state点的左侧又出问题了,谁呢?This说老师看他这个报错呀,好像是说呢。This又是and find了,老师,这什么情况呀?来,我们先看看这个this到底是什么保存点,嘿,还真是unde find同学,这儿就是一个难点了,为什么change whether里边的this就是unde?同学,你想想这事儿好像挺不讲理的对吧?构造器中的this是谁?Whether的实例对象啊,也就是组建实例对象re的this意思是谁?组建实例对象?凭什么他就瞧不起我的change whether呢?
12:09
对吗?Change weather里的this凭什么就是unde呢?同学,你注意我说的这句话。你只有通过whetherr实例对象去调用change whetherr的时候,Change whether中的this才是whether的实例对象。说,老师呢,Render同学,你记不记得当时我在给你分析这个东西的时候,来,我们打开组件,定义类似组件,你仔细观察我说的这句话叫做随后拗出来该对象的实例,并通过该实例调用到原型上的render方法。同学,我问你,我怎么调render的呀?通过谁呀实例?所以说render里的this指向没问题构造器中的this。那无论是什么类,你继不继承构造器中的this一定是当前类的实例对象,这是一个固定的东西,那所以说同学说老师听你这意思,好像在引导我这个change whether不是通过whether实例调用的,所以说才导致它是安范的,对,就这回事。
13:15
说老师那我不服。凭什么change whether就不是实例调用的呀?好,把这个问题呢放在这儿,我不想在这儿进行什么过多的探讨,我单独给你写一个不跟react有任何交集的一段代码,然后咱们去分析为什么这个里的this会丢失。好。关掉啊,关掉,带着这个疑问我们开始复习第三个东西,就是类中方法this的指向,类中的方法this指向啊,点atl是吧,好。
14:00
写一段简单的代码。用你最熟悉的例子,我定一个人的类构造器好,为啥一上来写构造器呢?我要接东西吗?名字哈,嗯,年龄哈,好。好人呢,还能说话,说话,那说什么呢?非常简单,直接说出this啊,我不说那么多了,什么this name this age,不说了,就直接说this,好让人说话。呃,P1吧,给个名字Tom,给年龄18岁来人说话P一点,Speak,走,同学,你告诉我那个this应该长什么样子?是吧,你自己心里想,我打开看,跟你想的一不一样啊,刷新。刷新走。
15:01
输出的是不是一个实例对象?谁缔造的实例啊,他一句话输出的就是person类的实例对象,OK,好啊,这是这么调这个speak同学,这是怎么调,通过实例调用speak方法对吗?好的。同学,我给你来一个是吧?灵魂两连的第一个问题,Speak是放在哪儿的?其实之前咱都说过了,同学请允许我直接粘过来吧,好吗?来,把这个复制走。带过来,把所有的study全都改成speak,我做一个查找替换啊,Study全都换成speak来走,全都替换,哎,全都替换。啊,Speak成study啊,Speak剃成呢study,哎呦呵,Study走,全都替换。好,那这不是student,这是person。
16:01
这呢,也是person。好,你这是不是通过person的实例对象调到了study,所以说怎么着,嗯,他这没有什么别的问题,那当然我这么一写呢,同学就把那个speak也改成study了啊,那咱就这么写着吧,来啊。同学,接下来看我做一个动作啊。我做一个动作,Cost X等于p1.studyx调用。老师,这有什么疑问呢?这没什么疑问吧?P一点,Study把这函数给X了,X又调用了,那里边的this不还得是实例对象吗?那你看吧。安饭。你把这个问题搞明白了,刚才那个问题你就也搞明白了。来说说啊,怎么回事儿呢?理性的分析问题,Study放在哪儿了?原型对象上,那给谁用的?给实例用?你一定要注意实力自身就这个P啊P1它自身有study吗?没有,但是你调的时候它也不报错,咱说顺着圆形链是不是就找过去了,那我问一下你这句话在干呢,这是个赋值语句对吗?同学一定要注意第23行代码,我根本没有调用study这个方法我根本没有调用,说老师那你在干嘛。
17:19
你看啊,P1是实例对吗?我把P1身上的study属性交给X说老师,但是P1身上没有啊,没关系,顺着原型链找,找见了,而且study还是一个特殊的属性,它是一个能调用的函数,对吧?所以说我们管study又叫什么呢?是不是叫做方法?对吧?哎,方法不是一个特殊的属性吗?对吧?哎,走你交给谁了?X同学,你这属于什么调用啊,你这属于实力点调用,你这属于什么调用啊。这属于直接调用对吗?所以说画一个内存分析结构图,就是这是占内存,这是堆内存。你那个study函数其实就在这儿呢,我就用,哎这么去写,函数就在这儿呢,只不过这个函数原来啊,人家有一个方法能找到它,只有个办法能找到它,就是PE点。
18:13
Study后来由于你做了这个动作,那么这个函数就又多了一个引用,谁呢?就是X,那所以说你直接这么调用,就是属于函数的直接调用,对吗?同学,那直接调用,那你说它也不应该是and find吧,咱这么聊对不对?如果要是直接调用的话,同学你觉不觉得应该是那个全局的window啊?哎,那为什么它又变成了and found呢?啊,那我说一下同学。类中所有你定义的方法。它在局部都开启了严格模式类帮你自动开的,跟Bible没关系,你把这段代码你看懂了,我根本没有引入react和Bible。一句话类中你所定义的方法已经在局部开好了严格模式,所以说就导致它不敢指向window,所以说它就变成了and find。
19:07
说老师局部还能开严格模式呢,那我们来看一下吧,把这段代码住掉,我写一个非常简单的代码,Function,名字叫做DEMO,我在这里边不干别的事儿,同学就输出this,我问你这属于什么调用?是不是DEMO的直接调用OK,那直接调用里的意思就是。Window,如果你在这个里边开启了一个局部的严格模式,记住严格模式是可以在局部开的,你加在了函数题里边,那只有函数题里边才开启严格模式,别的地方不是,那你看一下是吧,安范的,那如果说你还有一个函数同学,比如说叫做DEMO2,你没有开启严格模式,那等你去调这个DEMO2的时候,那你自己注意观察它里的意思,A没有定义,那我们检查一下啊,DEMO2少了个东西啊DEMO啊哦,好了,那这回你看它的意思就没问题呗。
20:01
所以说你得把这个问题给它搞懂了,OK,好,那我们回头再看看刚才的那个啊,这个注释给它解开,看看刚才的那个,来到这个里边打开,那同学分析吧。你这是不是写了这么一句话呀?同学,我就问你一个问题,你这个红色框里的代码写完了,你到底掉没掉change weather一句话,根本没掉,你根本没有调change weather,你只是通过类的实例对象沿着圆形链查找,找到了这个change weather,然后就把这个函数直接交给on click作为回调了,等你去点击了这个H1的时候,同学,人家是直接从堆里边把那个函数拉出来直接执行,那我想问你还算是通过实例调用吗?嗯,还是通过实例调用的吗?根本不是。根本不是。说老师那我想试试,如果通过实力点change whether能不能行呢?那满足你这个好奇心,我们试一下同学这终归是个类,对吗?但是我们都知道这个类不用我们去new react,帮我new react拿到实例react,用这个实例点render,那接下来呢,那我就插手一下cost w等于你有一个谁呢?Whether同学啊,我这段代码是不标准的,你这个东西就不应该自己去knew,但是我为了满足一下咱同学的好奇心,说老师实力点,趁着whether,我就看他那个this是谁?那行,咱试试来,同学W点谁呢?Change weather走看吧。
21:34
打开控制台上见同学啥呀什么啊,是不是歪的实例对象,哎,明白这儿了吧,哎,那所以说同学这个问题呢,咱们就解释清了,那这儿呢,我就不这么写了,字怎么写呀。你第一句话可以写,说放在哪了?放在这儿了,那这会儿得怎么写呢?哎,写好了,由于change weather。是作为on click的回调,所以不是实例调用的,或者说不是通过实例调用的是什么呢?直接调用哎。
22:20
那直接调用应该是window啊,那咱说了,而且还由于类里边已经帮你开启严格模式了,同学你想两个地方都在卡着它,你在类里边定义一个方法本身是不是开启严格模式了,而且你Bible是不是还在这看着呢,这两个人一夹击,你这个this肯定丢啊,是直接调用,然后再补一句啊,然后再来一个啊,叫做类中的方法默认开启了局部的严格模式啊,所以咋的change weather中的this有问题,Change weather中的this v andde find,哎,你这个问题必须要聊清楚,要不同学在这就是你第一个不太理解的地方是吧?你学习东西都是同学,如果一点不理解,两点不理解,你再学着对这个知识就已经产生反感了。OK,好,那我把这段代码呢先删下去,这是为了满足一下大家的这个好奇心,OK,宋老师啊,那你就。
23:20
说完这问题了,对说老师说完了,说完了你这怎么解决呀,这个问题是老师你说完了怎么解决它呀,你不解决我写不下去了呀,是吧?啊稍后解决这个问题,现在只是说一下有这个问题的存在好吗?哎,我们的小结呢,停一下。
我来说两句