JavaScript中的对象描述符(属性特性)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript中的对象描述符(属性特性)相关的知识,希望对你有一定的参考价值。

  我们先创建一个对象:

var person = {
  name: "Nicholas",
  _job: "Software Engineer",
  sayName: function(){
    alert(this.name);
  },
  get job(){
        return this._job;              
    },
  set job(newJob){
        this._job=newJob;   
    }
}

  在这个对象中,我们定义了一个name属性和一个_job属性;至于以set和get开头的两处代码,他们共同定义了一个属性job。明显属性job和_job、name的是不同的。是的,javascript中的对象有两种不同类型的属性:数据属性和访问器属性。

  name和_job是数据属性,job是访问器。数据属性和访问器属性的最大的不同就在于:当访问一个访问器属性时,得到get后面函数的返回值;给一个访问器属性赋值时,执行的是set后面的函数,这个函数以赋的值为参数:

console.info(person.job);//Software Engineer
person.job="Coder";
console.info(person.job);//Coder
console.info(person._job);//Coder

  在set函数中我们通过this改变了_job的值(this指向person这个对象);

  在了解了对象属性的类型后,我们再来看看对象属性特性。每个对象的属性在创建时都带有一些特征值,JavaScript通过这些特征值来定义它们的行为。

我们在创建person对象时没有为它的属性们直接指定特征值,JavaScript自动为它们创建了属性特性。在ES3中属性特性不可访问,但是ES5中属性的特性可以通过Object.getOwnPropertyDescriptorsObject.getOwnPropertyDescriptor得到:

var descriptors= Object.getOwnPropertyDescriptors(person)
//descriptors的内容如下;
{
    age:{value: 29, writable: true, enumerable: true, configurable: true}
    job:{enumerable: true, configurable: true, get: ?, set: ?}
    name:{value: "Nicholas", writable: true, enumerable: true, configurable: true}
    sayName:{writable: true, enumerable: true, configurable: true, value: ?}
    _job:{value: "Coder", writable: true, enumerable: true, configurable: true}
}

  Object.getOwnPropertyDescriptors返回一个对象,包含了描述person对象的所有属性的特性。其中每一个属性的特性用一个对象表示,我们叫它属性描述符。我们可以看到:数据属性的描述符有四个属性:value,writable enumerable ,configurable ;访问器属性的描述符也有四个属性:enumerable ,configurable,get,set ;

那么我们分别看下数据属性及访问器属性的这几个描述符:

数据属性

  数据属性的描述符的有四个属性分别是:

   1.value:包含这个属性的数据值。读取属性的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。默认为undefined.

  2.writable:表示能否修改属性的值。是一个bool值,默认为true

  3.enumerable:属性是否可枚举,即能否通过for-in循环返回属性。是一个bool值,默认为true

  4.configrable:属性是否可配置。即属性能否通过delete删除,能否修改属性的特性,或者能否把属性修改为访问器属性。是一个bool值,默认为true

  我们最初开始创建的person对象的属性name,它的value为“Nicholas”,其他描述符为true。

请看例子:

访问器属性 

  访问器属性的描述符的有四个属性分别是:

  1.get:在读取属性时调用的函数。默认值为 undefined。

  2.set:在写入属性时调用的函数。默认值为 undefined

  3.enumerable:属性是否可枚举,即能否通过for-in循环返回属性。是一个bool值,默认为true

  4.configrable:属性是否可配置。即属性能否通过delete删除,能否修改属性的特性,或者能否把属性修改为数据属性。是一个bool值,默认为true

  我们最初开始创建的person对象的属性job,它的get和set值分别是我们指定的函数,其他描述符为true。

  要修改属性默认的特性,必须使用 ECMAScript 5 Object.defineProperty或 Object.defineProperties

  有了定义属性特性的方法,那我们通过代码来探索下这些属性特性的作用:

  数据属性:

var person ={};
//除了configrable之外,其他三个属性相互之间不会影响,读者可以自己测试

console.info(‘---------------------writable start--------------------------------‘);
Object.defineProperty(person, "name", {
  writable: false,
  enumerable:true,
  configurable:true,
  value: "Nicholas"
});
console.info(person.name); //"Nicholas"
person.name = "Greg";
//writable为false,属性不可修改
console.info(person.name); //"Nicholas"

//writable为false,但configrable为true,我们可以重新配置属性描述符,
Object.defineProperty(person, "name", {
  writable: false,
  enumerable:true,
  configurable:true,
  value: "John"
});
console.info(person.name)//John

delete person.name
//但configrable为true,属性可以被删除
console.info (person.name)//undefined 

console.info(‘---------------------writable end--------------------------------‘);

