JS 创建对象的模式实例小结

本文实例总结了JS 创建对象的模式。分享给大家供大家参考，具体如下：

1.工厂模式

抽象了创建具体对象的过程，创建了一种函数，封装特定的接口创建对象的细节。

新建一个对象 定义属性和方法 return刚新建的对象

function createPerson(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHi = function() { congsole.log(this.name); }; return obj;}var person1 = createPerson('name1', 'age1', 'job1');var person2 = createPerson('name2', 'age2', 'job2');

存在问题：

没有解决对象识别的问题（怎么识别对象的类型）

2.构造函数模式 不显式创建对象 直接将属性和方法定义在this中 没有return 通过 new操作符调用

function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayHi = function() { console.log(this.name); };}var person1 = new Person('name1', 'age1', 'job1');var person2 = new Person('name2', 'age2', 'job2');

存在问题：

每个方法都要在实例上创建一次3.原型模式

创建的每一个函数都有prototype原型属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

所有原生引用类型都在其构造函数的原型上定义了方法

function Person{}Person.prototype.name='name'Person.prototype.age='age'Person.prototype.job='job'Person.prototype.sayHi=function(){ console.log(this.name)}var person1=new Person()var person2=new Person()

存在问题：

所有属性是被很多实例共享的4.组合构造和原型模式

构造函数用来定义实例属性，原型模式用来定义方法和共享的属性

function Person(name, age, job) { this.name = name; this.age = age; this.job = job;}Person.prototype={ constructor:Person; sayHi:function(){ console.log(this.name) }}var person1 = new Person('name1', 'age1', 'job1');5.动态原型模式

这里对原型的修改,能够对所有实例生效，只在初次调用构造函数会执行

function Person(name,age,job){ this.name=name; this.age=age; this.job=job; if(typeof this.sayHi !='function' ){ Person.prototype.sayHi=functong(){ console.log(this.name) } }}var person1 = new Person('name1', 'age1', 'job1');6.寄生构造函数模式

工厂模式+构造函数

返回的对象与构造函数、构造函数的原型属性之间没有关系 不能依赖instanceof来去定对象原型 不建议使用

function Person(name, age, job) { var obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayHi = function() { congsole.log(this.name); }; return obj;}var person1 = new Person('name1', 'age1', 'job1');7.稳妥构造模式 没有公共属性 不使用this 不使用new

function Person(name, age, job) { var obj = new Object(); // 定义室友变量和函数 obj.sayHi = function() { congsole.log(name); }; return obj;}var person1 = Person('name1', 'age1', 'job1');// name1

摘抄自《JavaScript 高级程序设计》第六章

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。