工厂模式

在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. 制作自己的嵌入式Linux电脑_转

    制作自己的嵌入式Linux电脑 http://os.51cto.com/art/201409/450334.htm 原文链接:http://blog.jobbole.com/75414/ 包含器件选择 ...

  2. cursor or set-based

    标题可能和正文不太相符.我主要是记录工作中遇到使用游标的语句改成普通set-based operation,执行时间快了很多. 1.游标语句 declare @startDate dateTime d ...

  3. iOS,非视图类方法

    1.判断类的实例 2.获取当前最高层Window 3.获取当前app是否活跃 4.允许所有请求 5.判断设备是否越狱 6.移除字符串换行符和空格 7.iOS注释方法或属性废弃或不可用 8.本地通讯录操 ...

  4. Jquery操作select,左右移动,双击移动 取到所有option的值

    $(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected& ...

  5. c++的构造函数

    我刚学的知识:c++的构造函数.在在此之前一直都处于迷惑之中,现在怕忘.所以赶紧把他写下来,用来以后复习,可能有错误的地方,请大牛们指出来.c++知识相对与c来说更加抽象,但真明白了,也就那一回事.这 ...

  6. 如何将页面的<br/>在Excel中正确换行

    在页面的<br />导致导出Excel中是会以多行的方式显示,达不到页面在一个单元格中进行换行,为此我们有以下两种方式: 1.CSS样式方式 <br style='mso-data- ...

  7. ElasticSearch

    ElaticSearch简介: ES是一个搜索引擎,基于当前最先进,最高效的全功能开源搜索引擎框架lucene ES还有许多功能: 分布式实时文件存储,并将每一个字段都编入索引,使其可以被搜索 近实时 ...

  8. Flipboard-BottomSheetlayout 源码分析

    BottomSheetLayout BottomSheet:Google在API 23中已经加入了这样的一个控件. BottomSheet介绍: BottomSheet是一个可以从底部飞入和飞出的An ...

  9. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  10. Global.asax文件说明

    Global.asax是我们的底层文件,第一次的IIS请求都会先去执行它里面的文件,所以学会它里面的函数是非常有必要的.而且我们总是忽略这里的知识点,总觉得这是不必须的,其实我们错了,这里才是程序的根 ...