console.info(‘---------------------enumerable start--------------------------------‘);
var person={};
Object.defineProperty(person, "name", {
  writable: false,
  enumerable:true,
  configurable:true,
  value: "Nicholas"
});


//enumerable为true属性可枚举
for(var prop in person){
  console.info(prop)//name
}

Object.defineProperty(person, "name", {
  writable: false,
  enumerable:false,
  configurable:true,
  value: "Nicholas"
});


//enumerable为false属性不可枚举,循环体不执行
for(var prop in person){
  console.info(prop)//
}

console.info(‘---------------------enumerable end--------------------------------‘);
console.info(‘---------------------configurable start--------------------------------‘);

var person={};
Object.defineProperty(person, "name", {
  writable: true,
  enumerable:true,
  configurable:false,
  value: "Nicholas"
});
//configurable为false,writable为true,属性仍然可修改
person.name="John"
console.info(person.name);//John

//configurable为false,writable为true,仍然可以通过配置的方式改变属性值
Object.defineProperty(person, "name", {
    writable: true,
    enumerable:true,
    configurable:false,
    value: "Nicholas"
});

console.info(person.name)

//configurable为false,enumerable为ture,属性可枚举
for(var prop in person){
  console.info(prop)//name
}

//configurable为false,我们仍然可以把writable属性由true改为false
Object.defineProperty(person, "name", {
  writable: false,
  enumerable:true,
  configurable:false,
  value: "Nicholas"
});
console.info(Object.getOwnPropertyDescriptor(person,"name"))//{value: "Nicholas", writable: false, enumerable: true, configurable: false}

//configurable为false,writable为false,不能通过配置改变value的值
try{
  Object.defineProperty(person, "name", {
    writable: false,
    enumerable:true,
    configurable:false,
    value: "John"
  });
}catch(error){
  console.info("value change error");
  console.info(Object.getOwnPropertyDescriptor(person,"name"))//{value: "Nicholas", writable: false, enumerable: true, configurable: false}
}


//configurable为false,但是不能把writable属性由false改为true
try{
  Object.defineProperty(person, "name", {
    writable: true,
    enumerable:true,
    configurable:false,
    value: "Nicholas"
  });
}catch(error){
  console.info("writable false to true error")
  console.info(Object.getOwnPropertyDescriptor(person,"name"))//{value: "Nicholas", writable: false, enumerable: true, configurable: false}
}

//configurable为false,不能改变enumerable的值
try{
  Object.defineProperty(person, "name", {
    writable: false,
    enumerable:false,
    configurable:false,
    value: "Nicholas"
  });
}catch(error){
  console.info("enumerable change error");
  console.info(Object.getOwnPropertyDescriptor(person,"name"))//{value: "Nicholas", writable: false, enumerable: true, configurable: false}
}

var person={};
Object.defineProperty(person, "name", {
  writable: true,
  enumerable:true,
  configurable:true,
  value: "Nicholas"
});

//configurable为true,可以把数据属性修改为访问器属性
try{
  Object.defineProperty(person, "name", {
    get: function(){return "Nicholas"},
    enumerable:true,
    configurable:false
  });
}catch(error){
  console.info("get error");
}
console.info(Object.getOwnPropertyDescriptor(person,"name"))//{set: undefined, enumerable: true, configurable: false, get: ?}


var person={};
Object.defineProperty(person, "name", {
  writable: true,
  enumerable:true,
  configurable:false,
  value: "Nicholas"
});
//configurable为false,不可以把数据属性修改为访问器属性
try{
  Object.defineProperty(person, "name", {
    get: function(){return "Nicholas"},
    enumerable:true,
    configurable:false
  });
}catch(error){
  console.info("get error");
}
console.info(Object.getOwnPropertyDescriptor(person,"name"))//{value: "Nicholas", writable: true, enumerable: true, configurable: false}

console.info(‘---------------------configurable end--------------------------------‘);

 访问器属性

//访问器属性

console.info("------------------------------------------------------");
var person ={_name:"Nicholas"};
Object.defineProperty(person, "name", {
  get: function(){
          console.info("get 被调用")
          return this._name
       },
  set:function(newName){
         console.info("set 被调用")
         this._name=newName
      },
  enumerable:true,
  configurable:true,
});
person.name;//get 被调用
person.name="John";//set 被调用

console.info("------------------------------------------------------");
console.info("----------------------不设set 开始--------------------------------");

var person ={_name:"Nicholas"};

Object.defineProperty(person, "name", {
  get: function(){
          console.info("get 被调用")
          return this._name
       },
  enumerable:true,
  configurable:true,
});
person.name;//get 被调用
person.name="John";//没有设置set,什么也没发生
console.info(person.name)//Nicholas,

console.info("----------------------不设set 结束--------------------------------");

console.info("----------------------不设get 开始--------------------------------");

