观前提示:大部分都是书上的内容,个人理解的部分的较少,看我的笔记还不如去看书
第六章
一、理解对象
属性类型
1、数据属性(理解概念)
数据属性有4个描述其行为的特性
[[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
[[Enumerable]]:表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
[[Writable]]:表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
[[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为 undefined。
Object.defineProperty()方法:
接收三个参数:属性所在的对象、属性的名字和一个描述符对象。
其中,描述符(descriptor)对象的属性必须是: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" 修改失败
注意,一旦把属性定义为不可配置的(configurable: false), 就不能再把它变回可配置
如果不指定,configurable、enumerable 和 writable 特性的默认值都是 false
2、访问器属性
访问器属性不包含数据值;它们包含一对儿 getter和 setter函数(非必须)
[[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特 性,或者能否把属性修改为数据属性。对于直接在对象上定义的属性,这个特性的默认值为 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;
alert(book.edition); //2
在不支持 Object.defineProperty() 方法的浏览器中不能修改[[Configurable]] 和 [[Enumerable]]。
定义多个属性
Object.definePro- perties()方法:
可以通过描述符一次定义多个属性
接收两个对象参数:第一个对象是要添加和修改其属性的对象,第二个对象的属性与第一个对象中要添加或修改的属性一一对应
var book = {};
Object.defineProperties(book, {
_year: {
value: 2004
},
edition: {
value: 1
},
year: {
get: function(){
return this._year;
},
set: function(newValue){
if (newValue > 2004) {
this._year = newValue;
this.edition += newValue - 2004;
}
}
}
});
读取属性的特性
Object.getOwnPropertyDescriptor()方法:
可以取得给定属性的描述符
接收两个参数:属性所在的对象和要读取其描述符的属性名称。
返回值是一个对象,如果是访问器属性,这个对象的属性有 configurable、enumerable、get 和 set;如果是数据属性,这个对象的属性有 configurable、enumerable、writable 和 value
ps:感觉也不怎么用到,知道有这东西就行,例子在pdf的161页,书的143页
二、创建对象
工厂模式
工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程。
在 ECMAScript中无法创建类,于是用函数来封装以特定接口创建对象的细节
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, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
就是这个意思
构造函数模式
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, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
这个跟上面的例子作用差不多,但也有区别:
没有显式地创建对象;
直接将属性和方法赋给了 this 对象;
没有 return 语句。
按照惯例,构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。
1、将构造函数当作函数
可以用以下三种方式调用:
// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 添加到 window
window.sayName(); //"Greg"
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"
2、构造函数的问题
每次创建新对象的时候,也创建了新的函数,也就是说:不同实例上的同名函数是不相等的;
所以,可以将函数的定义转到狗在函数外面来避免这个问题;
但是如果这么做的话,是定义在全局作用域上的,这样,这个自定义的类型就没有封装性了;
原型模式
可以使用 prototype(原型)属性来解决这个问题;
这个属性是一个指针,指向一个对象, 而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法;
function Person(){ }
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
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
这样,新对象的这些属性和方法都是共享的了;
1、理解原型对象
只要创建新函数,就会为该函数创建一个prototype 属性,这个属性指向函数的原型对象;
在默认情况下,所有原型对象都会自动获得一个 constructor (构造函数)属性,这个属性包含一个指向 prototype 属性所在函数的指针;
如上一个例子,Person.prototype. constructor 指向 Person;
所以我们可以通过这个,继续添加其他的属性和方法;
用一张图来解释各个对象之间的关系:
所以,当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型对象;
可以通过 isPrototypeOf()方法来确定对象之 间是否存在这种关系;
isPrototypeOf:用于检查传入的对象是否是传入对象的原型:
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
Object.getPrototypeOf()方法:返回[[Prototype]]的值;
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"
delete 操作符则可以完全删除实例属性,从而让我们能够重新访问原型中的属性,
就用上面Person的例子:
alert(person1.name); //"Greg"——来自实例
alert(person2.name); //"Nicholas"——来自原型
delete person1.name;
alert(person1.name); //"Nicholas"——来自原型
hasOwnProperty()方法:检测一个属性是存在于实例中,还是存在于原型中;
只在给定属性存在于对象实例中时,才会返回 true;
function Person(){ }
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg"; //重写了name
alert(person1.name); //"Greg"——来自实例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //"Nicholas"——来自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name; alert(person1.name); //"Nicholas"——来自原型
alert(person1.hasOwnProperty("name")); //false
用图来解释就是:
2、原型与 in 操作符
单独使用:
in 操作符会在通 过对象能够访问给定属性时返回 true,无论该属性存在于实例中还是原型中;
同时使用 hasOwnProperty()方法和 in 操作符,就可以确定该属性到底是存在于对象中,还是存在于原型中:
function hasPrototypeProperty(object, name){
return !object.hasOwnProperty(name) && (name in object);
}
for-in 循环使用:
返回的是所有能够通过对象访问的、可枚举的(enumerated)属性,其中 既包括存在于实例中的属性,也包括存在于原型中的属;
Object.keys()方法:
获取对象上所有可枚举的实例属性;
接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组;
Object.getOwnPropertyNames()方法:
得到所有实例属性,无论它是否可枚举;
接收和返回值与上面一样;
3、更简单的原型语法
上面的Person创建也有简便的写法:
function Person(){
}
Person.prototype = {
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
}
};
但有一点不同,constructor 属性不再指向 Person 了,这里的语法本质上完全重写了默认的 prototype 对象;所以,尽管 instanceof 操作符还能返回正确的结果,但通过 constructor 已经无法确定对象的类型了;
如果实在需要constructor 的值,可以手动添加一句:
constructor : Person,
但这种重新设定constructor会导致他的[[Enumerable]]特性被设置为 true;
[[Enumerable]]:表示能否通过 for-in 循环返回属性;
4、原型的动态性
我觉得用图解释会比较清楚:
实例中的指针仅指向原型,而不指向构造函数。
5、原生对象的原型
所有原生的引用类型,都是采用这种模式创建的;
所以,所有原生引用类型(Object、Array、String,等等)都在其构造函数的原型上定义了方法;
即,通过原生对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法;
但不推荐。
6、原型对象的问题
它省略了为构造函数传递初始化参数这一环节,结果所有实例在 默认情况下都将取得相同的属性值;
最大问题是由其共享的本性所导致的,对于包含引用类型值的属性来说,问题就比较明显了,来看字例子就懂了:
function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true
组合使用构造函数模式和原型模式 (常用)
构造函数模式用于定义实 例属性,而原型模式用于定义方法和共享的属性,能最大限度地节省了内存;
利用这种方式重写Person:
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
实例属性都是在构造函数中定义的,而由所有实例共享的属性 constructor 和方法 sayName()则是在原型中定义的;
而修改了 person1.friends(向其中添加一个新字符串),并不会影响到 person2.friends,因为它们分别引用了不同的数组。
这种方法是目前在 ECMAScript中使用广泛、认同度高的一种创建自定义类型的方法;可以说,这是用来定义引用类型的一种默认模式。
动态原型模式
可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型
function Person(name, age, job){
//属性
this.name = name;
this.age = age;
this.job = job;
//方法
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();
寄生构造函数模式
这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;
但从表面上看,这个函数又很像是典型的构造函数;
这个模式可以在特殊的情况下用来为对象创建构造函数;
举个栗子:
function SpecialArray(){
//创建数组
var values = new Array();
//添加值
values.push.apply(values, arguments);
//添加方法
values.toPipedString = function(){
return this.join("|");
};
//返回数组
return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"
但这个模式也存在问题:
返回的对象与构造函数或者与构造函数的原型属 性之间没有关系;
也就是说,构造函数返回的对象与在构造函数外部创建的对象没有什么不同;
为此, 不能依赖 instanceof 操作符来确定对象类型。
在可以使用其他模式的情况下,不要使用这种模式
稳妥构造函数模式
稳妥对象,指的是没有公共属性,而且其方法也不引用 this 的对象;
稳妥对象适合在一些安全的环境中(这些环境中会禁止使用 this 和 new),或者在防止数据被其他应用程序(如 Mashup 程序)改动时使用;
与寄生构造函数类似的模式,但有两点不同:一是新创建对象的 实例方法不引用 this;二是不使用 new 操作符调用构造函数;
举个栗子:
function Person(name, age, job){
//创建要返回的对象
var o = new Object();
//可以在这里定义私有变量和函数
//添加方法
o.sayName = function(){
alert(name);
};
//返回对象
return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
在以这种模式创建的对象中,除了使用 sayName()方法之外,没有其他办法访问 name 的值;
另,instanceof 操作符对这种对象也没有意义。
各种模式小结
工厂模式,使用简单的函数创建对象,为对象添加属性和方法,然后返回对象。这个模式后来 被构造函数模式所取代。
构造函数模式,可以创建自定义引用类型,可以像创建内置对象实例一样使用 new 操作符。不 过,构造函数模式也有缺点,即它的每个成员都无法得到复用,包括函数。由于函数可以不局 限于任何对象(即与对象具有松散耦合的特点),因此没有理由不在多个对象间共享函数。
原型模式,使用构造函数的 prototype 属性来指定那些应该共享的属性和方法。组合使用构造 函数模式和原型模式时,使用构造函数定义实例属性,而使用原型定义共享的属性和方法。
三、继承
原型链
基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法;
基本模式:
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
这个例子的原型链如图所示:
instance 指向 SubType 的原型,SubType 的原型又指向 SuperType 的原型;
调用 instance.getSuperValue()会经历三个搜索步骤:
1)搜索实例;
2)搜索 SubType.prototype;
3)搜索 SuperType.prototype,最后一步才会找到该方法
1、别忘记默认的原型
所有函数的默认原型都是 Object 的实例,因此默认原型都会包含一个内部指针,指向 Object.prototype;
这也正是所有自定义类型都会继承 toString()、 valueOf()等默认方法的根本原因;
所以上面例子展示的完整原型链应该是:
2、确定原型和实例的关系
确定原型和实例之间的关系有两种方法;
一是使用 instanceof 操作符:
只要用这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回 true;
alert(instance instanceof Object); //true
二是使用 isPrototypeOf()方法:
只要是原型链中出现过的原型,都可以说是该原型链所派生的实例的原型,因此 isPrototypeOf()方法也会返回 true;
alert(Object.prototype.isPrototypeOf(instance)); //true
3、谨慎地定义方法
注意:给原型添加方法的代码一定要放在替换原型的语句之后;
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;
};
//重写超类型中的方法
SubType.prototype.getSuperValue = function (){
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false
当通过 SubType 的实例调用 getSuperValue()时,调用的就是这个重新定义的方法;
但通过 SuperType 的实例调用 getSuperValue()时,还会继续调用原来的那个方法;
同时,不能使用对象字面量创建原型方法,这样做就会重写原型链,会导致代码无效;
4、原型链的问题
主要的问题来自包含引用类型值的原型,包含引用类型值的原型属性会被所有实例共享,在通过原型来实现继承时,原型实际上会变成另一个类型的实例;
原型链的第二个问题是:在创建子类型的实例时,不能向超类型的构造函数中传递参数;或者说,没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数;
所以,实践中很少会单独使用原型链
借用构造函数
有时候也叫做伪造对象或经典继承;
这种技术的基本思想相当简单,即在子类型构造函数的内部调用超类型构造函数;
通过使用 apply()和 call()方法在(将来)新创建的对象上执行构造函数;
如:
function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
//继承了 SuperType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"
实际上是在(未来将要)新创建的 SubType 实例的环境下调用了 SuperType 构造函数;
1、传递参数
他有一个优势,即可以在子类型构造函数中向超类型构造函数传递参数;
function SuperType(name){
this.name = name;
}
function SubType(){
//继承了 SuperType,同时还传递了参数
SuperType.call(this, "Nicholas");
//实例属性
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29
2、借用构造函数的问题
函数复用就无从谈起;
在超类型的原型中定义的方法,对子类型而言也是不可见的,结 果所有类型都只能使用构造函数模式;
借用构造函数的技术也是很少单独使用
组合继承 (常用)
也叫做伪经典继承;
即将原型链和借用构造函数的技术组合到一块;
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;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
这是 JavaScript中最常用的继承模式
原型式继承
Object.create()方法:
规范化了原型式继承;
接收两个参数:一 个用作新对象原型的对象和(可选的)一个为新对象定义额外属性的对象;
在传入一个参数的情况下, Object.create()与 object()方法的行为相同:
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
传入两个参数:
第二个参数与Object.defineProperties()方法的第二个参数格式相同;
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person, {
name: {
value: "Greg"
}
});
alert(anotherPerson.name); //"Greg"
//以这种方式指定的任何属性都会覆盖原型对象上的同名属性
在没有必要兴师动众地创建构造函数,而只想让一个对象与另一个对象保持类似的情况下,原型式继承是完全可以胜任的;
不过,包含引用类型值的属性始终都会共享相应的值,就像使用原型模式一样。
寄生式继承
与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,后再像真地是它做了所有工作一样返回对象
//创建
function createAnother(original){
var clone = object(original); //通过调用函数创建一个新对象
clone.sayHi = function(){ //以某种方式来增强这个对象
alert("hi");
};
return clone; //返回这个对象
}
//使用
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"
在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式
寄生组合式继承
组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:
一次是在创建子类型原型的时候,
另一次是在子类型构造函数内部;
寄生组合式继承:即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法;
思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已;
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //创建对象
prototype.constructor = 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);
};
它只调用了一次 SuperType 构造函数,并且因此避免了在 SubType. prototype 上面创建不必要的、多余的属性;
与此同时,原型链还能保持不变;因此,还能够正常使用 instanceof 和 isPrototypeOf();
普遍认为寄生组合式继承是引用类型理想的继承范式
继承小结
原型式继承,可以在不必预先定义构造函数的情况下实现继承,其本质是执行对给定对象的浅 复制。而复制得到的副本还可以得到进一步改造。
寄生式继承,与原型式继承非常相似,也是基于某个对象或某些信息创建一个对象,然后增强 对象,后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问 题,可以将这个模式与组合继承一起使用。
寄生组合式继承,集寄生式继承和组合继承的优点与一身,是实现基于类型继承的有效方式。