ES5中的Object.defineProperty方法

        以前在学习的时候往往都是囫囵吞枣,有时候就是记个大概,但是没有深刻的去了解一个知识点,导致很多时候需要用起这个知识点的时候会发现回忆都是零零散散的片段,需要时不时的反复记忆。因此,记录一些常用的方法还是很有必要的,这里讲着重介绍Object,defineProperty()这个方法(当然,ES6中的Reflect对象也有这个方法,毕竟,Reflect对象本来就是继承了Object对象的,只是在此基础上,将一些原本在Object对象中有所欠缺的部分稍加弥补修饰罢了)。

       首先,我们知道,在ES6之前,定义变量的描述只有var,例如: 

//定义变量
var num = 100

     上面这种方式有一个较大的缺陷,就是在同一范围下,会导致变量的混淆.此外,由于一个项目往往是多人协同开发,写在同一个html文件下的js文件夹可以互相访问到var定义的相同属性,很多程度上导致了脏变量的产生,不仅不容易维护,而且会显得代码乱糟糟的。可能这个同名变量一开始是Number类型的,等会儿就会被别人定义成String类型的了,导致变量晚节不保,如下:

      定义的变量num不仅值被改了,连类型也转换了,可以说是面目全非,这不像那些强编译的语言,一开始就定义好了类型,就算你的值可以改变,但类型是不能转换的(特殊情况下不算),又比如用var定义一个对象:

var obj = {
    id : 1,
    name : '兵锅锅'
}

      我们同样也可以将其改变的面目全非:

       此时我仿佛已经听到变量对我说:“求求你做个人吧!”

       显而易见,单纯使用var来定义属性很多时候是很尴尬的,为此ES6推出了const和let,这样可以很大程度上缓解这种问题,首先就可以解决我们上面定义变量的问题,如下:

       首先,我定义了一个Stringl类型的变量name,然后我修改这个变量name,发现直接报错了,显示:标识符“name”已经声明,这就表示如果用const来定义值类型,会导致已经定义好了的值类型会无法更改,多么美妙,那么我如果想改动呢?这个时候var和let就可以帮助你实现了,let不仅可以帮你改变值类型,还有暂时性死区的概念,好用的很,如果想学习建议自己多敲敲代码,可以看看我的博客前端必备知识点,让你的进阶快如起飞,你想要的它都有。

       上面都是针对的值类型,我们既然已经知道使用const可以锁死值类型,但是还有一个类型值得我们注意,就是引用类型,如果我们使用const来定义引用类型呢?如下:

        可以知道,const和var、let一样,定义的引用类型值都可以被随意更改,不仅值被改,连基础的类型也无法得到保障,因此,如果我们要定义一些在引用类型中无法被更改,被重写的值就可以使用Object.defineProperty()这个方法。

        那么,先介绍一下这个方法,Object.defineProperty()这个方法接收4个参数,如下:

       现在就可以用来测试一下,是否可以通过这个方法对引用类型中的属性(id)值进行保护,如下:

       可以看到,即使我们改变了person.id,在输出person这个对象时,person.id值仍然是1,可见,使用Object.defineProperty()可以用来保护对象的属性值,为什么要讲这个方法呢?因为尤大在Vue框架中使用的双向绑定功能就是通过这个方法来实现的。

      知识点是永远都学不完的,但我们可以把已知的知识点学的更深,在基础上有更独到的理解,加油,各位小伙伴们,我们都是最棒的!

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值