美文网首页
深入理解javascript的对象属性——数据属性和访问器属性

深入理解javascript的对象属性——数据属性和访问器属性

作者: 陆霁 | 来源:发表于2018-01-20 16:39 被阅读122次

关于定义一个对象上的属性,相信大家对这点并不陌生,一般的方法有以下三种。

person.a= 1;
person['a']= 1;     //字面量
person= {a: 1}

那么定义javascript对象属性有哪些高级的方法呢,这是我们今天讨论的重点。
ECMAScript有两种属性:数据属性和访问器属性。

数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值。
是不是一脸懵逼,我们还是用例子来讲解吧。

var person ={}
Object.defineProperty(person, "name", {
    writable: false,
    value: "Nicholas"
});
alert(person.name);      //"Nicholas"
person.name= "Greg";
alert(person.name);    //"Nicholas"

在上面的例子中,我们定义属性用了一个defineProperty的方法,这个方法是针对Object这个根对象进行调用的,而这个方法接收的第三个参数为我们上文提到的数据属性。是不是渐渐明白了。

数据属性有四个描述其行为的特性。

对于在一开始介绍的设置属性的一般方法它们的Configurable、Enumerable、Writable特性被设置为true, 而Value特性被设置为特定的值。

而在上面给出的例子中,writable被设置为false,所以我们在后面想要更改name的属性值发现是无法修改的。


访问器属性

访问器属性和数据属性有什么区别呢,区别在与其属性不包含Writable,和Value,取而代之的是set和get。同样我们通过一个例子的深入理解。

var book={
    _year: 2004,   //私有属性
    edition: 1
};;

Object.defineProperty(book, "year",{   //设置访问器属性
    get: function(){
        return this._year;
    },
    set: function(newValue){
        if(newValue>2014){
            this._year = newValue;
            this.edition +=newValue-2014;
        }
    }
});
book.year = 2015;
alert(book.edition);

很容易发现访问器属性在我们想要设置或者修改某个值得时候是非常有用的,并且可以通过他监听某个属性值是否发生了变化,这个最大的用途是在我们熟知的MVVM框架里头,利用界面和数据的绑定很快的让数据的改动体现在界面,很简单就是在set里面添加一个监听器,当一个属性发生变化后我们通知界面进行修改。

所以说访问器属性为我们后续的设计模式提供了一扇窗户。

—参考
javascript高级程序设计(第三版)

相关文章

网友评论

      本文标题:深入理解javascript的对象属性——数据属性和访问器属性

      本文链接:https://www.haomeiwen.com/subject/ndstaxtx.html