00:00
这节课我们来学习数组的响应式处理。在我们之前写的这个小程序当中呢,它是不能处理数组的,比如我们给他添加一个呃,到G了,它是一个数组,那么现在这个数组的响应式呢,它是有问题的。我们让OB勾的g push。一个六六。好,我们来看一下。那这个时候呢,他是说你试图访问G属性,哎,这个G属性呢,现在确实是啊,能够被访问,但是呢,这个数组被改变成了什么,他其实你看这里头是不是没有去写呀。他并没有任何一个地方把六六给输出了。对吧,哎,因为你。现在这个数组的响应式呢,它现在是机制呢,是不健全的。所以这个时候view它是怎么做的呢?哎,View啊,他就列举了把七个方法进行了改写。
01:06
啊,这面试的时候呢,也经常会问,就是数组是如何形成响应式的,就是数组变了之后,我也得知道数组变了啊,那不是说我现在改变了G,因为我现在改变G的话,你别忘了这块是试图访问G属性,我调用push的时候他会访问,但是他并没有说我改写G属性,并且我改写成什么了,他是不是也没有报告,所以说现在这个数组呢,并不是一个响应式的。啊,它并不是一个响应式的。那所以说呢,View呢,它的底层呢,实际上它就改写了七个属性啊,这七个属性大家一定一定要能记住,第一个呢叫push啊,第二个呢,叫做pop shift UN shift,那现在这四个是不是就是数组的头尾操作呀。啊,这尾巴的操作,头部的操作,然后再加上Li啊,Li就是一个多功能啊,可以去在任意位置下插入或者删除啊,或者是还可以去在这个啊进行一个这个啊,就是添加添加的插入啊,然后也可以去啊删除貌像。
02:17
哎,然后还可以去这个替换对吧,诶space啊,多功能salt排序还有reverse。啊逆序,那么这七个方法实际上就是被改写了啊,这个一定要记住这七种方法。啊,被改写了,这个是很关键很关键的,这个是非常非常关键的啊,那咱们现在就来看一下这七个方法到底怎么样被改写啊,怎么样被改写,那所以说咱们现在呢,就可以去创建一个新的文件。哎,创建一个叫ara.js的一个文件啊,你看创建一个ara.js然后我们在这里呢,先把这七个单词给它罗列上来吧,哎,粘上来,然后给它放到字符串拼接摁摁的键啊哎到每列的对后加逗号啵,诶你看这样。
03:09
好,然后给它拼成数组的这样的形式。啊,把它放里头,那你说老师你要干嘛呢?我先要改写这七个方法。啊,那改写这七个方法呢,实际上呢,它就需要你对JS的一个原型的一个机制,要有一个特别认识的,一个特别清醒的一个认识,啊,就是这七个方法一般来说不是一般来说它定义在谁身上的呢?啊,我先把标题加上啊。叫改写七个方法啊,就是这七个方法,它是谁身上的?对,是read protype上的。啊,这个你是一定要知道的,就是所有数组能打点调用的方法啊,所有数组能打点调用的方法呢,实际上本质上讲都是来自于什么,对,都是来自于a pro的一个对象。
04:03
啊,所以咱们现在怎么样改写这七个方法呢?就是我们又要保持这七个方法的功能,又需要在。呃,就就就希望能把这七个方法呢,能够拓展,怎么拓展呢,就能触发响应式。对吧,能够触发响应式,对,那这个时候我我就需要干嘛,我就需要去备份啊,就说你要有一种性,就是感觉,就是我要备份原来的这个方法。对吧,我要备份一下。啊,然后在我的新方法,新的函数当中,我要调用原来的方法,然后再干一些新的事儿不就行了吗?对吧,因为这些方法,这七个方法实际上都是干嘛呀,这七个方法是不是实际上都是定义在他身上的。对吧,就这七个方法,咱们现在看一下啊,都是定义在他身上的。嗯,然后咱们现在看一下没问题,都是盯在他身上的,可以对吧,那我现在呢,我是不是把他们身上的方法我给我给重写一下。
05:05
能能理解吗?哎,所以现在的话,你看这个它的这个难度就是比较大了啊,比较大了,好,那咱们首先第一步呢,咱们先去提取啊,咱们先去得到。哎,得到a read prototype啊prototype,那咱们现在比如说咱们就可以count一个a prototype对吧?哎,就等于咱们的A的prototype。啊,这样子来得到它。好得到它之后呢,我先把它给注掉啊,然后咱们这个A瑞肯定给能够被测试啊,那A瑞要能够被测试的话,我们呃阿瑞一会是要被这个observer要去使用的,就observer类要使用。啊,所以我们在这里呢,就是可以呃调一下这个AR。因为老师写代码呢,都有一个特点,一边写一边测啊,所以咱们现在呢,就要一边写一边测它,然后alert这个123,咱们看看能不能弹出来,能弹出来就说明能能运行好,那咱们现在的输出他的身上啊的东西,你可以看见这个啊,对象就在这儿呢,你看这个对象身上是不是就会有这个啊,咱们这个方法,但是这里头呢,方法太多了。
06:19
我们V的底层只改写了七个方法。啊,那我们现在就需要对他们进行改写。那你说老师你快点写吧啊,咱别着急,就什么事呢,咱别着急,因为你这个事儿一着急的话就容易懵啊,那这个时候我们怎么办呢?这个时候有一个最重要最重要的操作啊,就是我们现在要以啊read pro这个东西为原型。创建一个对象。啊,我们要要以一个东西为原型,创建一个对象。啊,创建一个对象,然后这个对象呢,我们就管它叫做Di method。
07:00
什么意思呢?就是原型,原型链大家应该能明白,就是我们现在呢,要去以现在这个黄黄的东西,为什么呢为原型,原型是什么呢?不就是杠杠proto杠杠吗。哎,注意这个不是杠杠OB杠杠啊,是咱们JS内置的圆形链啊圆形链。那这个圆形链干嘛呢?就是我们要创建一个东西,这个东西我们用绿颜色,就这个绿的是我们自己创的啊,我们给它起个名字叫A。哎,Method看见没有,哎这样的,那这个对象干嘛,我们要往这个对象身上定义方法。啊,我们要往这个对象身上定义方法。那么圆形链有个什么特点?对圆形链的好处是不是我们一会儿是不是就相当于以它为圆形定义的这个数组啊?对吧,那以它为原型定义数组的话,我们这个时候是不是就用什么方法,我可以数组打点调用的时候。
08:05
啊,就数组打点调用的时候,我们能够触发它呢。这个时候呢,我们就可以让我们那个数组对吧,我们这不是有,就是我们相当于这身上改写了这七个方法,把这七个方法就在他身上再来一遍,当然这七个方法是老方法的改写,对吧?哎,好了,那我们就会有一个。可怜的小数组啊,那这个小数组就就在这儿了,那这个小数组我们现在打点调用的这个方法,凭什么是这个而不是这个呢?哎,那凭的就是硬实力啊,我们一会呢,会写一条特别霸气的语句,就叫做object。第二,Set property of。啊,Pro prototype of。哎,如果没记错的话,就应该是它啊,但是可能会记错,所以说老师在这里试一下啊,叫object their site啊,对,没错,就是它,那么set pro,呃,Prototype of这个东西呢,念的比较懊嘴啊,它干嘛用的,其实你一看他长这样子你就知道了,它是不是可以强制的定义某个东西的原型是谁。
09:17
对吧,我可以定义某个东西的原型是method。啊啊methods,那你说老师可能我才疏学浅了,对吧?哎,我才疏学浅了,我这块没有见过这个东西啊,那没关系,咱们现在学view的这个,呃,底层目的就达到了。对吧,哎,目的是什么?目的不就是能把这个原原生的这些东西啊,能够啊掌就是掌握一点嘛,对吧?哎,能掌握一点就是一点啊,然后就是说能够去拓展自己的这样子的一个啊编程能力就可以了,诶是这样子的啊,当然了,那如果呃,你说老师能不能用直接用下划线杠杠啊这个方法来写也是可以的啊,没有问题的。
10:04
对吧,但是ES6当中呢,是使用的是叫start pro of啊,但实际上呢,它这里是完全可以去写一个叫做O的下划线proto,哎,等于这个R。哎,MY啊,是完全可以这样的,就是也可以这样写,这样的话,我这个让让我这个这个就这个数组对吧,它的原型量就它的这个proto是不是就指向它了。啊,你还都指向他了。对吧,那这样的话是不是就我们播放一下,那你看这样的话,我们这个数组打点掉,用什么push pop这些东西,它是不是就走的是它呀,而这个函数呢,它这个是是我们得到它,它备份过来了啊,然后呢,呃,再在它基础上进行了一些扩充。是这样子来的。啊,然后现在呢,咱们你别看这个PPT,现在感觉很乱,但实际上面试官都会问啊,比如说面试官他就会直接问说VIVO当中数组的这个,呃,变化侦测,或者说叫响应式是如何实现的。
11:07
对吧,那这个时候你你你你你你你你就应该很高兴,为啥呢?因为你提前准备过。啊,你把这帮,那你就跟他说,他实际上是。以read pro为原型,对吧,创建了一个叫做a methods的一个对象啊,然后这个时候呢,用一个非常强硬的手段啊,就是ES6当中的叫object site pro pro type of啊,然后来强制的让咱们这个无辜的小数组的pro指向了这个。哎,对吧,那这样的话是不是就能掉咱们这个啊,这样的话它是不是就能触发咱们的这个新的定义的这些函数。大家有没有发现,就是我们现在新的这些函数就会被调用,而不是这些旧的。明白吗?所以言外之意是什么?言外之意就是说你你有没有发现我们不要着急去动手写东西啊,不要着急动手写东西,先把这些图给画出来,你看这个图画出来,然后这个图给画出来,然后一步一步去解决它啊,这样子的话才能呃特别好的,才能把这件事给去实现。
12:11
好吧,哎,这七个方法被改写了啊。好,诶,OK。那我们现在就可以开始写代码,这个代码咱们刚才写了差不多一点啊,那这块的话,你看就可以以什么呀,是不是pro为原型。明白吗?哎,所以在这里就是以咱们这个AR protype啊,以这个AR的prototype为原型。啊,为原型创建一个叫ma对象。哎,叫对象啊。好,那怎么东西以什么为原型,是不是叫object create呀?啊object create呢,这个时候就可以以这个东西为原型创建它,那什么叫以什么东西为原型创建它,那就是咱们图上画的。
13:03
哎,就是咱们现在图上画的东西,就是你现在啊,它能够以这个黄颜色的东西为原型,写个圆形链啊,就直接访问他了,没问题。哎,就创建出来了,好,创建出来它之后呢,这个时候咱们可以看一下这个对象啊,那这个对象你看就瑞它的pro不就是刚才那个对象吗。对吧,好了,那咱们这个时候就再罗列出来咱们改写的这七个方法,哎嗯,我们管它叫做cost啊,Cost啊叫methods啊,Need change就是要被改写的啊,要被改写的七个方法,数组方法啊。好,那这个时候我们要批量操作这七个方法,那就便利就行了,便利的话呢,就直接for each。啊,就直接调用for each。好调用for的话呢,那这里呢,就是my name,就是你这个方法名。
14:01
哎,那首先第一步呢,我们是不是要去备份啊,原来的这个方法。哎,那所以说咱们就管它叫original啊,就等于pro啊,就是你这个。嗯,Prototype上的它,哎,我们先给它备份啊,引用类型值就存过来了,存过来了没问题。好,然后接下来呢,我们就可以去定义新的方法,哎,定义新的方法,定义新的方法的话,不要忘记我们u to当中呢,是不是有这么一个DEF函数。对吧,哎,我们u to当中是有这么样的一个DF的这样的一个函数的。啊,所以这个deff函数的话,我们现在就可以用它来,呃来用这个函数,哎来去往身上去绑属性,所以我们现在呢,就可以去给他import一下import这个,呃,Import这个这叫什么来着,DF好from点杠。
15:02
点JS好,OK,那这样的话呢,我们就可以在这里定义啊,定义好定义谁呢?我们现在是不是要定义的是a reminded这个对象。啊,定义的是名字是什么,是不是就是my name。哎,然后定义什么值呢?就是一个函数。这个函数不要用箭头函数啊,因为防止它上下文有问题对吧?哎,防止它上下文有问题,然后这个里头要传入this这个参数啊,为什么一会咱们再想想啊,为一会咱们再解决,然后最后一个参数的话,它是应该是个false,哎,因为它不可被枚举,这里比如不可被枚举的这么一个事吗。对吧,哎,那这个函数不就是它这个函数吗?那这个时候的话,你看我就可以输出一个啦啦啦啊,输出一个啦啦啦,然后你看一刷新啊,它就报错,诶诶他这报错为什么他说呃I这个例啊这个this实际上是是这个什么啊,是一个这个呃就是呃这这这这个就是外部要把这个意思给传进去。
16:05
对吧,哎,外部所以说这个函数的话,我们先把这个先干掉啊,好然后刷新,好,那咱们看一下这个啦啦啦有没有被调用。呃,没有,因为我现在这个数组并没有被改写,就是说啊,就是说我们先把observer这改一下啊,就是咱们要换着写,就因为你这个我我index这不是已经push了吗?但是你这个push调用的并不是。呃,并不是咱们新定义的这个push。啊,因为我这不是for each了吗?他会遍历这个数组,哎,他这里有push,他会把这个push方法要重新在methods上进行定义,但是他现在走的不是a method。发现了吗?对吧?哎,那所以说怎么办,我们就要把这个method给他暴露出去。啊,你那你现在就知道为什么老师要用挖派开发了,就是他这里暴露的东西确实特别丰富。发现了吧,哎,我要把它暴露出去,就这块要暴露出去啊,你没有听错,就特别的恐怖啊,就是这个东西初学者学可能确实有点难暴露出去。
17:08
啊,暴露出去,那暴露出去之后呢,这个时候我们的observer类,你说老师怎么这么乱,他就是这么乱。哎,Observely这个时候他呢,对就需要引入这个了啊,但是他这个时候不是引入这个,它是引入的是什么?对,引入的就是刚才这个是这个东西。啊,这个东西,这个东西是个啥,这个东西是一个啊对象,对象里面存了好多方法的名字,也有push啊有什么的,对吧,所以说这块的话,我们就需要干嘛,在这里就要检查。啊,检查检查它是数组还是对象,明白吗。对吧,哎,我们把这个先注掉啊,那我这个这个cons调拉注掉对吧,那我这个是不是就是就可以检查它是不是数组if if。哎,我们看一下它如果是数组,它数组的话怎么办,然后不是数组的话,我们就让他这个。
18:04
就是如果是数组,那是不是叫强行,如果是数组要非常强行的蛮干。啊,干嘛呢,就是将这个数组的原型,哎,是不是就指向我们刚才引入的这个method这个东西,因为method身上有七个方法,这里有了七个方法。明白吗?哎,这里有了七个方法,所以我们在这里就要去用它。啊,然后这样的话呢,我们就可以去就指向AMI嘛,对吧?哎,那这样的话我们就可去用就是object.site property of啊,我们就可以让咱们这个value的东西指向mi就可以了,这样子的。哎,指向啊就完事了,那这样的话,你看我在这调用的这个push啊,诶咱们看一下怎么回事啊,X不cost这块写错了。
19:00
啊,就是这块写错了,因为不能这么暴露啊。就是这个方法不对啊,应该是expert cost,等于它就暴露和他一起写啊。这样写对吧,暴露啊,并暴露。好,然后这样的话,我们再来看一下刷新,诶这回就OK了,你看啦啦啦是不是有了。啊,就是你可能现在有点懵啊,别着急,咱们盘一盘就是为什么会输出啦啦啦,我不push它就不啦啦,好,我先把DeFine react这块注释注点啊,好你看他这不啦啦啦,为什么呢?因为我现在没有push啊,我现在只要一调用push就会输出啦啦啦。诶,但是这个数组呢,不会真的被push,你不信的话,你再看一下OB勾的G,它还是这个数组,22334455,对吧,OB上去了啊,OB已经上去了,哎,这个OB为什么会上去,这是因为啊,它便利了每个每个每个东西,然后它也是个对象啊,对吧,它也是个对象,所以说呃,我们的数组身上也会有个杠杠,OB就是也会被添加进去啊,咱们刚才之前的代码也实现了,但是这个push并不会真的把六六给推进去。
20:09
啊,这是因为我们现在已经改写了,那为什么改写了,因为这块有一个object property of啊,就是我们刚才PPT上,我们已经强行的把这个数组的原型啊,已经指向了这个对象。啊,那那你说老师这个地方怎么这么乱,那么多文件彼此引入,对,所以这就是我们为什么要去学习他的一个数据更新的这么一个啊一个。呃,一个这个理由,并且事实上一会等我们学了收集依赖啊,把water啊,DP都引入的话呢,你会觉得更乱啊,或者说是更美。啊,就是你会觉得更乱更美,所以说就是言外之意就是VI,他这个东西呢,确实是值得咱们初学者去研究的啊,如果你能把这些东西都。不参考任何的手册书,还有老师的视频,能够完整的写出来,那你的编程水平呢,是达到一定的境界的。
21:06
啊,你的编程水平肯定是达到一定的境界了啊,是这样子的。好,所以这块呢,你看它这块就是push没有用了,因为它这改变原型了,改变原型的话,实际上就是掉到了这,那为什么会掉到这儿,因为我便利了这数组,数组中的七个字符串,然后呢,它在这里,你看就这样,那那你说老师我为什么推不进去,因为你备份原来的方法,但是你是不是没有执行原来的方法。对吧?哎,所以说我现在想要这个push生效,那我应该怎么办?对我是不是就应该让他执行,但是你不能这么执行,你这么执行的话,他这个上下文就有问题了。因为函数直接过原括号执行,它上下文是不是window对象啊,对吧,函数直接通过原括号执行啊,那么上文基本上都是这个啊,Window对象是这样的对吧?所以说这个大家你要你要能想清楚。
22:00
啊,函数这个,所以那现在的话,你就会发现,实际上你刷新之后啊,他这是报错的。对吧,哎,他这是报错的啊,你这不能直接这个不能直接这么玩,那这块的话就需要去调用,就需要扣一下。啊,就需要去扣一下或者apply都行,Apply会更好用,因为我这个时候这个push它不是参数嘛,参数都是啊,那你先上下文肯定是this。哎,然后呢,参数就是R啊,就是你这这里的这个r arguments对吧?哎,你你琢磨一下这里的这个东西是不是就是你的这个arguments r arguments。是这样子的。对吧,哎,把它apply argument,所以说这样的话,你看这个push就真的好用了。啊,就现在啦啦啦又能输出,然后呢,又能啊又能把66666推进去,因为我备份了原来的方法在这里又执行了,那这里的意思是谁,这里的意思呢,就取决于这个function的意思是谁。
23:00
所以这里呢,就不能这个function千万不要设置成箭头,设置成箭头是有问题的啊,设置成箭头是有问题的,一个是箭头arguments就用不了了,还有一个就是说箭头里的上下文是有问题的。啊,咱们这个时候是调用是上下文,就是我们现在啊,这个这个这个函数是谁调的,是不是数组打扁掉的,所以我们现在这个意思呢,就是这个数组。你明白吗,对吧。我我们这个数组,你看这个数组在调铺似的呀。所以我们现在是不是这个里头是这个数组,现在是这里的这个意思,然后呢,这句话的意思就指的是我们要去把备份这个方法调用,然后要以现在这个数组的上下文当做你备份的这个函数的上下文执行,然后把你arguments给弄进来,Arguments放在这就说明这能推六六,推七七,推八八呀,对吧,那不就零散的这些方法不都能不都能用吗?所以这样的话,我又改写了它就能把啦啦啦输出了,然后又又有了数组的原方法。
24:02
所以你看有禹锡多么的聪明,就这里啊,备份原来的方法,因为因为因为push啊,什么泡吧,这这这这些等七个函数的功能,你不能被剥夺啊。对吧,哎,功能不能被剥夺,明白吗?啊,不能被剥夺,所以说这个这块这条语句是很关键,哎,所以说这样恢复啊,原来的这样的一个功能啊,这样恢复原来的功能,然后那接下来还有还有还有一些别的操作,我们下个视频继续讲啊,我们下个视频继续讲啊。
我来说两句