var person ={_name:"Nicholas"};

Object.defineProperty(person, "name", {
  set:function(newName){
         console.info("set 被调用")
         this._name=newName
      },
  enumerable:true,
  configurable:true,
});
console.info(person.name);//没有get,得到 undefined
console.info(person._name);//Nicholas
person.name="John";//set 被调用
console.info(person._name)//John,通过set,_name的值被改变

console.info("----------------------不设get 结束--------------------------------");

console.info("----------------------不设get set开始--------------------------------");
//虽然不报错,但是这个属性没有任何意义
var person ={_name:"Nicholas"};
Object.defineProperty(person, "name", {
  enumerable:true,
  configurable:true,
});
console.info("----------------------不设get 结束--------------------------------");

console.info("----------------------enumerable 开始--------------------------------");
var person ={_name:"Nicholas"};
Object.defineProperty(person, "name", {
  get: function(){
          console.info("get 被调用")
          return this._name
       },
  set:function(newName){
         console.info("set 被调用")
         this._name=newName
      },
  enumerable:true,
  configurable:true,
});
for(var prop in person){
  console.info(prop)//_name,name
}

Object.defineProperty(person, "name", {
  get: function(){
          console.info("get 被调用")
          return this._name
       },
  set:function(newName){
         console.info("set 被调用")
         this._name=newName
      },
  enumerable:false,
  configurable:true,
});
for(var prop in person){
  console.info(prop)//_name
}
console.info("----------------------enumerable 结束--------------------------------");

console.info("----------------------configurable 开始--------------------------------");
var person ={_name:"Nicholas"};
Object.defineProperty(person, "name", {
  get: function(){
          console.info("get 被调用")
          return this._name
       },
  set:function(newName){
         console.info("set 被调用")
         this._name=newName
      },
  enumerable:true,
  configurable:false,
});

person.name;//get 被调用
person.name="John";//set 被调用
console.info(person.name);//John

//报错
try{
  Object.defineProperty(person, "name", {
    get: function(){
            console.info("get 被调用")
            return this._name
         },
    set:function(newName){
           console.info("set 被调用")
           this._name=newName
        },
    enumerable:true,
    configurable:false,
  });
}catch(e){
  console.info("不能重新定义name的属性标识符")
}

//报错
try{
  Object.defineProperty(person, "name", {
    value:"123",
    writable:true,
    enumerable:true,
    configurable:false,
  });
}catch(e){
  console.info("不能重新定义name的属性标识符")
}

console.info("----------------------configurable 结束--------------------------------");

 

 总结一下:

  1.writable为true,属性值就可以修改,无论是通过.运算符还是通过Object.defineProperty方法;

  2.writable为false,不能通过.运算符修改属性。但是在configurable为true的情况下可以通过通过Object.defineProperty方法重新设置value值,从而修改属性值;

  3.只要enumerable为true,属性就可枚举,为false则不可枚举;

  4.configurable为true的情况下,可以对属性描述符对象进行任何修改;

  5.configurable为fasle的情况下,可以通过Object.defineProperty把writable改为true,在writabe为true的情况下,可以修改value的值。

  6.configurable为false的情况下,除第5条的所述的情况外,不能通过Object.defineProperty修改属性的任何特性值。

可扩展性

  ES5定义了三个方法Object.preventExtensionsObject.sealObject.freeze分别定义了不同级别的可扩展性。可点击连接前往MDN阅读;

最后:get、set 与继承

function Person(){}

var p=Person.prototype;
p._name="John";
Object.defineProperty(p,"name",{
    get: function(){return this._name},
    set: function(newName){ this._name=newName},
    enumerable:true,
    configurable:true
})

var person=new Person();
console.info(person.name)//John
console.info(person.hasOwnProperty("_name"))//false

//虽然name属性的set get方法是定义在原型中的
//但是通过person调用时,它们的this属性会指向person
//所以通过person.name设置属性时,执行set方法中的this._name=newName时,
//会给person对象添加_name属性,并把newName赋给person新建的属性_name;
person.name="Nicholas";
console.info(person.name);//Nicholas
console.info(p._name)//John
console.info(person.hasOwnProperty("name"))//false
console.info(person.hasOwnProperty("_name"))//true

 写的有点冗长,但是算是基本测试了各种情况,方便查阅;

  



以上是关于JavaScript中的对象描述符(属性特性)的主要内容,如果未能解决你的问题,请参考以下文章

JS面向对象篇理解对象及属性特性(属性描述符)

JS数据类型之Object(一)对象知识扫盲

深入理解JavaScript中的属性和特性

深入理解JavaScript中的属性和特性

深入理解JavaScript中的属性和特性

前端开发者进阶之ECMAScript新特性--Object.create