javascript高级程序设计笔记-第六章（面向对象编程）

一、对象属性

1、属性类型

数据属性的特性：

[[Configurable]]：能否通过delete删除属性，默认值为true

[[Enumerable]]：能否通过for-in循环返回属性，默认值为true

[[Writable]]：能否修改属性的值，默认值为true

[[Value]]：包含这个属性的值，默认是undefined

直接在对象上定义的属性，[[Configurable]]、[[Enumerable]]、[[Writable]]都被设置为true，[[Value]]被设置为指定的值

Object.defineProperty()方法，可以修改属性默认的特性

//接收三个参数：属性所在对象、属性名字、描述符对象
//描述符对象的属性必须是configurable、enumerable、writable、value
var person = {};
Object.defineProperty(person, "name", {
writable: false,
value: "Nicholas"
});
alert(person.name);         //Nicholas
person.name = "Greg";
alert(person.name);         //Nicholas(属性值被设置为不可修改)

在调用Object.defineProperty()方法时，如果不指定，configurable、enumerable、writable的默认值都是false（与在对象上定义属性情况相反）

2、访问器属性的特性：

[[Configurable]]：能否通过delete删除属性，默认值为true

[[Enumerable]]：能否通过for-in循环返回属性，默认值为true

[[get]]：读取属性时调用的函数，默认值为undefined

[[set]]：写入属性时调用的函数，默认值为undefined

设置一个属性的值导致其他属性发生变化

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;
alert(book.edition);        //2

3、定义多个属性：

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() {
if (newValue > 2004) {
this._year = newValue;
this.edition += newValue - 2004;
}
}
}
});
//在book对象上定义了两个数据属性和一个访问器属性

4、读取属性的特性：

Object.getOwnPropertyDescriptor()读取给定属性的描述符，接收两个参数：属性所在对象、要读取其描述符的属性名称

//承接上例
var descriptor = Object.getOwnPropertyDescriptor(book, "_year");
alert(descriptor.value);            //2004
alert(descriptor.configurable);     //false

二、创建对象

1、工厂模式

function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "FE");
var person2 = createPerson("Greg", 27, "Doctor");

2、构造函数模式

//构造函数始终都应该以一个大写字母开头
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "FE");
var person2 = new Person("Greg", 27, "Doctor");
//不是同一个方法
alert(person1.sayName === person2.sayName); //false

与工厂模式区别：

没有显示创建对象

直接将属性和方法赋予this对象

没有return语句

调用构造函数经历四步：

创建一个新对象

将构造函数的作用域赋给新对象（因此this指向这个新对象）

执行构造函数中的代码

返回新对象

调用函数的几种方法：

//当作构造函数使用
var person = new Person("Nicholas", 29, "FE");
person.sayName();       //Nicholas
//作为普通函数使用
Person("Greg", 27, "Doctor");
window.sayName();       //Greg
//在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "John", 25, "Nurse");
o.sayName();            //John

3、原型模式

让所有对象实例共享原型所保存的的属性和方法

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "FE";
Person.prototype.sayName = function() {
alert(this.name);
};
var person1 = new Person();
person1.sayName();      //Nicholas
var person2 = new Person();
person2.sayName();      //Nicholas

alert(person1.sayName === person2.sayName); //true

简洁写法

function Person() {}
Person.prototype = {
name: "Nicholas",
age: 29,
job: "FE",
sayName: function() {
alert(this.name);
}
};
//区别是：constructor属性不再指向Person，而是指向Object构造函数(这种写法在重构原型函数)
//下面设置constructor属性，但其现在默认是可枚举的
function Person() {}
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "FE",
sayName: function() {
alert(this.name);
}
};
//下面是把上例的constructor属性可枚举改为原生的不可枚举
Object.defineProperty(Person.prototype, "constructor", {
enumerable: false,
value: Person
});

isPrototypeOf()方法，测试对象之间的关系

