JavaScript--我发现，原来你是这样的JS：面向对象编程OOP[1]--(理解对象和对象属性类型)

一、介绍

老铁们，这次是JS的面向对象的编程OOP（虽然我没有对象，心累啊，但是可以自己创建啊，哈哈）。

JS高程里第六章的内容，这章内容在我看来是JS中很难理解的一部分。所以分成三篇博客来逐个理清。

这是第一篇：理解对象，认识对象属性的类型。

二、理解对象

书中原话--ECMA-262中把对像定义为：无序属性的集合。其中属性可以是基本值，对象或者是函数。

1.我们通俗点理解一下

对象是一个真实存在的东西，就像世上每一个人、每一个物体一样，它有自己的属性，行为。也就是说各种属性集合在一起就是一个具体的对象。（你自己也是一个对象）

举一些生活例子：

小明：有名字，年龄（基本值），说话（方法） 等属性

电脑：有颜色，大小（基本值），cpu（对象）等属性

2.我们js代码理解一下：

1.用new Object()构造函数方法来创建对象

//obj是我创建的一个对象，它有name、age属性，sayHi方法
var obj = new Object();
obj.name = "ry";
obj.age="3";
obj.sayHi = function(){
    console.log("Hi");
}

2.用对象字面量创建对象

//创建一个person对象
var person = {
    name : "ry",
    age : 3,
    sayBye: function(){
        console.log('bye bye');
    }
};

上面说这么多，就想说明白js中的对象是什么。总之：无序的属性的集合 == 对象

三、理解对象属性的类型

1.对象属性有类型？奇怪吗？

一开始我们对未知的事物都会充满的疑惑和惊讶，但是知识这东西，我们更多的选择去接受它，然后理解它，最后运用它。

• 可能你会问对象属性还有类型？一开始我也觉得惊讶。
• 没错，对象属性是有类型的，可能你不能理解，但只能接受。

2.对象属性类型有哪些：数据属性和访问器属性

对于对象属性类型这块，我们只是简单的去了解有什么类型，类型区别。 这也有助于我们去了解对象。

1.数据属性（最常用的）

既然有不同的类型，那肯定要有一个东西去区分他们，那这个东西就是特性

• js中用特性这东西去区分属性类型。对于数据属性，它有以下4个特性去说明它是数据属性。

名字	作用
[[Configurable]]	表示能否通过delete来删除属性，能否修改属性的特性，或能否把属性设为访问器属性，默认true。
[[Enumerable]]	能不能通过for in枚举该属性，默认true。
[[Writable]]	能不能修改属性值，默认true。
[[Value]]	这个位置保存属性的值。比如下面的name属性，它的[[Value]]就保存"ry"这个字符串

• 数据属性长什么样子（也就那样，以前那样）

//一个对象
var person = {
    //这就是一个数据属性
    name:"ry";
};
console.log(person.name); //ry
//透过代码可以看出，以前我们定义对象属性就是数据属性，以前不知道它叫数据属性这个名字，但现在知道了。

• 测试一下特性吧。用Object.defineProperty()，修改特性用到这个函数Object.defineProperty():接受3个参数：属性所在对象，属性名字，描述符对象

//创建一个对象person
var person = {};
//添加一个数据属性
person.name = "ry";
//使用Object.definProperty方法
Object.definProperty(person,"name",{
    //writable表示能不能修改,false表示不能
    writable:false,
})

console.log(person.name);  "ry"
//修改name的值
person.name = "yuan";
//name的值不变，修改不了
console.log(person.name);  "ry"

除此之外还可以修改其他特性，大家可以试试哦。

2.访问器属性

访问器属性的4个特性：

名字	作用
[[Configurable]]	表示能否通过delete来删除属性，能否修改属性的特性，或能否把属性设为访问器属性，默认true。
[[Enumerable]]	能不能通过for in枚举该属性，默认true。
[[Get]]	读取时调用的函数，默认undefined
[[Set]]	写入时调用的函数，默认undefined

访问器属性特性不包含数据值，它们包含一对getter和setter函数(但这两个不是必须的)

访问器属性不能直接定义，只能通过Object.defineProperty()来定义。

▶ 书上的例子：

//一个对象
var book = {
    _year : 2004,
    edition : 1
};

//定义一个叫year的访问器属性
Object.defineProperty(book,"year",{
    //设置get特性，这是一个方法
    get: function(){
        retrun this._year;
    };
    //设置set特性
    set:function(newValue){
        if(newValue > 2004){
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
})；

//测试一下,给访问器属性赋值，即写入year，它会调用set的方法
book.year = 2005;
//上面的2005大于2004，set方法中会改变edition的值，变成2
console.log(book.edtion); //2

▶ 特别提醒：Objecct.defineProperty() 的兼容性：IE9+,Firefox4+,chrome，Opera12+，Safari 5+

▶ 除此之外

• 还有一次定义多个属性的方法：Objecct.defineProperties() ， 兼容性：IE9+,Firefox4+,chrome，Opera12+，Safari 5+。

• 读取属性特性方法：Object.getOwnPropertyDescriptor()，接受两参数：属性所在对象和要读取器描述符的属性名称。 返回一个对象。

//实践比较容易理解
//一个对象
var book = {};
//用Objecct.defineProperties()方法设置多个属性
Object.defineProperties(book,{
    _year:{
        value:"ry"
    },
    edition:{
        value:1
    },
    year:{
        get:function(){
            return this._year ;
        }
    }
});

//函数返回一个对象
//descriptor对象有configurable，enumerable，writable，value属性/（如果是访问器属性:configurable，enumerable，get，set）
//_year是数据属性
var descriptor = Object.getOwnPropertyDescriptor(book,"_year");
console.log(descriptor.value);  //2004
console.log(descriptor.configurable);  //true
console.log(descriptor.enumerable);  //true
//数据属性没有get
console.log(descriptor2.get); //undefined

//year是访问器属性
var descriptor2 = Object.getOwnPropertyDescriptor(book,"year");
//访问器属性有get
console.log(descriptor2.get); //function

四、小结

这次介绍主要介绍：

1.什么是对象：无序属性的集合。

2.还有属性的类型：数据属性和访问器属性。还有两种属性的各个特性，区别。不用深入，起码知道有这些东西。

3.属性的类型有个了解就好，主要用的还是数据属性（平时用的）。

不忘初心，方得始终。觉得写得很好就赞一下吧，也可以关注博主哦

同系列前几篇：

第一篇：JavaScript--我发现，原来你是这样的JS（一）（初识）

第二篇：JavaScript--我发现，原来你是这样的JS（二）（基础概念--躯壳篇）

第三篇：JavaScript--我发现，原来你是这样的JS（三）（基础概念--灵魂篇）

第四篇：JavaScript--我发现，原来你是这样的JS（四）（看看变量，作用域，垃圾回收是啥）

第五篇：JavaScript--我发现，原来你是这样的JS（引用类型不简单[上篇]，且听我娓娓道来）

第六篇：JavaScript--我发现，原来你是这样的JS（引用类型不简单[下篇]，基本包装类型与个体内置对象）

本文出自博客园：http://www.cnblogs.com/Ry-yuan/

作者：Ry（渊源远愿）

欢迎转载，转载请标明出处，保留该字段。