js高级程序设计笔记 -- 属性类型以及创建对象

1.属性类型

ECMAScript中有两种属性：数据属性和访问器属性

1.数据属性：

数据属性包含一个数据值的位置，在这个位置可以读取和写入值
[[ Configurable ]] : 表示能否删除属性或者修改属性为访问器属性。默认值为true;
[[ Enumerable ]] : 表示能否通过for-in 循环返回属性。默认值为true;
[[ Writable ]] : 表示能否修改属性的值 。默认值为true;
[[ Value ]] : 包含这个属性的数据值，读取属性值的时候从这个位置读取，写入属性值的时候，把新值保存在这个位置 默认值为 undefined;

修改数据属性默认的特性，必须使用 ECMAScript5 的object.defineProperty() 方法。这个方法接受三个参数：
属性所在的对象，属性的名字和一个描述符对象，其中描述符对象的属性必须是： configurable, enumerable, writable, value.

var person = {};
Object.defineProperty(person, "name", {
writable: false,
value: "mnixu"
})

console.log(person.name) //"mnixu"
person.name = "xu"
console.log(person.name) //"mnixu"

var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "mnixu"
})
console.log(person.name) //"mnixu"
delete person.value;
console.log(person.name) //"mnixu"

var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "mnixu"
})
//拋出錯誤
Object.defineProperty(person, "name", {
configurable: true,
value: "mnixu"
})

注意：一但把属性定义为不可配置的，就不能再把它变为可配置的。
在调用Object.defineProperty()方法创建一个新的属性时，如果不指定，configurable, enumerable, writable,特性的默认值都为false,
如果调用Object.defineProperty()方法只是修改已定义的属性，则无限制
 

2.访问器属性：

访问器属性不包含数据值：他们包含一对getter和setter函数。
也有四个特性。
[[ Configurable ]] : 表示能否删除属性或者修改属性为访问器属性。默认值为true;
[[ Enumerable ]] : 表示能否通过for-in 循环返回属性。默认值为true;
[[ get ]] : 在读取属性时调用的函数。默认值为undefined;
[[ set ]] : 在写入属性是调用的函数。 默认值为undefined;

访问器属性不能直接定义，必须 使用object.defineProperty() 方法 来定义

var book = {
_year: 2004,
edition: 1
}
Object.defineProperty(book, "year", {
get: function () {
return this._year;
},
set: function (newValue) {
if (newValue > 2004) {
this._year = newValue;
this.edition += newValue - 2004
}
}
})

book.year = 2005;
console.log(book.edition)

_year前面的下划线是用于表示只能通过对象方法访问的属性。
getter函数返回_year的值，setter函数通过计算来确定正确的版本，修改year属性为2005时候会导致_year变为2005
edition变为2，这是使用访问器属性的常见方式，即设置一个属性的值会导致其他属性发生变化。

2.定义多个属性

 使用Object.defineProperties()方法可以定义多个属性

var book = {};
Object.defineProperties(book, {
_year: {
writable: true,
value: 2004
},
edition: {
writable: true,
value: 1
},
year: {
get: function () {
return this._year;
},
set: function (newValue) {
if (newValue > 2004) {
this._year = newValue;
this.edition += newValue - 2004
}
}
}
});

这个定义的最终对象和上面定义的对象相同，唯一的区别是这里的属性都是在同一时间创建的。

3.读取属性的特性

使用Object.getOwnPropertyDescriptor() 可以取得给定义属性的描述符
例子：

var descriptor = Object.getOwnPropertyDescriptor(book, "_year")
console.log(descriptor.value) //2004

var descriptor = Object.getOwnPropertyDescriptor(book, "year")
console.log(descriptor.enumerable)  //false
console.log(typeof descriptor.get)  //"function"

2.创建对象

1.构造函数模式

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name)
};
}

var person1 = new Person("mnixu", "20", "Student");
var person2 = new Person("zhangsan", "11", "Student");
//person1 和 person2 都保存着Person 的不同实例。都有一个constructor（构造函数）属性，该属性指向Person
console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true

