JavaScript 自学之路（二）

JavaScript

---

进阶: 面向对象

命名空间

var com = com || {};
com.apress = com.apress || {};
com.apress.chapterone = com.apress.chapterone || {};
com.apress.chapterone.sectionObject = { ... };
var MYAPP = {};             // the container for your application
MYAPP.stooge = {
    "first-name": "Joe",
    "last-name": "Howard"
};
MYAPP.flight = {
    airline: "Oceanic",
    number: 815,
    departure: {
        IATA: "SYD",
        time: "2004-09-22 14:55",
        city: "Sydney"
    },
    arrival: {
        IATA: "LAX",
        time: "2004-09-23 10:42",
        city: "Los Angeles"
    }
};

创建对象的方法

工厂模式

function createPerson(name, age, job) {
    var o = new Object();
    // ...
    return o;
}

构造函数模式

function Person(name, age, job) {
    this.name = name;
    // ...
    this.sayName = function() { alert(this.name); };
}
var person1 = new Person("Nicholas", 29, "Software Engineer");

原型模式（in 操作符）

// Define a constructor called Accommodation
function Accommodation() {}
// Assign properties and methods to our "class" blueprint with an object literal
Accommodation.prototype = {
    floors: 0,
    rooms: 0,
    sharedEntrance: false,
    lock: function() {},
    unlock: function() {}
};

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

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);
    }
};    

动态原型模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    //methods
    if (typeof this.sayName != “function”){
        Person.prototype.sayName = function(){
            alert(this.name);
        };
    }
}

寄生构造函数模式

function SpecialArray(){       
    //create the array
    var values = new Array();
    //add the values
    values.push.apply(values, arguments);
    //assign the method
    values.toPipedString = function(){
        return this.join(“|”);
    };
    return values;        
}
var colors = new SpecialArray(“red”, “blue”, “green”);
alert(colors.toPipedString()); //”red|blue|green”

稳妥构造函数模式

function Person(name, age, job){
    //create the object to return
    var o = new Object();
    //optional: define private variables/functions here
    o.sayName = function(){
        alert(name);
    };    
    return o;
}

解析对象

var Person = {
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
        sayName: function(){
            alert(this.name);
        }
};
var person1 = new Person();
var person2 = new Person();

person1.name = "Greg";

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

friend.sayName(); //error

属性管理器

var car = {};
Object.defineProperty(car, 'doors', {
    configurable: true,
    value: 4
});
Object.defineProperty(car, 'wheels', {
    configurable: false,
    value: 4
});
delete car.doors;
console.log(car.doors);     // => "undefined"
delete car.wheels;
console.log(car.wheels);    // => "4"

Object.defineProperty(car, 'doors', {
    writable: true,
    configurable: true,
    enumerable: true,
    value: 4
});
Object.defineProperty(car, 'wheels', {
    writable: true,
    configurable: true,
    enumerable: true,
    value: 4
});
Object.defineProperty(car, 'trackingEnabled', {
    enumerable: false,
    value: true
});
for (var x in car) {    // same as console.log(Object.keys(car));
    console.log(x);     // output: ['doors', 'wheels']
}
// => ["doors", "wheels", "trackingEnabled"]
console.log(Object.getOwnPropertyNames(car));
console.log(car.propertyIsEnumerable('trackingEnabled')); //false
console.log(car.trackingEnabled);       //true

Object.defineProperty(car, 'wheels', {
  value: 4,
  writable: false
});
car.wheels = 5;
console.log(car.wheels);        // => 4

• 即时对象初始化

({
    maxwidth: 600,
    maxheight: 400,
    gimmeMax: function () {
        return this.maxwidth + "x" + this.maxheight;
    },
    init: function () {
        console.log(this.gimmeMax());
    }
}).init();

继承

原型链

function SuperType(){
    this.colors = [“red”, “blue”, “green”];
}
function SubType(){}
//inherit from SuperType
SubType.prototype = new SuperType();
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,black”

借用构造函数（伪造对象或经典继承）

function SuperType() {
    this.colors = [“red”, “blue”, “green”];
}
function SubType(){     //inherit from 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”

组合继承

function SuperType() {
    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

原型式继承

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: “Nicholas”,
    friends: [“Shelby”, “Court”, “Van”]
};
var anotherPerson = object(person);
anotherPerson.name = “Greg”;
anotherPerson.friends.push(“Rob”);
var yetAnotherPerson = object(person);
yetAnotherPerson.name = “Linda”;
yetAnotherPerson.friends.push(“Barbie”);
alert(person.friends);   //”Shelby,Court,Van,Rob,Barbie”

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);     //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”

寄生组合式继承

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);
};