首页
五种创建属性的方式
五种创建属性的方式
版权声明:本文为原创内容,转载请声明出处。
原文地址:http://www.excelib.com/article/260/show

我们这里主要指创建对象的命名属性,对象的命名属性一共有五种创建方式,学生下面分别来给大家讲解。

使用花括号创建

这种方式是在使用花括号创建对象时创建属性,比如下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
     v:1.0,
     getV: function () {
         return this.v;
     },
     _name:"object",
     get name(){
         this._name;
     },
     set name(name){
         this._name = name;
     }
 }

这里使用花括号创建了obj对象,其中包含直接量属性(v)、function对象属性(getV)以及访问器属性(name)。注意,在定义访问器属性的gettersetter方法时没有冒号。

使用点操作符创建

当使用点操作符给一个对象的属性赋值时,如果对象存在此属性则会修改属性的值,否则会添加相应的属性并赋予对应的值,比如下面的例子

1
2
3
var person = {name:"张三"};
 person.name = "李四";  //修改原有属性的值
 person.age = 88;        //添加新属性

这里首先使用花括号定义了person对象,其中包含name属性,当给他的name属性赋予新值时会改变其name属性的值,而当给age属性赋值时由于person原来没有age属性,所以会先添加age属性,然后再将其值设置为88

function中使用this创建属性其实就是这种添加属性方式的一种特殊用法,因为在function创建object类型对象时其中的this就代表创建出来的对象,而且刚创建出来的对象是没有自定义的命名属性的,所以使用this和点操作符就可以将属性添加到新创建出来的对象上了,比如下面的例子

1
2
3
4
5
function Person(){
     this.name = "孙悟空";
 }
 var person = new Person();
 console.log(person.name);   //孙悟空

这里首先定义了function类型的Person对象,然后用其创建了person对象,创建时会自动调用Person方法体中的this.name = "孙悟空"语句,这时由于this所代表的person对象并没有name属性,所以就会自动给他添加name属性,这也就是为什么创建出的person对象会具有name属性的原因。

Object的create方法

Objectcreate方法学生在前面已经给大家介绍过了,他有两个参数,第一参数中的属性为创建出来对象的[[Prototype]]属性,第二个参数为属性描述对象。

Object的defineProperty、defineProperties方法

我们还可以使用ObjectdefinePropertydefineProperties方法给对象添加属性,defineProperty方法用于添加单个属性,defineProperties方法可以添加多个属性。

ObjectdefineProperty方法一共有三个参数,第一个是要添加属性的对象,第二个是要添加属性的属性名,第三个参数是属性的描述,前两个参数都很简单,第三个参数学生会在后面给大家详细讲解,我们先来看个例子

1
2
3
4
5
6
7
var obj = {};
 Object.defineProperty(obj, "color", {
     enumerable: true,
     value: "green"
 });
 console.log(Object.getOwnPropertyNames(obj));                     // ["color"]
 console.log(obj.color);                                           //green

这里我们就使用defineProperty方法给obj对象添加了color属性。

ObjectdefineProperties方法可以创建多个属性,他有两个参数,第一个参数是要添加属性的对象,第二个参数是属性描述对象,和create方法中的第二个参数一样,比如下面的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {};
 Object.defineProperties(obj,{
     name:{
         enumerable: true,
         writable: false,
         value: "lucy"
     },
     color:{
         enumerable: true,
         value: "green"
     }
 });
 console.log(Object.getOwnPropertyNames(obj));             // ["name", "color"]
 obj.name = "peter";
 console.log(obj.name);                                     //lucy

这里使用ObjectdefineProperties方法给obj对象添加了namecolor两个属性,这里name属性的writablefalse,所以objname属性是不可以修改值的,当我们将其值修改为peter后打印出的还是原来的lucy,而且这里writable的默认值就是false

通过prototype属性创建

使用function创建的object实例对象还可以使用function对象的prototype属性对象中的属性,这一点我们在前面已经多次使用过了,严格来说function对象的prototype中的属性并不会添加到创建出来的实例对象中,不过创建出来的对象可以调用,这样就相当于可以将prototype中的属性添加到创建出来的对象中了,所以我们如果给function添加了属性之后也就相当于给创建出来的对象添加了属性,而且在实例对象创建完成之后还可以再给function对象的prototype属性对象添加,比如下面的例子

1
2
3
4
function Shop(){}
 var shop = new Shop();
 Shop.prototype.type = "网络销售";
 console.log(shop.type);                     //网络销售

这里首先使用Shop创建了shop对象,然后给Shopprototype添加了type属性,这时调用shop.type也是可以获取到值的。其实在调用shop.type时因为shop没有type属性所以shop就会实时到Shopprototype中查找,而不是提前将Shopprototype属性对象保存起来,所以创建完shop对象后再修改Shopprototype属性也可以被shop实例对象调用。