JavaScript高级程序设计（第3版）学习笔记10 再访js对象

]

数据属性

访问器属性

Boolean

true

能否通过delete删除属性从而重新定义属性

能否修改属性的特性

能否把属性修改为访问器特性

一旦把属性定义为不可配置的，就不能再变为可配置的

如果为false，不能做删除、也不能修改属性特性，但是允许修改属性值

非严格模式下会忽略相应操作，严格模式下则抛出异常

数据属性

访问器属性

(1)目标对象

(2)属性的名字

(3)属性描述符对象

使用属性定义方法时 
[[Enumerable]] 
[[Configurable]] 
[[Writable]] 
默认值为false

// 创建一个包含一个默认属性job的对象（job属性可以修改、删除、在for-in中枚举）
var person = {job:'it'};
// 添加一个不能被修改、删除的name属性
Object.defineProperty(person, 'name', {
value:'linjisong',//这里的配置属性和上面特性列表中的配置属性一致
enumerable:true
});
// 定义多个属性（数据属性year和访问器属性age）
Object.defineProperties(person, {
year:{
value : 2012,
configurable:true,
writable:true
},
age:{
get : function(){
return this.year-1983;
}
}
});

var job = Object.getOwnPropertyDescriptor(person, 'job');
console.info(job.configurable);//true，直接添加属性时默认为true

var name = Object.getOwnPropertyDescriptor(person, 'name');
console.info(name.configurable);//false，使用属性定义方法添加属性时默认为false
console.info(person.name);//linjisong
person.name = 'oulinhai';//由于不能修改，所以值不会改变，在严格模式下会抛出异常
console.info(person.name);//linjisong

person.year = 2015;
console.info(person.year);//2015
console.info(person.age);//32，在修改year的同时，也修改了age属性

(1)目标对象

(2)多个属性描述符组成的一个对象

(1)目标对象

(2)属性的名字

(3)返回一个包括了属性特性的对象

var person = new Object();

person.name = 'linjisong';

person.job = 'it';

var person = {

name : 'linjisong',

job : 'it'

};

function createPerson(name, job){

var o = new Object();

o.name = name;

o.job = job;

return o;

}

var person = createPerson('linjisong','it');

1、工厂模式能有效解决重复代码问题。

2、但是不能判定对象的类型

function Person(name, job){

this.name = name;

this.job = job;

this.getName = function(){

return this.name;

}

}

var person = new Person('linjisong','it');

构造函数模式能解决重复代码问题，也能够判定对象的类型

但是这种模式下创建的每个实例都有一份属性和方法的Copy

对于方法来说，每个实例都保存一份是没有必要的

使用new调用构造函数的内部步骤：

（1）创建一个新对象

（2）将构造函数的作用域赋给新对象（构造函数内this指向新创建对象）

（3）执行构造函数中的代码

（4）返回新对象

function Person(){}

Person.prototype.name = 'linjisong';

Person.prototype.job = 'it;

Person.prototype.getName = fucntion(){

return this.name;

};

var person = new Person();

原型模式能够解决构造函数模式的方法实例有多个副本的问题

但是同时每个实例的属性也共享了，对于引用类型的属性来说

这会导致非常严重的问题，修改一个实例的属性会导致另一个实例也修改

而且也不能接受参数

function Angle(){};

Angle.prototype.coordinate = [0,0];

var a1 = new Angle();

var a2 = new Angle();
a1.coordinate[0] = 1;

console.info(a2.coordinate);//[1,0]修改a1会导致a2变更

function Person(name, job){

this.name = name;

this.job = job;

}

Person.prototype.getName = fucntion(){

return this.name;

};

var person = new Person('linjisong','it');

结合构造函数模式和原型模式

使用构造函数模式创建属性，每个实例保存一份

使用原型模式共享方法，所有实例共享保存一份

这是目前使用最广泛的对象创建方式

function Person(name, job){

this.name = name;

this.job = job;

if(!Person.prototype.getName){

Person.prototype.getName = fucntion(){

return this.name;

};

}

}

var person = new Person('linjisong','it');

这种模式实际上是对于不习惯将构造函数和原型分离而引入的

在判断的时候，可以只判断其中一个属性

function Person(name, job){

var o = new Object();

o.name = name;

o.job = job;

o.getName = fucntion(){

return this.name;

};

return o;

}

var person = new Person('linjisong','it');

工厂模式不使用new，寄生构造函数模式使用new操作符

构造函数模式不返回，寄生构造函数模式返回对象

不能使用instanceof判断类型

function Person(name, job){

var o = new Object();

o.getName = fucntion(){

return name;

};

return o;

}

var person = Person('linjisong','it');

稳妥对象：不使用this和new

稳妥构造模式类似寄生构造模式，但只能通过提供的方法访问成员

不能使用instanceof判断类型

function Square(){//正方形

this.width = 10;//边长

this.coordinate = [0,0];//左上顶点的坐标

}

Square.prototype.getArea = function(){//计算面积

return this.width * this.width;

};

function ColorSquare(){//有颜色的正方形

this.color = 'red';

}

ColorSquare.prototype = new Square();//实现了继承

ColorSquare.prototype.getColor = function(){//获取颜色

return this.color;

}
var cs = new ColorSquare();

console.info(cs.width);//10

console.info(cs.getArea());//100

console.info(cs.color);//red

console.info(cs.getColor());//red

1、通过修改子类型创建函数的原型实现继承。

2、通过原型给子类型添加新方法时，一定要在替换子类型原型之后添加，而后也不能通过对象字面量修改子类型的原型。