//对象的constructor属性最初使用来标识对象类型的。但是，检测对象类型使用instanceof操作符更可靠
console.log(person1 instanceof Person); //true
console.log(person1 instanceof Object); //true
console.log(person2 instanceof Person); //true
console.log(person2 instanceof Object); //true

构造函数也可以当做普通函数来调用：

//当做构造函数使用
var person = new Person("mnixu", "20", "Student");
person.sayName(); //"mnixu"

//当做普通函数使用
Person("zhangsan", "20", "Student"); //添加到window
window.sayName(); //"zhangsan"

//在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "lisi", "20", "Student");
o.sayName(); //"lisi"

构造函数模式虽然好用，但是使用构造函数有一个主要问题，就是每个方法都要在每个实例上重新创建一遍。
前面的person1 和 person2 都有一个sayName()方法，但是两个方法不是同一个Function实例。
在ECMAScript中的函数就是对象，每定义一个函数，就是实例化一个对象。

console.log(person1.sayName == person1.sayName); //false

2.原型模式

我们创建的每一个函数都有一个prototype（原型）属性。这个属性是一个指针，指向一个对象。
使用原型对象可以让所有对象实例共享它所包含的属性和方法。

function Person() { };

Person.prototype.name = "mnixu";
Person.prototype.age = "20";
Person.prototype.job = "Student";
Person.prototype.sayName = function () {
console.log(this.name);
};

var person1 = new Person();
person1.sayName(); //"mnixu"
var person2 = new Person();
person2.sayName(); //"mnixu"

console.log(person1.sayName == person1.sayName); //true

创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性；至于其他方法，都是从Object继承过来的。
当我们调用构造函数创建一个新的实例后，该实例内部讲包含一个指针（内部属性），指向构造函数的原型对象。
ES5管这个指针叫[[ Prototype ]] 。我们可以通过__proto__这个内置属性来访问

console.log(person1.__proto__ === Person.prototype); //true
console.log(Person.prototype.__proto__ === Object.prototype); //true
console.log(Object.prototype.__proto__) //null
当我们访问对象的某个属性时，会从对象实例本身开始寻找，没找到就继续搜索指针指向的原型对象，直至找到顶层null为止
我们把上面的例子串起来就是原型链
person1 -->　Person.prototype --> Object.prototype --> null
原型对象prototype中都有个预定义的constructor属性，用来引用它的函数对象。这是一种循环引用
Person.prototype.constructor === Person //true
Function.prototype.constructor === Function //true
Object.prototype.constructor === Object //true

原型模式也是有缺点的，但是原型中的所有属性是被很多实例共享，对于包含引用类型值的属性来说，可能会有很多问题
例子：

function Person() { };

Person.prototype = {
constructor: Person,
name: "mnixu",
age: 20,
job: "Student",
friends: ["zhangsan", "lisi"],
sayName: function () {
console.log(this.name)
}
}

var person1 = new Person();
var person2 = new Person();

person1.friends.push("wangwu");
console.log(person1.friends); //["zhangsan", "lisi", "wangwu"]
console.log(person2.friends); //["zhangsan", "lisi", "wangwu"]

console.log(person1.friends === person2.friends) //true

3.组合使用构造函数模式和原型模式

创建自定义类型的常见方式就是组合使用构造函数模式和原型模式，构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。
所以，每个实例都有自己的一份实例属性副本，但同时又共享着对方法的引用。

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["zhangsan", "lisi"];
}

Person.prototype = {
constructor: Person,
sayName: function () {
console.log(this.name)
}
}

var person1 = new Person("mnixu", 20, "Student");
var person2 = new Person("lisi", 20, "Student");

person1.friends.push("wangwu")

console.log(person1.friends); //["zhangsan", "lisi", "wangwu"]
console.log(person2.friends); //["zhangsan", "lisi"]
console.log(person1.friends === person2.friends)  //false
console.log(person1.sayName === person2.sayName)  //true