工厂模式

在ECMAscript中无法创建类,所以开发人员就发明了一种函数,用函数来封装,以特定接口创建对象的细节,如下面的例子所示:
function createPerson(name,age,job){
var temp=new Object();
temp.name=name;
temp.age=age;
temp.job=job;
temp.sayName=function(){
alert(this.name);
}
return temp; }
var person1=createPerson("Nick",20,"student");
var person2=createPerson("Lucy",24,"Doctor");
person1.sayName();//Nick
person2.sayName();//Lucy
person1==person2;//false

函数CreatePerson能够根据接受的参数来构建一个Person对象.我们可以无数次的调用这个函数,而每次它返回一个包括三个属性一个方法的对象.

构造函数模式

ECMAScript中的构造函数可用来创建特定类型的对象.我们可以创建自定义的构造函数,从而定义自定义对象对象类型的属性和方法,如下面的例子所示:
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name);
};
}
var person1=new Person("Nick",20,"Student");
var person2=new Person("Lucy",22,"Doctor");
person1.sayName();//Nick
person2.sayName();//Lucy
person1==person2;//false

我么可以看到,Person()中的代码并没有显示地创建对象,而是直接将属性和方法赋给了this对象.要创建Person的实例,必须使用new操作符,以调用构造函数的方式创建对象实际上经历以下4个步骤:

  1. 创建一个新对象;
  2. 将构造函数的作用域赋给新对象(此时this就指向了这个新对象);
  3. 执行构造函数里面的代码(为这个新对象添加属性和方法);
  4. 返回新对象

在上面的代码中可以看到,person1和person2分别保存着Person的不同实例,这两个对象都有一个constructor(构造函数)属性,该属性指向Person,如下面所示:

person1.constructor==Person;//true
person2.constructor==Person;//true

原型模式

我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法.换句话说,不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象当中,如下面的例子所示:
"use strict"//执行严格模式
function Person(){ }
Person.prototype.name="Nick";
Person.prototype.age="24";
Person.prototype.job="student";
Person.prototype.sayName=function(){
alert(this.name);
}
var person1=new Person();
var person2=new Person();
person1.sayName();//Nick
person2.sayName();//Nick
person1==person2;//false
person1.sayName==person2.sayName;//true

我们将sayName()方法和所有属性都直接添加到了Person的prototype属性中,构造函数变成了空函数.但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的.换句话说,person1和person2访问的都是同一组属性和同一个sayName()函数.

javascript对象创建方式的更多相关文章

  1. JavaScript—对象创建方式

    JavaScript 也是面向对象的语言(oop) 之前学JavaScript 没有学对象.现在做下笔记 创建对象的方式: 1.  对象字面量 const hero = { name: '吕布', w ...

  2. javascript一种新的对象创建方式-Object.create()

    1.Object.create() 是什么? Object.create(proto [, propertiesObject ]) 是E5中提出的一种新的对象创建方式,第一个参数是要继承的原型,如果不 ...

  3. 【20190220】JavaScript-知识点整理:对象创建方式、原型、闭包

    一.对象创建方式 1. 工厂模式 这种模式抽象了创建具体对象的过程,用函数来封装以特定接口创建对象的细节.存在的问题是无法通过 instanceof 识别一个对象的类型. function creat ...

  4. 第163天:js面向对象-对象创建方式总结

    面向对象-对象创建方式总结 1. 创建对象的方式,json方式 推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. var obj = {}; //对象有自己的 属性 和 行 ...

  5. JavaScript对象创建的几种方式

    1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...

  6. Javascript 对象创建多种方式 原型链

    一.对象创建 1.new Object 方式 直接赋上属性和方法 var obj = new Object(); obj.name = '娃娃'; obj.showName = function(){ ...

  7. 详解JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数成为 Children 的方法,然 ...

  8. 深入JavaScript对象创建的细节

    最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式.如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理 ...

  9. JavaScript对象继承方式

    一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Parent 构造函数 成为 Children 的方法, ...

随机推荐

  1. oracle or语句的坑

    SELECT SUM(tjo.pay_amount) FROM tb_jf_order tjo,tb_jf_gateway_trade_log tjg WHERE tjo.order_id = tjg ...

  2. 从Nginx的Web请求处理机制中剖析多进程、多线程、异步IO

    Nginx服务器web请求处理机制 从设计架构来说,Nginx服务器是与众不同的.不同之处一方面体现在它的模块化设计,另一方面,也是最重要的一方面,体现在它对客户端请求的处理机制上. Web服务器和客 ...

  3. Excel筛选之后如何下拉递增

    1.痛点 Excel表格,通过筛选了之后,再想统计行数,通过单纯的拖动或者填充排序啥的,都无法做到排序或行数递增: 2.解决方案 发现了个excel的公式可以完美解决该问题,赞个,找的好辛苦. 3.大 ...

  4. spark转换集合为RDD

    SparkContext可以通过parallelize把一个集合转换为RDD def main(args: Array[String]): Unit = { val conf = new SparkC ...

  5. margin属性

    可以设置position:absolute/relative/fixed,通过调节top/bottom/left/right实现元素的定位,这样很好,但是有时候想通过margin来实现. 下面是mar ...

  6. Hadoop平台常用配置及优化建议

    当发现作业运行效率不理想时,需要对作业执行进行性能监测,以及对作业本身.集群平台进行优化.优化后的集群可能最大化利用硬件资源,从而提高作业的执行效率.本文记录了在hadoop集群平台搭建以及作业运行过 ...

  7. java内省机制及PropertyUtils使用方法

    背景 一般情况下,在Java中你可以通过get方法轻松获取beans中的属性值.但是,当你事先不知道beans的类型或者将要访问或修改的属性名时,该怎么办?Java语言中提供了一些像java.bean ...

  8. MWeb 1.7.1 版发布!支持导出为 RTF 和 Docx、发布到 Evernote 带样式、文档库备份和新网站主题等大量改进!

    编辑器及发布服务改进 增加设置图片宽度和居左.居右.居中的语法. 如:![图片说明-w450](pic.jpg) 这样表示设置图片宽度为 450.其中 -w450 为设置语法,生成 HTML 时会自动 ...

  9. Leetcode: Unique Substrings in Wraparound String

    Consider the string s to be the infinite wraparound string of "abcdefghijklmnopqrstuvwxyz" ...

  10. Ubantu16.04一键部署Cacti监控服务器

    Ubantu16.04一键部署Cacti监控服务器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 欢迎加入高级运维工程师之路:598432640 一.查看系统环境(关于该系统的安装 ...