alert(Person.prototype.isPrototypeOf(person1));     //true
alert(Person.prototype.isPrototypeOf(person2));     //true

Object.getPrototypeOf()方法，取得原型对象中的值

alert(Object.getPrototypeOf(person1) === Person.prototype); //true
alert(Object.getPrototypeOf(person1).name);         //Nicholas

读取某个对象的属性时，首先从对象实例本身开始，如果没有找到，再继续搜索指针指向的原型对象

可以创建同名属性屏蔽原型中的属性，但是无法修改原型中的属性

hasOwnProperty()方法，检测一个属性是存在于实例中，还是存在于原型中

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "FE";
Person.prototype.sayName = function() {
alert(this.name);
};
var person1 = new Person();
alert(person1.name);                        //Nicholas
alert(person1.hasOwnProperty("name"));      //false

person1.name = "Greg";
alert(person1.name);                        //Greg
alert(person1.hasOwnProperty("name"));      //true

delete person1.name
alert(person1.name);                        //Nicholas
alert(person1.hasOwnProperty("name"));      //false

原型与in操作符：

单独使用in操作符，只要对象能够访问到给定属性就能返回true，而不管属性是在原型还是实例中

在for-in循环中，返回的是所有能够通过对象访问的、可枚举的属性，其中既包括实例中的属性、也包括原型中的属性

同时使用in操作符和hasOwnProperty()方法，可以确定该属性是存在于对象中，还是原型中

function hasPrototypeProperty(object, name) {
return !object.hasOwnProperty(name) && (name in object);
}

原型中的基本属性和方法（具体见基本概念中Object类型那一节）都不可枚举(后来添加到原型中的属性和方法默认可枚举)、实例中的添加的属性和方法默认可枚举（不使用Object.defineProperty()方法）

var o = {
name: "Nicholas"，
};
for (var propName in o) {
alert(propName);        //name
}
//o的原型中的基本属性和方法都没有枚举

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "FE";
Person.prototype.sayName = function() {
alert(this.name);
};
var keys = new Person();
for (var propName in keys) {
alert(propName);        //name,age,job,sayName
}
//后来添加到原型中的属性和方法默认可以枚举

Object.keys()方法，接收一个对象作为参数，返回该对象所有可枚举属性的字符串数组

function Person() {}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "FE";
Person.prototype.sayName = function() {
alert(this.name);
};
var keys = Object.keys(Person.prototype);
console.log(keys);      //["name", "age", "job", "sayName"]（原型的constructor属性默认不可枚举）

var p1 = new Person();
p1.name = "Bob";
p1.age = 31;
var p1keys = Object.keys(p1);
console.log(p1keys);            //["name", "age"]（只限该对象，不看Person.prototype）
//上下两例比较
var p1 = new Person();
p1.name = "Bob";
p1.age = 31;
for (var propName in p1) {
console.log(propName);  //name,age,job,sayName（该对象和原型中所有可枚举的）
}

Object.getOwnPropertyNames()方法，获得所有实例属性，无论是否可枚举

var keys = Object.getOwnPropertyNames(Person.prototype);
console.log(keys);          //["constructor", "name", "age", "job", "sayName"]

var p1 = new Person();
p1.name = "Bob";
p1.age = 31;
console.log(Object.getOwnPropertyNames(p1));    //["name", "age"]（只限该对象）

原型的动态性：对原型对象所做的任何修改都能够立即从实例上反映出来，但是通过简洁写法重写原型对象时，如果之前已经创建了实例，情况就不一样了

function Person() {}
var friend = new Person();
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "FE",
sayName: function() {
alert(this.name);
}
};
friend.sayName();           //报错

如图，因为实例中的指针仅指向原型，而不指向构造函数，所以原型修改为另一个对象，就等于切断了构造函数与最初原型之间的联系



原型对象的问题

