您的位置:首页 > Web前端 > JavaScript

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

2014-04-03 21:53 666 查看
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"


以上内容来自《JavaScript高级程序设计第三版》
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