00:00
这节课我们来学习object.DeFine property方法。在刚才的这个课程简介当中呢,我们已经知道了这个方法呢,可以被称为上帝的钥匙啊,那么咱们这节课呢,来详细的认识一下这个方法。object.DeFine property,它的字面意思呢,表示的是,呃,定义属性,那么它是由object对象来调用的,说明呢,它是用来控制对象的啊,某个属性的。那么这个方法呢,咱们嗯,可以直接拿百度去搜他啊,拿百度去搜它之后,第一个结果实际上他就会告诉诶,会给你显示这个火狐这个页面啊,他这个搜索到的东西呢,就是火狐的这个里头啊,那火狐这个MDN上面说的很清楚,就是object.DeFine property方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。它是什么意思呢?我们现在呢,通过实际的啊案例我们来看。
01:02
我们现在呢,要开始打代码了,那么老师呢,经过咱们的考虑啊,那么还是觉得要用这个外派这个环境啊,所以呢,现在呢老师呢,就已经把这个挖PA环境已经搭建好了,我们先来初步的看一下这个vipa这个环境啊。好,首先呢,这个地方我们先看一下身份证。项目的package.jason身份证文件当中呢,你就会发现它没有任何的依赖,但是项目依赖呢有三个是外派五,八派C3和八派DV server3。好,那么在通过NPM转DV的时候呢,这个时候呢,它就能够运行八派杠DV-server这个命令。好,那这样的话呢,就相当于它会去,呃,咱们看一下这个mapa配置文件,它就会打包src文件里的这个index的JS啊,就从这个JS文件呢,就开始打包,哎,大家可以看见这个JS文件啊,从这个文件开始打包,然后打包到一个虚拟路径,因为这里是public pass。
02:09
打包到的文件呢,就是bunddo.js这个文件,然后它会在8080端口号啊,然后呢,也会静态使用3W文件夹当中的这个资源,在之前的咱们vouee源码这个课程当中,包括四大课程啊,然后也包括ma touch模板引擎那个课程,我们都使用过相同的完全一样的这样的一个环境,所以在此呢就不再赘述,我们现在老师呢,也已经在课间提前把他n PM run divv起来了啊,就是n PM run divv已经run起来了啊。那现在的话,我们在index.js当中写的任何的代码,比如说我们现在去写一个o.log一个123,这个时候它就会在这里啊,能够控制台当中能够有输出。是没有任何的,呃,没有任何的问题的。
03:02
好,那么咱们先言归正传,我们现在来定义一个对象,然后接下来呢,我们就使用object.DeFine property给OB勾对象呢,咱们定义一个A属性。好定义它的A属性什么呢?我们定义它的值为三。同样,我们再写一个DeFine property,定义它的属性值为五。那我们来输出一下OB勾这个对象,然后再看一下它的A属性,再看一下它的B属性的值啊,我们用逗号好在浏览器当中呢,我们就可以看见,现在这个对象呢,就被生生成了A是三,B是五,然后在底下呢,也输出了这两个属性值。那这个时候的话,你肯定就明白了,object.DeFine property呢,实际上就表示的是去定义一个对象的某个属性的值,对吧?那它定义的时候呢,很麻烦,你会发现还不如用OB勾点A等于三这样来的快,然后还不如OB勾点B等于五这样来的快呢,那它为什么要这样定义呢?啊,但是大家先别着急,我们一会儿呢再去讲它到底为什么要这样定义,我们现在呢,先去把它啊,咱们往PPT上粘一下我们的PPT啊,就相当于咱们现在的一个呃,小笔记。
04:20
有些地方呢,老师是特意没有提前制作出来啊,咱们要带着同学们把这个笔记给写出来,这样的话呢,能加深咱们的印象。那么现在的话你就知道了,第一个参数呢,表示的是定义哪个对象,第二个参数呢,表示我要定义这个对象的什么属性,然后这块要有一个对象,这个对象当中呢,要写个Y63,就表示我要把这个属性的值定义为多少,好,那么现在的话呢,大家就肯定会抛出刚才的问题,就是说我为什么要使用它呀,那使用它的好处就是说啊,我们可以通过object DeFine property呢,能够非常智能的去定义一些隐藏的属性。
05:05
什么隐藏的属性呢?咱们来看。它呢可以在这里呢,比如说定义writeable啊,Writeable是什么意思呢?咱们可以往底下看,它这有参数啊,Writeable的话,这个意思就表示的是是不是只读的。对吧?哎,也就是说如果是writeable为true的时候,那么这个时候属性的值呢,啊呃,才能被赋值运算符改变,如果是false的话,那它这个值呢,是不能被改变的。所以这个readable呢,就感觉是这个变量的,就这个OB勾的A属性的一个隐藏的值,对吧,所以说我们现在就可以来一个,比如说叫writeable啊,叫是否可写,所以是否可写。那我们现在呢,就给它来个。好,Readable的话呢,我们现在呢,就去给它写成一个false,然后我们来试试看,那这样的话,我们让OB勾的A加加,我们看一看它会怎么样刷新,好它没有报错,但是我可以再输出A啊,你会发现它是不是还是三。
06:05
啊,这是因为呃,虽然他加加了,但是呢,我现在是否可写是不可写,所以他这个时候呢,它就相当于常量一样,我这个OB勾的这个A属性呢,此时是不能改变它的值的。如果我要把它改成true的话,那这个时候呢,它就变成四五了,对吧,A属性就变了。啊,所以你就会发现就是object DeFine property呢,它是有这种隐藏属性的功能的啊,所以大家一定要明白,就是为什么JS要提供,为什么JS要提供这个,呃,要提供这个object DeFine property为什么要提供,那是因为他能设置一些额外隐藏的东西,对吧?哎,那我们现在就把这个话打上啊,方法就可以对吧?诶,设置一些额外隐藏的啊这样的一些属性。那再比如说咱们可以看一下咱们这个手册啊,这个手册上往下这看,他这有一个东西叫imnuable。
07:04
Imnuable的话就表示的是这个属性是否可以被枚举啊,那什么叫被枚举呢?那咱们举个例子,比如说现在我让这个B属性呢,它的是否可以被枚举,我们让它为false。啊,那他这个时候B属性呢,就不能被枚举,A属性呢,我们可以让他是否可以被枚举为true。好一个处一个false,那这个时候什么叫枚举呢?那这个时候就是说我在用four k in。这样的时候啊,那这个时候你就会发现我们在便利这个对象的时候,我们他就不会变利B属性,而只会便利A属性。啊,大家不信的话,咱们来看一下刷新,看见没有,它是不是只便利A属性,不便利B属性。啊,那你说老师是这样吗?是如果我说我再给他来一个C属性,C属性可以被枚举。对吧。
08:00
好,那这个时候你看他是不是就是把B会跳过去,我们用循环语句去便利B,他会把这个B就给啊,就是跳过去,所以这样的话大家就能够啊明白了就是object.DeFine property呢,他实际上要的呢,就是这种隐藏的,就是否被枚举呀,然后还有是否可以被,是否可以可写呀,啊就就是说他是咱们JS提供给咱们。高级的编程人员这样的一个秘密武器,可以让这个对象的属性呢,可以更加的自由的被定义,对吧?哎,可以更加自由的被定义啊,这个大家应该是能够听懂的对吧?诶,这个这个大家应该是能够听懂的啊。好,那么现在的话呢,我们就要开始学习一个重要的知识了,这个知识呢,就是这个get和set。就是咱们刚才说了op这点property呢,实际上它非常的智能啊,我们把这个是否可写可被枚举,我们就可以删掉了,那注意老师呢,只把这个啊案案例或者说这个小知识留在了PPT上啊,我们在这里呢,就给大家删掉了,删掉的目的就是说我们不再准备更多零散案例啊,这种特别简单的知识呢,大家自己去敲一敲就可以了啊。
09:18
好,那现在的话呢,我们就有三个ABC3个属性啊,那么现在的问题呢,就变得很简单了,就是它现在有一个get和set。这个getate和set呢,咱们这个啊有一个术语,它会把这个getate呢叫做getter函数啊,叫get函数,那get函数的话呢,什么叫get,什么叫get函数,Get表示得到,Set呢表示设置,就是get表示的是我要得到这个变量的值,Set呢表示我要设置这个值变量的值,那么这两个函数呢,它的英文术语呢,叫做geter和sat,就大名叫get和set,它写的时候呢,就叫set和get。什么意思呢?诶,就是你只要访问这个A属性,那它这个时候呢,就会去读这个get函数的值啊,大家知道ES6是可以省略这个function这个词的,对吧?所以说我们把它给删掉啊,只要你试图访问A属性,那么它就会触发啊,我们现在console.log一下对吧?哎,我呃,你正在试图啊,或者说你试图访问OB勾的A属性。
10:28
啊,你正在试图访问OB勾的A属性,那这个时候的话,咱们可以看一下,只要我去访问A属性,他这个时候呢,他就会去报警啊,但是他正好报错,我们看一下怎么回事啊,他说啥呢?他说你这里呢是不能同指定value啊,不能同时指定value和这个这个这个什么的啊和他的这个writeable啊attribute。啊,他说不能这个这个就是说你这个value不能跟get一起啊,一起访问啊,就一起设置啊,这是不行的,就是有value没get啊好,那这个时候呢,我们刷新看一下,那这个时候你看它是不是就说你试图访问OB勾的A属性。
11:08
有没有发现呀?对吧,哎,你试图访问OBB口的A属性没问题吧,他在定义这个A属性啊,你正在是就是你只要那你这时候访问B访问C,它这个时候是不出不出现的。啊,他这个时候是不出现的啊,那是因为你没有给B和C加上get,或者说你这个get函数呢,只写在了A这个对象中,所以这个时候这个A呢,就感觉被劫持了啊,那事实上它就是被劫持了,所以这个就叫做数据的一个劫持啊,就是呃,咱们的JS引擎劫持了A属性,当A属性的值被变化的时候呢,那这个时候呢,它就可以啊,它就会无条件的去执行这个get函数。所以这个就是游禹锡找到的这样的一个钥匙。好,那我们再试一下,直接输出这个OB勾,咱们可以看见这个对象上呢是没有A属性的啊,那这个其实很好理解,就是因为我们的OB勾的A属性呢,并没有被成功的赋值,所以他呢就会认为你这里A属性呢是不存在的啊,所以他这呢啊,这就是相当于是啊,不会在这上面去让你去显示出这个A属性啊,那这个时候你就会发现了尤禹锡呢,实际上就去找,找到了一个上帝的钥匙就是。
12:25
他可以去有一种手段,当用户去访问这个值的时候呢,能够被劫持它,那同样道理,如果当你试图去设置它的值的时候呢,对吧,因为咱们一开始说了,咱们VI的编程呢,它是非侵入式的。非侵入式呢,它就有一个特点就是啊,我们直接写Z4.a加加对吧,一个对象的A比变的时候,他要有事件发生啊,计算机给知道这个事情发生了,所以这个时候呢,他就能设置这个site。啊,那咱们就叫你试图改变。OB勾的A属性,那这个时候不会输出,你试图改变OBB勾的A属性啊,不会输出,这是因为什么?对你没有真的改变它,比如说你试图改变它啊,我让它自增,然后呢,我再让它等于个十,那这个时候你看一发刷新,它就会有说你试图改改啊,你试图访问A属性改变,访问改变,访问改变,那为什么?因为自增的时候实际上也在访问它本身。
13:25
对吧?哎,所以自增的时候也在访问啊,所以它就是又访问又改变,又访问改变,访问改变,那最后这是只是改变,因为赋值就是单纯的赋值啊,而如果你把自增删了,它就只有一个改变,对吧?哎,这个大家就好理解啊,咱们就删掉,把自增删掉,因为自增也带访问,所以这个时候你就会发现了,当你访问A的值值的时候,然后给A负值的时候,那么这个时候呢,就会触发object.DeFine property里面的get这个函数和set这个函数,那么实际上呢,这个get函数它的啊就叫做get。
14:01
对吧?哎,然后set呢,就叫做set啊,那为什么要给它加个ER,这实际上是咱们计算机的一个惯例,就是对一个变量的赋值和得值,如果有函数的话呢,那么这个时候呢,它就会用这个get和site,哎来进行一个就是啊,就会给他起个名,就叫geter和S啊,就会叫启蒙Java呀,C加加当中呢,都会这样去用的,所以呢,我们这个节视频啊,这节课这一小节课我们就讲解了这个有语期发现了什么啊,当然不是他发明的,我们只能说是他发现的,发现了什么呀,对,就是这个OB property里边的C和get,那么这个呢,就是非常非常核心的机理啊,这个大家千万别小看,我们现在只讲了一点点知识哦,千万别小看,因为就这一点点知识,就已经揭露了一个比较本质的一个秘密,什么秘密呢?对,就是我们一开始说的。
15:00
啊,为什么我们现在这个是非侵入式,就是this.a加加咱们系统就能够去更新视图,这是因为我们的那个A属性已经被这个site给劫持了。啊,已经被这个S的函数劫持了,当我们去调用ob.a的时候,就跟刚才我们这似的,只要我现在让这个OB勾的A我复制,那这个时候它是不是就会去访问这个属性啊,对吧?哎,这个大家应该是能听懂的啊,他就会试图改变这个OB勾的这样的一个A属性,这是没有什么毛病的啊,就试图改变这个OB勾的A属性,所以他这个时候他就会输出。好了,那这个时候呢,大家肯定就会想一个问题,就说老师既然他是上帝的钥匙,那他怎么工作的呢?对吧,那我这个时候我真的要给A赋值为十,那我这个时候我再输出这个OB的A,咱们看一下你看OB勾的这个A。啊,那他还是安地饭呀。就特别的神奇,就是我明明已经给它复制为十了,那为什么它的OB勾的A呢,还是十呢,不是还是安迪范呢,就特别的诡异啊,那咱们下一个视频我们进行讲解啊,这个视频的目的已经达到了,就是我们要简单的去介绍一下get和set,就是get和set啊,我们下一个视频深入的去讲解这个东西到底应该怎么具体去使用。
我来说两句