3、可以通过两种方法确定原型和实例之间的关系：只要实例原型链中出现过构造函数fn，都返回true

（1）instance instanceof fn

（2）fn.prototype.isPrototype(instance)

4、使用原型链继承时，创建子对象时无法传递参数。

5、引用类型的父类属性会被所有子类型实例共享从而产生问题：

修改一个子类型实例的引用类型属性会导致其它所有子类型实例相应的修改

var cs2 = new ColorSquare();

console.info(cs2.coordinate);//[0,0]

cs.coordinate[1] = 1;

console.info(cs2.coordinate);//[0,1]，修改cs会导致cs2也修改

function Square(){//正方形

this.width = 10;//边长

this.coordinate = [0,0];//左上顶点的坐标

}

Square.prototype.getArea = function(){//计算面积

return this.width * this.width;

};
function ColorSquare(){//有颜色的正方形

Square.call(this);//实现继承

this.color = 'red';

}
var cs = new ColorSquare();

var cs2 = new ColorSquare();

console.info(cs.coordinate);//[0,0]

console.info(cs2.coordinate);//[0,0]

cs.coordinate[1] = 1;

console.info(cs.coordinate);//[0,1]

console.info(cs2.coordinate);//[0,0]，互相独立，修改cs不影响cs2

try{

console.info(cs.getArea());//异常，不能访问父类原型中方法

}catch(e){

console.info(e);//TypeError

}

1、使用借用构造函数时，可以在call调用时传递参数。

2、同时也不存在引用类型共享的问题。

3、借用构造函数的缺点是，子类不能访问父类原型中定义的方法

function Square(){//正方形

this.width = 10;//边长

this.coordinate = [0,0];//左上顶点的坐标

}

Square.prototype.getArea = function(){//计算面积

return this.width * this.width;

};
function ColorSquare(){//有颜色的正方形

Square.call(this);//创建子类实例时，第二次调用父类构造函数

this.color = 'red';

}
ColorSquare.prototype = new Square();//第一次调用

ColorSquare.prototype.getColor = function(){//获取颜色

return this.color;

}
var cs = new ColorSquare();

var cs2 = new ColorSquare();

console.info(cs.coordinate);//[0,0]

console.info(cs2.coordinate);//[0,0]

cs.coordinate[1] = 1;

console.info(cs.coordinate);//[0,1]

console.info(cs2.coordinate);//[0,0]，互相独立，修改cs不影响cs2

console.info(cs.getArea());//100，可以访问

1、组合继承也称为伪经典继承，是将原型链和借用构造函数两种方式结合起来的继承方式。

2、基本思想是：

（1）使用原型链实现对原型属性和方法的继承

（2）使用借用构造函数实现对实例属性的继承

3、组合继承避免了原型链和借用构造函数的缺点，融合了它们的优点，是最常用的继承方式。

4、组合继承的缺点是需要调用两次父类的构造函数

function create(o){

var fn = function(){};

fn.prototype = o;

return new fn();

}

var square = {

width:10,

coordinate:[0,0]

};
var cs = create(square);

var cs2 = create(square);

console.info(cs.coordinate);//[0,0]

console.info(cs2.coordinate);//[0,0]

cs.coordinate[1] = 1;

console.info(cs.coordinate);//[0,1]

console.info(cs2.coordinate);//[0,1]，和原型链一样，会有共享问题

1、这种方式实际上就是前面说的模拟ES5中create函数来实现继承。

2、ES5及前面模拟的create还可以接受另外的属性描述参数。

3、和原型链与借用构造函数不同的是，这种方式需要先有一个对象，然后直接创建子对象。

前者是构造函数的继承，而后者是对象实例的继承。

4、和使用原型链继承一样，也会有引用类型实例属性的共享问题。

function create(o){

var fn = function(){};

fn.prototype = o;

return new fn();

}

var square = {

width:10,

coordinate:[0,0]

};
function colorSquare(original){

var s = create(original);

s.color = 'red';

return s;

}
var cs = colorSquare(square);

console.info(cs.width);//10

console.info(cs.coordinate);//[0,0]

1、首先，这里的create函数不是必需的，任何返回新对象的函数都可以。

2、其次，这种模式也有引用类型实例属性共享的问题。

3、这种方式，可以看成将上面的对象继承包装成构造函数。

function create(o){

var fn = function(){};

fn.prototype = o;

return new fn();

}

function inherit(sub, sup){

var prototype = create(sup.prototype);

prototype.constructor = sub;

sub.prototype = prototype;

}
function Square(){//正方形

this.width = 10;//边长

this.coordinate = [0,0];//左上顶点的坐标

}

Square.prototype.getArea = function(){//计算面积

return this.width * this.width;

};
function ColorSquare(){//有颜色的正方形

Square.call(this);

this.color = 'red';

}

inherit(ColorSquare, Square);

ColorSquare.prototype.getColor = function(){//获取颜色

return this.color;

}
var cs = new ColorSquare();

console.info(cs.width);//10

console.info(cs.getArea());//100

console.info(cs.color);//red

console.info(cs.getColor());//red
var cs2 = new ColorSquare();

console.info(cs2.coordinate);//[0,0]

cs.coordinate[1] = 1;

console.info(cs2.coordinate);//[0,0]

1、这种方式只调用了一次父类构造函数，从而避免了在子类型的原型对象上创建不必要的属性。

2、能够保证原型链不变，从而可以正常使用instanceof和isPrototypeOf()。