JS之property和attribute

原创 2017年01月03日 14:25:43

我第一次看到这两个的时候也没有太注意他们之间的区别,但直到有一天,我发现我不能再把这两个东西混为一谈了,我一定要整清楚到底是怎么回事,于是乎去了ECMA文档里查了查,在这里附上网址

http://www.ecma-international.org/ecma-262/6.0/#sec-call
是英文的文档,勉强看的懂,如果有哪里不对,希望大神们指正。

property(属性)我个人翻译成属性而,attribute(特性)我翻译成特性。

property:
官方的英文文档是这么描述的
part of an object that associates a key (either a String value or a Symbol value) and a value
一个对象的一部分,关联了键和值

attribute
官方的英文文档是这么描述的
internal value that defines some characteristic of a property
定义了属性的特征的内部值

我们先将定义仔细看完,之后在举例子详细看看

Property Attributes
属性的特性
Attributes are used in this specification to define and explain the state of Object properties. A data property associates a key value with the attributes
特性被用在规范中用来定义和解释对象属性的详细说明,一个数据属性通过特性关联了键值。
下表中列举了数据属性的特性,这是官网的一张截图

这里写图片描述

下面介绍一些访问器的特性
An accessor property associates a key value with the attributes
访问器属性关联的键值的特性
Attributes of an Accessor Property
访问器属性的特性,下面来自官网的一张截图
这里写图片描述
有get和set特性,还有上面介绍的两个特性

现在我们实地的敲敲代码,试试上面的特性
首先我们要了解一些方法

Object.defineProperty()//这个方法接受三个参数:属性所在的对象,属性的名字,和一个描述特性的对象(描述符对象)
Object.getOwnPropertyDescriptor() //接收两个参数(对象,属性名),用来获取属性中特性值
Object.defineProperties() //这个是批量添加特性,接受了两个参数(对象,属性组)

下面我们来使用以下

var person = {
    name: 'qfy',
    sex: '男'
}
 Object.defineProperty(person,'name',{   
       writable:false,   
 });
 person.name = 'xsh'
console.log(person.name)//qfy,这里的writable为false所以不可写
var nameAttr=Object.getOwnPropertyDescriptor(person,'name');   
console.log(nameAttr);
//configurable:true,enumerable:true,value:"qfy",writable:false
//这里是有默认值得,官网有,就不截图了。
Object.defineProperties(person,{
    name:{
        value:'xsh',
        writable:true
    },
    sex:{
        writable:false
    }
 });
console.log(person.name)//qfy
console.log(person.sex)//男
当把configurable设置为false,就不能从对象中删除属性,在严格模式下会导致错误.一旦把属性定义为不可配置,就不可以通过Object.defineProperty()方法再重新修改属性特性.不然会抛出错误

我们再来看下set和get这两个特性

Object.defineProperties(person,{
    name:{
        value:'xsh',
        writable:true
    },
    sex:{
        set: function(value){
            sex = value+'1'
        },
        get: function(){
            return sex
        }
    }

 });   
 person.sex = 'dsfsdfsdfsd'
console.log(person.sex)//dsfsdfsdfsd1,可以看出我们最后多了一个1

除了上面的在ES5多了一种创建对象的方法

Object.create(proto [, propertiesObject ])//大家可能很少注意到这个

使用方法也不是很难,第一个参数是构建时继承的原型,第二个参数就是属性对象

var Person = {
    sayName: function(){
        console.log(this.name)
    } 
}
var newPerson = {};
newPerson = Object.create(Person,{
            name:{
                value:'qfy',
                writable:true
            },
            age: {
                get: function() { return bar+1; },
                set: function(value) { bar=value*2 }
            }

        })
newPerson.age = 11;
console.log(newPerson.age)//23
newPerson.sayName()//qfy

所以总结一下,我感觉property是我们对象里,name,age这些对象,而attribute是描述这些对象的,像value,writable这类的。

版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript 中 Property 和 Attribute 的区别详解

property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴。 prope...
  • u013510614
  • u013510614
  • 2016年07月16日 13:17
  • 2170

JS中Attribute 和 property的区别

原文链接:http://web.jobbole.com/83129/
  • hellochenlu
  • hellochenlu
  • 2016年08月11日 21:58
  • 1232

JSPatch之—动态新增 Property

若要在 JS 为类新增 Property,可以使用 getProp() 和 setProp_forKey() 这两个接口。 注意 getProp() 无法获取在 OC 定义的 Propert...
  • pjk1129
  • pjk1129
  • 2016年03月31日 17:20
  • 2024

property.js

  • 2008年03月01日 11:16
  • 121KB
  • 下载

JavaScript Object.defineProperty()方法详解

Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。语法Object.defineProperty(obj, prop, ...
  • u011884290
  • u011884290
  • 2016年07月18日 14:10
  • 8821

Property和Attribute的区别

Property属于面向对象理论范畴。在使用面向对象思想编程的时候常常需要对客观事物进行抽象,再把抽象出来的结果封装成类,类中用来表示对象状态的成员就是property。Attribute则是编程语言...
  • just0kk
  • just0kk
  • 2016年08月10日 04:30
  • 2098

JS中Attribute 和 property的区别

对于Attribute 和 Property ,我们都称之为“属性”,那么他们到底有什么区别呢?上网搜了一些资料,在这总结一下我自己的理解。 1.Attribute 大家都知道,在DOM中的有三种节点...
  • Molly_Xu
  • Molly_Xu
  • 2016年04月12日 22:03
  • 1027

JS之property和attribute

我第一次看到这两个的时候也没有太注意他们之间的区别,但直到有一天,我发现我不能再把这两个东西混为一谈了,我一定要整清楚到底是怎么回事,于是乎去了ECMA文档里查了查,在这里附上网址 http://...
  • qq_26626113
  • qq_26626113
  • 2017年01月03日 14:25
  • 504

javascript对象的defineProperty方法解析

defineProperty是Object对象特有的方法,其作用是为对象定义新的属性和修改对象原有的属性。 调用形式为:Object.defineProperty(obj, prop, descri...
  • sinat_32290679
  • sinat_32290679
  • 2017年04月09日 16:08
  • 168

JS中的attribute和property的区别和联系

查了好久,终于查到一个靠谱的了!
  • mmayanfa
  • mmayanfa
  • 2014年06月23日 13:09
  • 747
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS之property和attribute
举报原因:
原因补充:

(最多只允许输入30个字)