JavaScript面向对象程序设计

理解对象

• 通用属性

1. configurable: 表示能否修改属性的特性或可以被删除

2. Enumerable：表示能否通过 for-in 循环遍历属性

• data descriptor：

1. Writable：表示能否修改属性的值

2. Value：包含这个属性的值

• accessor descriptor

1. get： 获取属性值

2. set： 设置属性值

备注：data descriptor和accessor descriptor 不能同时存在，如果同时存在会报[TypeError: property descriptors must not specify a value or be writable when a getter or setter has been specified]

在JavaScript中创建对象的方式

1.  工厂模式

function createPerson(name, age, job) {
	var person = new Object();
	person.name = name;
	person.age = age;
	person.job = job;
	person.toString = function() {
		console.log("name:"+name+", age:"+age+", job:"+job);
	}
		
	return person;
}
var person = createPerson("David", 22, "Engineer");
person.toString();

 

2.  构造函数模式

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.toString = sayInfo;
}

function sayInfo() {
    console.log("name:"+this.name+", age:"+this.age+", job:"+this.job);
}
var person = new Person("David", 33, "Artist");
person.toString();

 

3.  原形模式

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName != "function") {
        Person.prototype.sayName = function() {
            console.log(this.name);
        }
    }
}

var person = new Person("David", 32, "Engineer");
person.sayName();

 

JavaScript中的对象继承模式

1.  原型链：

function SuperType() {
	this.superProperty = true;
	this.colors = ["red", "blue"];
}
SuperType.prototype.saySuperProperty = function() {
	console.log(this.superProperty);
}
function SubType() {
	this.subProperty = false;
}

SubType.prototype = new SuperType();

SuperType.prototype.saySubProperty = function() {
	console.log(this.subProperty);
}
	
var sb1 = new SubType();
var sb2 = new SubType();

sb1.saySuperProperty();  //true
sb1.saySubProperty();    //false

sb2.saySuperProperty();  //true
sb2.saySubProperty();    //false

sb1.colors.push("white");
console.log("sb1 "+sb1.colors);   // "sb1 red,blue,white"
console.log("sb2 "+sb2.colors);   // "sb2 red,blue,white"

 

2.  借用构造函数：

function say_hello(){
	 alert("Hello RunJS!");
}

function SuperType(name) {
	this.name = name;
	this.colors = ["red","yellow"];
}

function SubType(name) {
	SuperType.call(this);
}

var sb1 = new SubType("David");
var sb2 = new SubType("Bill");

sb1.colors.push("Black");
sb2.colors.pop();

console.log("sb1.colors: "+sb1.colors);  // "sb1.colors: red,yellow,Black"
console.log("sb2.colors: "+sb2.colors);  // "sb2.colors: red"

 

3.  组合继承：

function say_hello(){
	 alert("Hello RunJS!");
}

function SuperType(name) {
	this.name = name;
	this.colors = ["red","yellow"];
}

SuperType.prototype.sayName = function() {
	console.log(this.name);
}
function SubType(name) {
	SuperType.call(this, name);
}

SubType.prototype = new SuperType();
var sb1 = new SubType("David");
var sb2 = new SubType("Bill");

sb1.sayName();  //"David"
sb2.sayName();  //"Bill"

sb1.colors.push("Black");
sb2.colors.pop();

console.log("sb1.colors: "+sb1.colors);  // "sb1.colors: red,yellow,Black"
console.log("sb2.colors: "+sb2.colors);  // "sb2.colors: red"

 

4.  原形式继承：可以在不必预先定义构造函数的情况下实现继承，其本质是执行对给定对象的浅复制。而复制得到的副本还可以得到进一步改造。

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}

var person = {
	name: "Nicholas", friends: ["Shelby", "Court", "Van"]
};
// var anotherPerson = object(person);
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

// var yetAnotherPerson = object(person);
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends); //”Shelby,Court,Van,Rob,Barbie”

 

5.  寄生式继承：与原形式继承非常相似，也是基于某个对象或某些信息创建一个对象，然后增强对象，最后返回对象。为了解决组合继承模式由于多次调用超类型构造函数而导致的低效率问题，可以将这个模式与组合继承一起使用。

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}
function createAnother(original){
	var clone = object(original); //create a new object by calling a function
	clone.sayHi = function(){ //augment the object in some way
		alert("hi");
	};
	return clone; //return the object
}
var person = {
	name: "Nicholas",
	friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

 

6.  寄生组合式继承：集寄生式继承和组合继承的优点于一身，是实现基于类型继承的最有效方式。

function object(o){
	function F(){}
	F.prototype = o;
	return new F();
}
function inheritPrototype(subType, superType){
	var prototype = object(superType.prototype); //create object
	prototype.constructor = subType; //augment object
	subType.prototype = prototype; //assign object
}
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);
};

var sb1 = new SubType("David", 15);
sb1.sayName();
sb1.sayAge();