面向对象的JavaScript系列一，创建对象

转载

mb5ff5933087b38 2014-04-03 21:53:00

文章标签 python 构造函数创建对象工厂模式原型模式 文章分类 代码人生

1.最简单的创建对象方法

var person = new Object();
person.name = "sam wu";
person.age = 25;
person.job = "frontend engineer";
person.sayName = function(){
    alert(this.name);
};

person.sayName();

2.工厂模式创建对象

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("sam", 29, "frontend Engineer");
var person2 = createPerson("rendy", 27, "Python");

person1.sayName();   //"sam"
person2.sayName();   //"rendy"

3.构造函数模式

function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        alert(this.name);
    };    
}

var person1 = new Person("sam", 29, "frontend Engineer");
var person2 = new Person("rendy", 27, "Python");

person1.sayName();   //"sam"
person2.sayName();   //"rendy"

alert(person1 instanceof Object);  //true
alert(person1 instanceof Person);  //true
alert(person2 instanceof Object);  //true
alert(person2 instanceof Person);  //true

alert(person1.constructor == Person);  //true
alert(person2.constructor == Person);  //true

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

4.原型模式

可以让多个实例，共享属性和方法。

function Person(){
}

Person.prototype.name = "sam";
Person.prototype.age = 25;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

var person1 = new Person();
person1.sayName();   //"sam"

var person2 = new Person();
person2.sayName();   //"sam"

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

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

//only works if Object.getPrototypeOf() is available.ECMA5支持
if (Object.getPrototypeOf){
    alert(Object.getPrototypeOf(person1) == Person.prototype);  //true
    alert(Object.getPrototypeOf(person1).name);  //"sam"
}

4.1 实例对象属性和原型属性的优先级

function Person(){
}

Person.prototype.name = "sam";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

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

person1.name = "Rendy";
alert(person1.name);   //"Rendy" – from instance 来自对象
alert(person2.name);   //"sam" – from prototype 来自原型属性

4.2 同名，只是屏蔽，非覆盖

function Person(){
}

Person.prototype.name = "sam";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
};

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

person1.name = "rendy";
alert(person1.name);   //"rendy" – from instance
alert(person2.name);   //"sam" – from prototype

delete person1.name;
alert(person1.name);   //"sam" - from the prototype

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

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("sam", 29, "Frontend Engineer");
var person2 = new Person("rendy", 27, "Python");

person1.friends.push("christ");

alert(person1.friends);    //"Shelby,Court,christ"
alert(person2.friends);    //"Shelby,Court"
alert(person1.friends === person2.friends);  //false
alert(person1.sayName === person2.sayName);  //true

6.寄生构造函数函数模式

function Person(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };    
    return o;
}

// 这里用了new关键字，但是Person函数的内容是返回一个对象。这样就不会生成一个新的实例。而是跟工厂模式效果一样。
var friend = new Person("sam", 25, "Front Engineer");
friend.sayName();  //"sam"