00:00
好嘞,各位,那从这小节开始呢,我们就正式的去聊一聊view里的这个数据代理,想把数据代理聊明白,你就得对这个方法特别熟,方法在object身上,方法的名字呢,叫做DeFine property,如果我一说这方法的名啊,你马上就有反馈,哎,你说老师我知道他传几个参数,每个参数是什么类型,这个方法它能干什么,那这一小节你就可以跳过了,因为这一小节呢,我主要是带着大家复习这个方法,好吧,这个方法啊,你可千万别小瞧他各位view底层很多的地方都用到了它。你比如说呢,View里面有一个数据劫持,哎,用到了这个方法啊,我们接下来说的这个数据代理用到了这个方法,后边我们学的这个计算属性,哎,底层也用到了这个方法啊,这些东西我们后期都会讲到的,哎,慢慢来回顾走,其实通过它的名字呀,各位你就知道它是干嘛的,DeFine是不是有定义的意思,Property是不是有属性的意思,所以说这个方法呀,就是给一个对象啊,添加属性用的。
01:00
啊,或者说给一个对象啊,定义属性用的对吗?饭不是有定义的意思吗?好,这个呢,应该是我们在学习这个ES6的时候呀,学过的一个知识点,所以说在这儿呢,我们就不过多的引导大家了,直接代码上见啊,写一段脚本,既然是给对象添加属性,那各位我是不是得先有一个对象好person对象里边保存着一个人的信息,比如说这人呢,让他叫张三啊,人呢有一个性别,比如说让他是一个男士,好了,写完了。接下来我提需求,我想让张三有年龄添加一个属性,属性名叫age,值呢是18岁。好了,来开始写object.DeFine property,还能不能记得他传几个参数啊?我直接说了啊,传三个参数,第一个参数就是你要给哪个对象添加属性,那一定是person,第二个参数您添加的属性叫什么名age对吧?然后就是一个特别重要的参数了,叫配置项啊,这里边能写很多的配置啊,一个最常用的就是value,比如说我写成18 OK,同学,你这么写完了person呢,就有了age这个属性,并且值呢是18。好,那我们一起看一下啊,输出一下这person,好了,打开。
02:11
控制台上键是吧,走哎,你看是不是18呀,那有些同学说老师刚才我看见你那里边好像有几个红色条,那报错,哎,那说一下啊各位就有的时候吧,你这个壳ome浏览器啊,如果装的插件啊比较多,它可能就会出现那种诶奇奇怪怪的错误,你比如说刚才我出现的那两个错误,就是我这个广告拦截器啊,它去获取节点的时候,它没获取到,哎,所以说它报错了,来再给大家看一下啊,关掉走打开,我不知道还能不能出现了啊走控制台,诶同学你看是吧,没有说什么找到这些东西,说老师是你这文件第一行有问题,那文件第一行那有什么问题啊,哎,所以说同学这不是你的锅啊,是插件的问题。好了,刷新一下,走,张三男18岁对不啊,那有些同学可能就说了,老师啊,那我觉得这方法绝对没人用,是不?你用三行去实现的,那我一行就搞定了呀,AGE18多简单呀,哎,那同学我说一下这种方法呀,看起来麻烦,但是我跟你讲它比较高级,高级在哪呢?同学,咱从表面上去观察啊,我这么写啥意思?
03:12
是不是直接自己写的呀?好了,回到控制台上,你看啊,刷新那张三男18啊,打开看,各位仔细观察,我给你放大一点,你仔细观察,你发没发现这三个属性浏览器用同样的颜色给我指示的,你看a name sex是吧?好,回到代码中,我不这么写了,诶,我这么写各位是不是也能有age啊,是不是也是18呀?好,回到控制台刷新一波。打开,同学你仔细看啊,它俩是一个颜色,这个age的颜色呀,其实淡了一点,那同学它这个淡一点,它想表达的是什么呢?听我跟你说啊,他想表达的是这个age啊,是不可以被枚举的,这俩字枚举,哎,同学说老师不懂这词儿,太专业了,听不明白啊,那我通俗易懂点来讲,就是这个age的属性啊,是不参与便利的啊。
04:05
咱验证一下啊各位走我呢,先正常的通过这种形式啊,给它添上这个配置,然后呢,我输出什么呢,我输出这么一个东西,看你还记不记得了,各位object身上有一个方法叫做kiss,这干嘛的,哎,直接说。object.case要传入一个对象作为参数,那这个方法呀,可以把传入对象里面所有属性的属性名提取出来,变成一个数组,好,那我写一下,比如说是person,那你看它输出的是什么啊,各位回来看,是一个数组对吗?有name哎,有sex,有age,好,这是你自己直接写这A值,但是如果你通过这个去给他添加这个A值,这个时候呀,你回来瞧。你发现便利不到了,他只能拿到名字和性别,是不是不拿这个呀,这就叫做不可枚举,其实通过另外一个呀,也能验证各位,我不写这行,我写什么呢?For大家还记得吧,既能便利数组,也能便利对象,对吧?我用for in呢去便利一下person,这呢,它不是数组,咱就不用index了,用key,然后我输出什么呢?输出这个person对象里边每一个属性的属性值。
05:14
好,前面呢,给你加个分隔,艾福走回到控制台,同学,你看张三男是不是都能出来,诶年龄他就是没有是不,这就叫做不可枚举,OK,就说白了不能变历是吧,说老师,那我想让它变历,那咋办呀?啊,那老师就不用这种写法了呗,我这么写不就能变历了吗?同学,12行删掉,咱不考虑用12行这种直接的写法,就是用它,那咋办呀,你就得借助另外一个配置项了啊,这个配置项的名字呢,哎,叫这个叫inable。啊,Innuwable这词什么意思呀,你搜一下各位啊,搜有道你搜一下啊,叫做可列举的可点数的是吧?哎,给它关掉它呢,给它调成true就可以了啊来把这行呢给它解开,这行呢给它注调,看看这回能不能出现A,你看是不是有了,哎,所以说同学写好注释吧,这个ineable属性是干嘛的呀?叫做控制属性,是否可以枚举,那默认值呢,是false对吧?各位好,其实还有配置项,我们慢慢的往出引,把它掉。
06:18
把它打开,说老师明白了,你这回这年龄啊,你看这颜色就对了,老师你看他们都是深色的了,那就跟我正常写就一样了呗,这住掉老师,我这写AGE18那就一样了呗,也是差点事儿啊,差哪呢?你看着啊,各位我直接写AGE18呀,这个年龄我可以改,你瞧着啊,现在输出的是person对吧,那我直接写了啊person.age给它改成19岁,然后我再重新输出这个person,你看是不是变成19。好,回到代码,如果你不通过12行这么写,你通过这个去给它定义这个age,那我告诉你啊,你这个是改不了的,回头你看一下就明白了,刷新虽然颜色都一样了啊,都是深色的,也没有谁是淡色的,但是你瞧着啊,Person第2AGE把它改成19。
07:05
写完了是吧?走,看18是不是改不掉啊?哎,那怎么能让它可以修改呢?那你加这么一个就可以了,叫做redable readable,啥意思呀,可以被修改的,你这一加不要紧,瞧着一上来是不是18呀?走person.age改成19,重新输出person,走19对不?哎,好了,写好注释,走叫做控制属性是否可以被修改,那默认值是啥,False?哎,说老师那就全了呗,其实还差一个啊,就是属性是否可以被删除,也能限制,来瞧一下啊,这一堆给它除掉,然后呢,这么写,这是正常写的age对吧?来,那你听我说啊,我想删掉person这个对象里的name属性,那我得怎么写,然后删掉谁呀?person.name是不是删掉啊?走同学他说true是啥意思呀,就是删下去了,你重新输出person是不是删了。
08:00
嗯,说老师那我想删掉age,那写吧,点什么呀,A回车是吧,他也告诉你删了,那你输出一下这个person呗,删没删删了,哎,就是你直接写啊,是可以随意的修改和删除的,但是如果你通过这种方式来瞧一下效果啊。现在是18,那那我要删掉它,他说false,就是删不掉,你重新再输出这个person,你看还有谁18,那怎么能让它可以被删掉呢?哎,加上这么一个配置项叫做conigable,诶,就可以给它删除了,好,写好注释啊,这叫控制属性是否可以被删除,默认值也是什么呢?False,好,那现在我把它改成除了,是什么意思啊,就是可以被删除了呗,来试试啊,各位走,删掉这个age,重新再输出这个person,你看age是不是删掉了,所以说同学啊,我把这四个配置项给你说完了之后啊,这回你明白了吧,这个东西看起来啊,它复杂,但是它可以对追加的这个age属性啊,进行很多高级的限制,对不对?哎,能不能改呀,能不能枚举啊,能不能被删呢?对吧?那你要直接这么写呢,同学那咋的,那这个东西就是随意对吧,也能改也能删啊好,那把这个呢删掉,说老师那property。
09:19
也就只有这四个配置项呗,其实不是的,各位,这个property啊,不仅仅能传这四个基本的配置项,这些都算是比较基本的配置项,其实呢,他还能传一个高级的配置项,好,我先把这四个基本的注掉,我再把这一堆全都注掉,然后我给你提需求啊,你听我说,我呢准备好一个数值number,它的值呢是18,然后你听我说啊各位我的要求是。Person对象应该有一个age属性,Age属性保存它的年龄,并且它的年龄啊,是读取number这个数字读出来的,而不是我自己亲手写的一个18,那有些同学可能说老师那就这么做,Age冒号,你不是说不让我写18吗?我不写,我直接写谁呀?Number老师完活啊,老师来看一下效果,瞧AGE18这不挺好的吗?
10:16
但是同学啊,现在有这么一个问题,就是这个number啊,后期可能变成19。那要是这样的话,你再输出这个person,我问你他跟着变吗?不跟着变。就有一种感觉,这个number和这个person呢,确实有点关系,但是那个关系啊,仅限于他俩一上来定义他俩的时候,对不,以后这个number怎么变,这会是不是也不跟着变了呀,说老师那为啥呢?那你想想啊,各位你说第九行这个语句走完了,然后这一大堆啊,这个语句也走完了,那我问各位这代码是不是就执行完了呀,以后你number再怎么变,那是不是你number的事儿了呀,可不是说像你想的那样说哎,老师第九行number改了完了,我这红色里边这不用到number了吗?那我第13行就重新执行一下,那不是对吧,当时定完了就定完了。
11:08
但你要说你这样做呀,那你无敌了是吧,你这么做说老师啊,我这number啊,我让他等于多少呢?是19啊,然后老师我做这么一个事儿,person.age等于number,那你说你这就是属于什么做法,各位去改那个number number改完了,把number的值重新赋给person的age了,那你说它变不变变。但是我的想法是这样的,就是这个NUMBER1变呢,它这自动就变,不要再让我亲自去执行蓝色框里的代码了,还得再给它赋值一遍,那怎么办呢?哎,回到代码中,那你就不能直接这么写了,那你就得求助一个人了,诶,就是它,嗯,DeFine property,它这里边它能写一个配置啊,配置的名字叫做get,那值呢,是一个函数,好,那就直接告诉大家啊,这个get函数呢,什么时候被调用啊,叫做当有人读取person的age属性时,然后呢,Get函数就会被咋的呢调用,且返回值就是A值的。
12:20
值,那也就是意味着它必须得有哎返回值,那我随便返回一个,返回一个hello,可以吧,好,这回呢,你瞧一下效果啊,回到控制台走,说老师完了,那年龄被你搞丢了,诶,没丢,各位看着啊,绊面上好像只有这两个,其实有三个,你展开来看,同学,首先这两个是正常的属性对吧,都有,然后你仔细看啊A,然后呢,同学你看啊,它用三个点。给你代替了,就有一种什么样的感觉呢?我这人呢,确实有age这个属性,那这属性的值是多少呢?哎,我不告诉你,那你想知道吗?我想那你就得点这个,诶走是吧,Hello出来了,而且你注意观察一个细节啊,我鼠标放在这的时候,它出现了三个英文的提示是吧?来读一下叫做invo啥意思?
13:11
这个invoke呀,你可以把它理解为映射的意思,那这个property叫做属性get呢,其实指的就是啥呀,你所写的这个get配置项老师不对,我写的是get,它说的是get,那你听我说get叫属性名对吧?属性值是个什么玩意儿,是一个函数,那把它俩放在一起就可以称之为get,也就是以后啊,我们不经常说get函数,我们一般用这词get,哎,就明白了,别说get函数了,说get,那你看他的意思就是,诶我有年龄,年龄是多少啊,我不知道,我得问问get对吧?Get的返回值是多少?诶,那我年龄就是多少,而且你仔细看这儿,同学他说了这个对象身上啊,还有一个get,为谁服务的get呢?为这个age,对不?哎,好,那回来同学,那你一点是吧哈。
14:03
那我不能写hello啊,我得写啥呀,是不是得写number啊,那你看这样的效果就出来了,各位瞧着啊。有没有年龄有值呢?不知道,我得现问去找谁问去找get一点就是18,好,那你看着我,如果这个时候把这个number给它改成19,同学,Number变了吧,重新输出person还是有年龄,年龄多少呢?你再一点它现问,诶一问就发现number变了,是19了,你每一次去访问这个。都会触发get函数的调用,或者说get的调用,验证一下有人读取。Age属性了,好瞧一下效果啊,各位清掉person.age请问我是不是想做输出,那我这是不是在读取呢?是的,走一定是先走这个,然后再有返回值,诶回来后再有这个18对吧?那如果你改一下,刚才也看到了对不对,19好了,重新再来走,那就19是吧?哎,好了,那你看这样的话,他俩不就做起来关联了吗?
15:09
啊,好了,那除了有get呀,各位,其实还有一个啊,跟它相辅相成的叫做什么呢?叫做set啊,那这也多说一下,同学,没有人把这个写成这么复杂的形式对不?当然你可以给它起个名,比如说这函数的名字叫做佩奇,是不随便起一个,那你看打开输出的时候,就是有一个为age所服务的get,它的名字叫佩奇,一般来说呀,同学我们也就不写这名字了,是吧?哎,可以这么的简写,好还有一个set,那你说说set什么时候调用吧,猜也能猜出来了吧,各位啊,走,叫做当有人不是读取,诶,叫做修改。当有人修改person age属性时,那么set函数,那也就是set就会被调用,那这也得写个且,但是内容得换,且会收到修改的具体值,你不知道改这age吗?那你改成什么值了呀?这个set啊,能收到VALUE6对吧?好了,那我在这conslo一下,叫做有人修改了A置属性,且值是来个VALUE6,看一下效果啊,回到这刷新person.age改成30岁,你看有人修改了age属性,且值是30,说老师那就改掉了呗,没有改掉你看person走。
16:30
点为啥没改掉。因为本质的原因是这样的,这个person对象吧,有A属性,但是这个属性的值啊,是来自于绿色的这个变量,你说对不?所以说同学你表面上说set被调用了,但是实际上啊,你没有把这个年龄改掉,为什么呀?因为这个变量它没有变,你说对吧,那你里边在做一件事就得了,你知道怎么做了,Number等于谁呀?Value这不就可以了吗?好了,来,咱整体的试一下啊,各位来清掉,首先呢,我先输出一个person啊,打开年龄是18岁,你看有人读取A值属性了,好了,清掉,接下来我做一件事啊,各位我把那number啊给它改一下,让它变成20岁,然后呢,我重新访问这个person.age各位瞧一下,有人读取了是不是20?好,那接下来呢,我通过这个person呢,点age我去修改啊,比如说这回变成30,是不是有人修改了,那值是不是30啊,是,那你知道了,这number一定变了,是不是30啊,那也就是说你本次。
17:32
的这个修改是起作用的,当你再访问age的时候,诶,是不是30啊,那你说是不是有这么一种感觉啊,各位,这个number和这个person呢,它明明是两个东西,但是就是借助这个DeFine property,让他俩之间是不是产生了一个关联,哎,你一定得有这个体会,什么呢?就是person确实是一个对象,确实有A属性,但是值呢,你现用,我现去给你取,靠谁去取get,那你要改呢,我就帮你调set,并且把值给你拿回来,对不?哎,这就是DeFine top同学,这个和这个S呢,看这关掉啊,这个get和这个set呢,是特别重要的,OK,好,那这一小节呢,我们先停一下。
我来说两句