面向对象的JavaScript系列一,创建对象
2014-04-03 21:53
666 查看
1.最简单的创建对象方法
2.工厂模式创建对象
3.构造函数模式
4.原型模式
可以让多个实例,共享属性和方法。
4.1 实例对象属性和原型属性的优先级
4.2 同名,只是屏蔽,非覆盖
5.组合使用构造函数模式和原型模式
6.寄生构造函数函数模式
以上内容来自《JavaScript高级程序设计第三版》
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高级程序设计第三版》
相关文章推荐
- <读书笔记>JavaScript系列之7种创建对象(面向对象)
- javascript面向对象系列第二篇——创建对象的5种模式
- 深入理解JavaScript系列(47):对象创建模式(上篇)
- 深入理解JavaScript系列(48):对象创建模式(下篇)
- JavaScript高级程序设计之面向对象的程序设计之创建对象之原型模式 第6.2.3讲笔记
- JavaScript高级程序设计之面向对象的程序设计之创建对象之寄生构造函数模式 第6.2.6讲笔记
- JavaScript高级程序设计之面向对象的程序设计之创建对象之稳妥构造函数模式 第6.2.7讲笔记
- JavaScript基础——面向对象的程序设计(一)创建对象的几种方式总结
- JavaScript学习笔记6 面向对象之创建对象
- 深入理解JavaScript系列(48):对象创建模式(下篇)
- JavaScript中的面向对象(一)——创建自定义对象
- javascript面向对象学习笔记——创建对象(转)
- \t\t深入了解javascript的面向对象特性 类和对象的创建 实例化
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
- 详解JavaScript基于面向对象之创建对象(1)
- JavaScript高级程序设计【面向对象-创建对象2】
- 深入理解JavaScript系列(48):对象创建模式(下篇)
- javascript面向对象(对象的创建以及属性和方法的添加)
- 从面试题学习Javascript 面向对象(创建对象)
- 学习javascript面向对象 掌握创建对象的9种方式