function Person() {}
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "FE",
friends: ["Bob", "Amy"],
sayName: function() {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
console.log(person1.friends);       //["Bob", "Amy", "Van"]
console.log(person2.friends);       //["Bob", "Amy", "Van"]
//Van添加到原型对象中

4、组合使用构造函数和原型模式

构造函数用于定义实例属性，原型模式定义方法和共享的属性。

每个实例都有自己的一份实例属性的副本，但同时又共享着对方法的引用

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Bob", "Amy"];
}
Person.prototype = {
constructor: Person,
sayName: function() {
alert(this.name);
}
}

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

person1.friends.push("Van");
console.log(person1.friends);       //["Bob", "Amy", "Van"]
console.log(person2.friends);       //["Bob", "Amy"]
console.log(person1.friends === person2.friends);   //false
console.log(person1.sayName === person2.sayName);   //true

三、继承

1、原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法：

让原型对象等于另一个对象的实例，此时原型对象将包含一个指向另一个原型的指针，相应的另一个原型也包含一个指向另一个构造函数的指针

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
};
function SubType() {
this.subproperty = false;
}
//继承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function() {
return this.subproperty;
}
//创建实例
var instance = new SubType();
alert(instance.getSuperValue());        //true

原型链的问题

function SuperType() {
this.colors = ["red", "green", "blue"];
}
function SubType() {}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);      //["red", "green", "blue", "black"]
var instance2 = new SubType();
console.log(instance2.colors);      //["red", "green", "blue", "black"]

当SubType通过原型链继承了SuperType之后，SubType.prototype就变成了SuperType的一个实例，因此它也拥有了一个它自己的colors属性（类似于专门创建了一个SubType.prototype.colors属性一样）。结果SubType所有实例都会共享这个colors属性。对其中一个实例的colors进行修改，其它实例的colors属性也会同步修改

注意不要使用对象字面量创建原型方法，因为这样会重写原型链

2、借用构造函数

在子类型构造函数的内部调用超类型构造函数

function SuperType() {
this.colors = ["red", "blue", "green"];
}
function SubType() {
SuperType.call(this);           //借调超类型的构造函数
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);      //["red", "green", "blue", "black"]
var instance2 = new SubType();
console.log(instance2.colors);      //["red", "blue", "green"]

3、组合继承

使用原型链实现对原型属性和方法的继承，而通过借用构造函数实现对实例属性的继承

function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
//借用构造函数，继承属性
SuperType.call(this, name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constrcutor = SubType;
SubType.prototype.sayAge = function() {
console.log(this.age);
};
//创建实例
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
console.log(instance1.colors);  //["red", "blue", "green", "black"]
instance1.sayName();            //Nicholas
instance1.sayAge();             //29
var instance2 = new SubType("Greg", 28);
console.log(instance2.colors);  //["red", "blue", "green"]
instance2.sayName();            //Greg
instance2.sayAge();             //28

4、原型式继承

借助原型基于已有的对象创建新对象

function object(o) {
function F() {}
F.prototype = o;
return new F();
}
var person = {
name: "x",
friends: ["a", "b", "c"]
};
var person1 = object(person);
person1.name = "y";
person1.friends.push("d");

var person2 = object(person);
person2.name = "z";
person2.friends.push("e");

console.log(person.friends);        //["a", "b", "c", "d", "e"]

5、寄生式继承

创建一个仅用于封装继承过程的函数

function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function createAnother(original) {
var clone = object(original);
clone.sayHi = function() {
alert("hi");
};
return clone;
}
var person = {
name: "x",
friends: ["a", "b", "c"]
};
var person1 = createAnother(person);
person1.sayHi();                //"hi"
console.log(person1.friends);   //["a", "b", "c"]
//新对象不仅有person所有的属性和方法，还有自己的sayHi()方法

6、寄生组合式继承

function inheritPrototype(subType, superType) {
var prototype = Object(superType.prototype);    //创建对象
prototype.constrcutor = subType;                //增强对象
subType.prototype = prototype;                  //指定对象
}
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
alert(this.name);
};
function SubType(name, age) {
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}