JS中,便于批量创建对象的三种模式:

1.工厂模式:用一个函数封装创建对象的细节,传入必要的参数,在函数内部new一个对象并返回。

缺点:创建的对象无法识别类型(全是Object)

2.构造函数模式:必须配合new操作符使用。在构造函数内部将this当做新对象指针,赋予其属性和方法,然后经历以下四个步骤:

1)创建一个新对象

2)将构造函数的作用域赋给这个新对象(即将this指向这个对象)

3)执行构造函数内部代码(完成对象初始化)

4)返回这个对象

用这种方法创建的每个实例都属于以其构造函数为名的引用类型,可以用instanceof方法验证。例如:

function Person(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){console.log("Hi!")};
}
var p = new Person("Tang",);
console.log(p instanceof Person);//true

缺点:每个对象实例都保存了独立的函数对象副本(如例子中的sayHi),造成了存储空间的浪费。

3.原型模式:通过赋予构造函数的原型对象以属性和方法,来为每个通过该构造函数创建的对象赋予共享的属性和方法副本。

每个函数都有一个prototype属性,指向函数的原型对象。所有原型对象都有一个constructor属性,指向原型对象所在的函数,此外可以为原型对象添加自定义属性和方法,在实际使用时可以省略prototype直接访问。应用原型模式,所有通过该构造函数创建的对象实例共享同一个原型对象。例如:

function Person(){}
Person.prototype.name="leegent";
Person.prototype.sayHi(){console.log("Hi");}
var p1=new Person();
var p2=new Person();
p1.sayHi(); // Hi
p2.sayHi(); // Hi
Person.prototype.sayHi=function(){console.log("Hello");}
p1.sayHi(); // Hello
p2.sayHi(); // Hello
console(p1.sayHi==p2.sayHi); //true

对象实例本身的属性会屏蔽原型对象的同名属性,本质上是截断了解析器的搜索过程(先自身再原型)。使用delete操作符删除实例本身的属性之后,就可以重新访问到原型对象中的同名属性。

不能通过对象实例直接访问其原型对象。

几个与原型相关的操作符和函数:

第一类,判别函数/操作,返回布尔值:

  1. 【属性】 in 【对象】:属性能否通过对象访问到,无论在自身还是原型。
  2. 【原型对象】.isPrototypeOf【对象】:顾名思义
  3. 【对象】.hasOwnProperty(【属性】) :判断该属性是否为对象自有属性(而不是在原型上)

第二类,获取函数/操作,返回属性数组:

  1. for(var x in 【对象】):返回所有可通过对象访问的、enumerated的属性,无论在自身还是原型(自身属性都可枚举)
  2. Object.getPrototypeOf(【对象】):获取对象的原型
  3. Object.keys(【对象】):返回对象上可枚举的自身属性
  4. Object.getOwnPropertyNames(【对象】):返回对象上所有自身属性,无论是否可枚举(作用于原型对象时可获取constructor属性)

所有原生的引用类型如Object、Array、String等,都是通过原型模式创建的。当前主流的创建自定义类型的方法是组合使用构造函数模式和原型模式。

本文转载自 http://www.cnblogs.com/leegent/p/5268033.html

JavaScript中创建对象的三种模式的更多相关文章

  1. JavaScript中创建对象的三种方式!

    JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...

  2. JavaScript中创建对象的几种模式

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. JavaScript中创建对象的5种模式

    构造函数模式 实现方式: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; thi ...

  4. javascript中创建对象的几种不同方法

    javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...

  5. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  6. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  7. javascript中构造函数的三种方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. linux中vim编辑器三种模式及常用命令的使用

    Linux命令经常使用才会烂熟于心 命令行模式: 移动光标: 向下左右箭头可以移动光标: 将光标移动到行尾:$; 将光标移动到行头:^: 将光标移动到页尾:shift+g; 将光标移动到页头:1+sh ...

  9. mysql中binlog_format的三种模式

    mysql复制主要有三种方式:基于SQL语句的复制(statement-based replication, SBR),基于行的复制(row-based replication, RBR),混合模式复 ...

随机推荐

  1. java-从这里开始认识

    <java是什么:>Programming language 程序语言Development environment 开发环境Application environment 应用环境Dep ...

  2. TCP相关知识总结

    参考: http://coolshell.cn/articles/11564.html http://coolshell.cn/articles/11609.html TCP头格式 接下来,我们来看一 ...

  3. MS-SQL charindex的用法

    select * from table_a where charindex('a',id)>0 or charindex('b',id)>0 table_a 表中 id字段中含有" ...

  4. 大话设计模式--中介者模式 Mediator --C++实现实例

    1. 中介者模式: 用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立改变他们之间的交互. Mediator的出现减少了各个Colleague的耦 ...

  5. 很实用的HTML5+CSS3注册登录窗体切换效果

    1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...

  6. angularjs $http提交数据探索

    前两天在搞自己的项目,前端js框架用的是angularjs框架:网站整的差不多的时候出事了:那就是当我用$http.post()方法向服务器提交一些数据的时候:后台总是接收不到数据: 于是采用了其他方 ...

  7. 分享知识-快乐自己:PageHelper 分页关键基础代码

    关键代码:点我下载样式   详细介绍 //使用分页插件 jQuery("#pagination").pagination(data.total, { items_per_page: ...

  8. flex与js交互浅析

    1.flex调用js方法 调用方法例如:ExternalInterface.call("UploadComplete",oldName,uidName,_dir+"/&q ...

  9. 使用SQL脚本创建数据库,操作主键、外键与各种约束(MS SQL Server)

    在实际开发中,可能很少人会手写sql脚本来操作数据库的种种.特别是微软的MS SQL Server数据库,它的SQL Server Management Studio对数据库的图形化操作极致简便,从而 ...

  10. hibernate复习第(二)天

    今日要点: 关联映射 多对一(Employee - Department) 一对多(Department - Employee) 一对一(Person - IdCard) 多对多(teachet - ...