JavaScript对象创建的九种方式
2016-07-12 11:31
489 查看
1、标准创建对象模式
2、字面量模式
3、工厂模式
4、构造函数模式
5、原型模式
6、组合构造函数和原型模式
7、动态原型模式(这里只在 sayName()方法不存在的情况下,才会将它添加到原型中。)
8、寄生构造函数模式(除了使用 new 操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。)
9、稳妥构造函数模式(一是新创建对象的实例方法不引用 this;二是不使用 new 操作符调用构造函数)
var person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"; person.sayName = function(){alert(this.name);};
2、字面量模式
var person = { name: "Nicholas", age: 29, job: "Software Engineer", sayName: function(){alert(this.name);} };
3、工厂模式
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("Nicholas", 29, "Software Engineer"); var person2 = createPerson("Greg", 27, "Doctor");
4、构造函数模式
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){alert(this.name);}; } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor");
5、原型模式
function Person(){} Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){alert(this.name);}; var person1 = new Person(); person1.sayName(); //"Nicholas" var person2 = new Person(); person2.sayName(); //"Nicholas" alert(person1.sayName == person2.sayName); //true
6、组合构造函数和原型模式
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("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); person1.friends.push("Van"); alert(person1.friends); //"Shelby,Count,Van" alert(person2.friends); //"Shelby,Count" alert(person1.friends === person2.friends); //false alert(person1.sayName === person2.sayName); //true
7、动态原型模式(这里只在 sayName()方法不存在的情况下,才会将它添加到原型中。)
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; if (typeof this.sayName != "function"){ Person.prototype.sayName = function(){alert(this.name);}; } } var friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName();
8、寄生构造函数模式(除了使用 new 操作符并把使用的包装函数叫做构造函数之外,这个模式跟工厂模式其实是一模一样的。)
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; } var friend = new Person("Nicholas", 29, "Software Engineer"); friend.sayName(); //"Nicholas"
9、稳妥构造函数模式(一是新创建对象的实例方法不引用 this;二是不使用 new 操作符调用构造函数)
function Person(name, age, job){ var o = new Object(); o.sayName = function(){alert(name);}; return o; } var friend = Person("Nicholas", 29, "Software Engineer"); friend.sayName(); //"Nicholas"
相关文章推荐
- 访谈 | ThinkJS作者李成银:择善而从之,笃行致远
- JSON.parse()和JSON.stringify()
- 简单谈谈JSP/EL表达式
- 导入JS文件报错
- iOS7新JavaScriptCore框架入门介绍
- JavaScriptCore框架在iOS7中的对象交互和管理
- ExtJS 4.2 教程-03:使用Ext.define自定义类
- javascript设计模式学习之十三——职责链模式
- oc和jspatch转换工具
- 实现在父页面不刷新情况下显示子页面传递的信息
- Extjs中通过Tree加载右侧TabPanel具体实现
- String(字符串)对象javascript
- js时间问题
- JS获取当前文件所在的文件夹全路径
- JavaScript 初识Promise 对象
- 实例讲解js中的预编译
- c/c++/MFC 调用 js 函数代码
- JavaScript中的事件委托及好处
- html5常用的js简介一
- js闭包