00:00
接着来完成我们的代码,现在我们的点击事件,哎,已经有了,我们在点击这个呃,标题的时候会触发这个事件,那接下来的事情,哎,大家想可能就比较简单了,是吧,我在这里面去获取,哎,This there啊,This。这个ex这个值是吧,获取。啊is hot,哎,这个值对它进行修改就可以了,是不是好,那我们来看用电,那怎么拿到这个值。怎么哪个位置。啊,那你直接输出嘛,我们来试一下啊。来看一下。刷新。我来点击。是不是报错了,哎,他说你不能就说找不到这个C的属性啊,在这个范上,那说明什么,说明这个this.c是不是安方。啊,就说。就是说在这个。他现在找不着谁,找不着这个state的,是不是也就说在安饭上面找不到这个state,那说明什么?说明这个this是安。
01:05
对不对,哎,也就是我们这个THIS2方,那我们单独来打印这个类,我们来看一下啊。好,我们把这个类放到上面去打印啊。要不然这边也报错。就出问题了。是不是让你翻的。之前是不是说过啊,我们这面写的是GS的语法,哎,这里啊,经过这个贝本的一个翻译贝,它在翻译的时候会开启严格模式,严格模式禁止函数的类子指向window对象,是不是啊,所以这个类似的按点的好,那你假如我们不使用这个背包,我们不开启严格模式,那this它的指向谁指向是window window里面有这个属性吗?也没有,所以这种方法获取肯定是有问题的。对吧,那我们这个随是谁在哪里面是这个whether天气组件实例,它的一个属性好,那你可能哎想着啊投机取巧了,那我这里哎,我定义一个啊let定一个that,哎。
02:05
好,然后我在这个构造函数里面,哎,我让这个全局的哎,这个全局变量that,哎等于谁呢?等于this,也就是说我把这个组件实例的哎,这个this我给抛出去,给到外部的这个that变量,那我就在外面可以使用这个that。是这样的吧,啊来我们来看一下啊,这个能不能拿到,当然能拿到啊。看一下啊,来点击一下,是不是拿到这个出了,哎,我们的这个一套的值。啊。好,那这肯定能拿到,因为是我们这里是相当于一个变量,我们把这个this,也就这个组件实例的对象这个this给到了这个变量这里,我们再用这个that这个变量,对吧,那这个that也就相当于这个啊,组建实例对象的这个类是不是可以拿到啊,但是啊,我们。就是在开发中没有这么写的代码,没有这么写的,我们既然是一个组件,作为一个独立的一个填写的一个组件,我们尽可能的想要把这个函数,哎,还有把所有组件相关的内容都放到这个组件里面,这样我们拆分,把组件拆分出的时候就可以整个打包带走,你哪能这样,你这写一个啊,这写一个。
03:08
这显得多乱。啊,所以哎,这种方法我们肯定是啊,不推荐的,那怎么办?我们既然想要就是说让所有的东西哎都归到这个组件里面,让组件能打包带走,那么我们就要把这个函数写到这个组件里面,是这样的吧,好,那我们先把这个无关紧要的都删一下,把这个that也删掉,接着我们把这个函数给挪到这个组件里面啊。来可以放到这里面啊。来啊,那在这个类里面啊,Class里面我们定义函数不是这么去定义的啊,所以我们把这个哎方形删掉,哎这样的话DEMO呢,它就会哎作为类的啊原型上的一个方法。接着继续修改我们的代码啊,我们先把这个that都给干掉啊,因为已经没有that这个变量了,外边我们都删了是吧,这个也删掉不要了啊好,那接下来把这个名字也换一换,哪有叫DEMO的,哎,我们是做什么样的一个功能,哎,我们就把它取成什么样的名字,哎,它就是改变天气的,哎,我们把它改成这个天井啊,沁白点。
04:16
那接下来我们,哎在这里。测试一下啊。啊,这里直接给我们报错了啊,Change whether这个啊,Is not depend啊,找不到。啊,也就是说你这样去调这个函数,你肯定调不到对吧,之前我们因为是外部定义的有函数我们可以调到,那我们把这个呃函数放到这个方法里面啊,放到这个类里面之后,你这样肯定找不着的是不是啊,它它是在哪呢?它是不是在这个类的原型上面对吧?那我们这里可以干什么,是不是可以通过这个啊,这个类的这个。呃,实例啊,这个类似的实例,哎,去调用这个方法,哎,这样就可以了,是吧?啊它的颜色也变回来了,好,那接下来我们再来看一下啊。刷新一下。
05:00
哎,这样就没有问题了,接下来我们来点击,好,呃,这个conso log输出了,哎,但是又报错了,他说哎,不能在这个安去访问这个属性,那说明什么?哎,说明这个this又是安迪范的。是吧,好。那我们来回想一个问题啊,把这个就删掉了啊。就是我们之前在复习这个类的知识的时候,就是这几个问题,那首先来看这个第一个问题,哎。就是。我们的这个氢气V这个方法方法啊在哪。在哪,它是不是,呃,在这个类的原型上是吧,供这个氢节外的这个实例调用。是道吗?它是在这个类的原型上面的,好,那接着我们再来看一个我们类的这个基本的知识,哎,通过这个实例调用时,它的这个Z就是这个这个对应的一个实例,我们把这个名字改一改,啊,也就是我们通过这个。
06:07
亲姐。啊,通过whether啊,它啊这个换句话是vily。哎,就是说我们清理Y方法是在类的这个圆形卷上供这个实例调用啊,Whether我们的这个组件的这个类的实例调用啊,也就是说,哎,通过whether实类去调用我们的这个氢记whether方法时,好,那我们清记whether这个方法中的类似就是谁,就是whether的这个实例。是不是啊,但是哎,我们来想一个问题啊,那我们这个方法。是这个实例调用的吗?我们有用吗?哎,有用这个外实例有有调用这个实例调用的方法吗?没有吧。是不是没有用这个实例去调用这个方法。谁调用呢?是不是我们在这个render里面通过这个this,哎,通过这里去调用呢。知道吗?好。
07:00
那你这样去调用的话。相当于什么,是不是相当于类的这个内部在调用这个方法啊,我们不是通过说,哎,我们用了一个这个whether的一个实例,哎拗一个whether的实例。啊啊,然后用这个,哎,随便写啊A啊等于。用这个实例去调用的,这个清节不是这样去调用的吧,啊哎,那我们这个组件它是谁,它是这个react,它去帮我们实例化的对象,哎,去自动调用的方法,而我们这个清洁外的方法是谁是类的这个内部在调用的啊所以说。啊,这个this。就丢失了。对吧,为什么会丢失呢?之前我们在复习类的知识的时候,哎也说过啊,在这个类里面,这个方法默认会去开启这个局部的一个严格模式,是不是严格模式它就会,哎让你的一个this不能去指向这个,呃,Window的一个对象。
08:00
是这样的吧,好。嗯,这里再继续补一下我们的这个注释。类中的方法啊,默认开启,哎,局部的严格模式。啊,所以哎,当这个内部调用啊,注意啊,是内部啊类的内部调用这个方法不是实例啊,不是这个类的这个实例。内内部哎,调用这个清洁污染的方法的时候。啊,This,就是这个案例看的啊。好。这是关于this,那this都按翻了,那你肯定获取不到这个属性啊。如果还是不太好理解啊,这个类似的这个问题,我们来通过一个简单的例子来看一下啊,新建一个。
09:04
零三啊。类中的。This指向。来在这个里面我们新建一个。A面啊。写一个简单的类啊。不是。哎,学构造方法。啊,有内有A啊,我们就写这两个属性啊,z4.name等于name。v.a等于A,哎,接下来我们来实例化啊这个。
10:01
Person啊。Let p等于new person。来P点看一下这个person啊。在这里面运浏览器运行一下打开。可以看到,哎,我们这person输出了啊,但是没有传这两个参数,所以它是这个安范,我们把那个参数传一下啊,Com好18。这个类输出了是不是,那我们这个啊人他有这两个属性,接着我们给这个类加一个方法啊,就是一个说话的方法啊。好,那简单的说一点啊,我是这个,然后连上我们类似。点name,哎,简单写字摸,然后我们让这个人person啊,去调用这个方法啊,PP点啊speak,接着我们看一看控制台的一个输出。
11:08
诶可以看到,哎,有输出对吧,我们这个方法成功的这个。调用啊,那我们在这个里面去,呃,打印一下这个this啊。看一下啊,This是person,然后这里有这个输出对吧,好。那接下来我们做一下什么事情呢?啊,关于这个皮我们就哎稍微来提一下啊,就是还是之前我们复习这个类的时候,哎,这几个。哎,这两个特点我们就直接粘贴过来啊,就是说speak方法呢,是在这个类的原型对象上,哎,对吧,然后让实例调用,通过person实例用speak看到啊,通过这个person这个实例去调用这个speak,那speak中的this就是person实例,你看通过我们这个输出也证实了这一点,对不对,而且注意一下我们的皮可以看到,哎,我们去看一下它的这个原型是不是在这个它的这个类的原型上面,好。
12:03
那接下来我们来做一个怎么操作呢?呃,我们来定义一个XX等于谁X等于这个词,就是说person,哎,这个实例里面的这个speak,注意啊,我没有掉这个括号,就没有拿这个函数的返回值,我是直接把这个啊,Person实例里面的这个speak方法给到了X,接下来哎,我X加括号,我去执行这个方法啊,那我们来看一下啊,这个this它变成了什么?来刷新。可以看到啊。安迪范的是不是,哎前面这个是我们的啊,这个实例调用的啊,是我们的这个实例,哎,调用的这个斯皮,后面是我们通过这个方式去调用的这个speak,可以看到this是不是按find了,找不到这个name属性。通过这个例子大家明白了这句话对吧,你通过这个只有通过这个你这个类的这个实例,你去调用这个方法的时候,这个类才能指向这个P的这个实例,也是我们类的这个实例。
13:04
这个this啊,好,这个例子。给大家举个例子,说这个这个我们不是通过实例调用这个方法,是不是我们只是说把这个,呃,实例里面的这个方法给到了这个变量,哎,我们没有通过这个类的实例去调用的方法,直接通过这个变量调用的,对不对?诶这个方法是正常调用执行了,但是这个this是安find的,你这里拿这个安find里面属性拿不到,你把这个理解了,你再回过头来去看我们刚才的内容。就可以了啊,我把这个注释给你写啊,把这个。啊,实例中的方法。啊,赋值给一个变量。哎,这里就是通过这个变量去调用这个方法啊。调用方法啊,This就是这个案例范的。啊。我们可能就要问了啊,我即使是我直接去调用一个。
14:01
啊,这个方法,那this也不应该是安判断,它应该指向顶层的温度对象。是不是这样的啊,那我们做对比来写的方法呢,比如说这个三个DEMO啊,我在这个DEMO中,我去输出这个类类啊log类,然后我在这里调用这个DEMO,我们来看一下这个this。啊,因为这里啊已经报错了,所以就没下面就没有执行,我们把它先注释掉啊。好,是不是指向了window对象?啊,那这里为什么this就是安迪凡特的呢?哎,我们也没有用be也没开启严格模式对吧?哎,如果我们开启了严格模式会给我们啊把这个函数里面这个类,哎就不让它指向这个氨三,不让它指向这个window度嘛,啊那这里。刚才也提到过一点,也就是说在这个类里面的方法,默认都会去开启这个严格模式,局部的严格模式,哎,所以你这里调用的话,类似就是案例班的。
15:01
清楚了吧,好,那么把这第三点也给大家补上啊,在类中。呃,方法会默认开启局部的严格模式,所以类是这个安迪范的啊,清楚了吧。我们来看一下啊,这个局部的严格模式是怎么回事,哎,我们继续修改我们的代码在这里啊,在这个DEMO,哎,这个方法里面,我们这个函数里面,我们去开启这个局部的严格模式,那来看一看,就是我们的这个函数里面啊,或者方法里面是可以去开启这个局部的格模式的,来我在这里柚子哎。哎啊,接着我们再来看看这个函数的这个this的一个指向啊。好来刷新,哎,之前它是指向的window对不对,那现在再来看是不是就指向按例翻的,哎,所以说这个严格模式是可以在局部进行开启的。这里我把这个删了啊,还是还原哎,主要让大家看这个直接调用这个方法,这个类似的一个指向的一个问题。
16:07
啊,你把这个搞明白了,哎,再去回过头来去理解刚才我们说的那些就明白了,来你作为一个对比,我们来看一下。哎,在这个里面好,这个里面这个清晰完整,不是我们这个实例调用的,对吧,不是这个呃,白的实例调用的,而是。呃,在run的方法里面,当我们点击这个事件的时候,它去触发的这个清理方法,相当于直接调用的这个方法,哎,所以哎,它就是案底判的,哎,因为它默认还开启了严格模式。所以说啊,只有这个,当这个change whether是通过这个whether的这个实例去调用的时候,我们这个this它才能指向这个whether的一个实例,那当然这个就不是了,这个是我们因为在点击这个一标签的时候触发的昂可雷克事件,它是作为昂可克事件的这个回调,哎,直接去啊在这个。啊,这个类里面去找到的这个函数,去执行的这个函数。
17:01
清楚吧,啊,那我们这里再来读一下啊。On click。就说点击事件啊。点击的时候,点击的时候这个轻体歪着。是作为昂可利克事件的一个回调。啊,执行的啊,是直接调用,哎清楚吗?哎,所以这个this,它是一个按犯的啊。大家一定要把这个this的这个指向的问题给搞明白了啊,要不然你很多问题就会理解不了,一定要去搞明白了,理解之后你再去看很多问题是非常简单的啊,那我们既然。嗯,提出了这个问题,就是说这个Z次指向的这个问题,现在是安你范的是不是,那我们如何去解决这个问题,先来看一下啊,现在你点进它还是安地翻的好,关于如何解决这个问题呢,我们在下一节进行讨论。
18:07
在最后啊,我们把代码给。诶调整一下啊,因为我们之前是直接写到了这个react的这个事件里面,我们复制一个到这里啊,把它改成这个。啊,组件中啊组件中方法中的例子指向。把这个名字也改了啊。那接下来在这个里面呢,我们把这个代码还给撤销还原到啊,最开始的时候我们写这个react绑定事件的,哎,那个代码。这里我已经把代码还原到最开始来讲这个事件的时候的代码,然后我们之前刚才写的这些,哎,放到了这个文件里面,那么在下一节课我们来继续讨论如何解决。这个方法中类似指向的这个问题。
我来说两句