Object构造函数和对象字面量都可以用来创建单个对象,但是在创建多个对象时,会产生大量重复代码.

1.工厂模式

工厂模式抽象了创建具体对象的过程.由于ECMAScript无法创建类,我们用函数来封装以特定接口创建对象的细节.

function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
console.log(this.name);
}
return o;
} // 根据接收到的参数,构建一个包含三个属性一个方法的对象,并返回
var person1 = createPerson("zhu", 26, "FE");

ps. 工厂模式解决了创建多个相似对象的问题,却无法识别对象(对象的类型)

2.构造函数模式

用来创建特定类型的对象,比如Object/Array这样的原生构造函数,或者自定义构造函数(可以自定义对象类型的属性和方法).

/* 1.没有显示创建对象
* 2.直接将属性和方法赋值给this对象
* 3.没有return语句
* 4.首字母大写(区别于ECMAScript中其他函数,构造函数本身也是函数,只不过可以创建对象)
*/
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
console.log(this.name);
}
} // 必须使用new操作符
var person1 = new Person("zhu", 26, "FE");
var person2 = new Person("liu", 23, "JAVA");

2.1 调用该总种构造函数会经历四个步骤

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

2.2 对象类型

  1. person1,person2分别保存着Person的一个不同实例,两个对象都有constructor(构造函数)属性指向Person.

    person1.constructor == Person, person2.constructor == Person // true
  2. person1,person2既是Object实例也是Person实例.

    // 所有对象均继承自Object
    person1 instanceof Object, person1 instanceof Person // true
    person2 instanceof Object, person2 instanceof Person // true

ps. 创建自定义构造函数意味着可以将它的实例标识为一种特定的类型.

2.3 将构造函数当作函数

构造函数与普通函数的区别在于调用它们的方式不同,只要通过new操作符调用,它就可以作为构造函数.

// 当作构造函数使用,使用new操作符来创建一个新对象.
var person = new Person("zhu", 26, "FE");
person.sayName(); // 作为普通函数调用,属性和方法都被添加到window对象.
// 在全局作用域中调用一个函数时,this对象总是指向Global对象(在浏览器中就是window对象)
Person("zhu", 26, "FE");
window.sayName(); // 使用call()或者apply()在某个特定对象的作用域中调用
var o = new Object();
Person.call(o, "zhu", 26, "FE");
o.sayName();

ps. 构造函数模式定义的构造函数是定义在Global对象中的.

2.4 构造函数的问题

每个方法都要在每个实例上重新创建一遍,person1和person2的同名sayName方法不是同一个function的实例.

ps. ECMAScript的函数是对象,因此每定义一个函数,也就实例化一个对象.即每个Person实例都包含一个不同function实例.

// 逻辑上的构造函数可以这样定义
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = new function() {
console.log(this.name);
}
}

没有必要创建两个完成同样任务的function实例,然而将sayName提到全局虽然解决做同一件事的问题,但是实际上只能被某个对象调用,而且可能需要定义很多全局函数(无封装性).

JS面向对象设计-创建对象的更多相关文章

  1. js面向对象设计之class继承

    EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖,所以它们并没有带来任何的新特性 ...

  2. js面向对象设计之class类

    class 相对 function 是后出来的,既然 class 出来了,显然是为了解决 function 在处理面向对象设计中的缺陷而来.下面通过对比,来看看 class 作为 ES6 中的重大升级 ...

  3. js面向对象设计之function类

    本文仅探讨如何合理的使用 function 在 javascript中实现一个面向对象设计的类.总所周知,javascript 并不能实现一个真正意义上的类,比如 protect 比如 函数重载.下面 ...

  4. js面向对象 多种创建对象方法小结

    转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...

  5. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  6. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  7. js面向对象之创建对象

    工厂模式 function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = ...

  8. 读Javascript高级程序设计第三版第六章面向对象设计--创建对象

    虽然Object构造函数或者对象字面量都可以用来创建单个对象,但是缺点非常明显:使用同一接口创建很多对象,会产生大量重复代码. 工厂模式  1 function CreatePerson(name,a ...

  9. JS面向对象之创建对象模式

    虽然Object构造函数或对象字面量都可以用来创建单个对象,但都有一个缺点,使用同一个接口来创建对象,会产生大量重复的代码,为解决这个问题,引出下列方法 1.工厂模式 抽象了创建具体对象的过程,用函数 ...

随机推荐

  1. 【Spring IoC】IoC容器初始化(二)

    Ioc容器的初始化是由refresh()方法来启动的,这个方法标志着Ioc容器的正式启动. 具体来说这个启动过程包括三个基本过程: BeanDefinition的Resource定位 BeanDefi ...

  2. LG1983 「NOIP2013」车站分级 拓扑排序

    问题描述 LG1983 题解 考虑建立有向边\((a,b)\),代表\(a\)比\(b\)低级. 于是枚举每一辆车次经过的车站\(x \in [l,r]\),如果不是车辆停靠的车站,则从\(x\)向每 ...

  3. VMware虚拟机安装使用及系统安装教程

    虚拟机是利用软件来模拟出完整计算机系统的工具.具有完整硬件系统功能的.运行在一个完全隔离环境中.虚拟机的使用范围很广,如未知软件评测.运行可疑型工具等,即使这些程序中带有病毒,它能做到的只有破坏您的虚 ...

  4. openLayers绘制静态底图

    由于项目需要,需要是使用openlayers框架,于是开始安利一波openlayers,可以点击 https://openlayers.org/   进入他的官网下载相关资源和案例 学习的过程总是慢慢 ...

  5. Genome Sequencing of MuseumSpecimens Reveals Rapid Changes in the Genetic Composition of Honey Bees in California

    文章地址:https://academic.oup.com/gbe/article/10/2/458/4810442#supplementary-data Abstract 在自然生态系统和管理生态系 ...

  6. [BJOI2019]奥术神杖(AC自动机,DP,分数规划)

    题目大意: 给出一个长度 $n$ 的字符串 $T$,只由数字和点组成.你可以把每个点替换成一个任意的数字.再给出 $m$ 个数字串 $S_i$,第 $i$ 个权值为 $t_i$. 对于一个替换方案,这 ...

  7. 【领会要领】web前端-轻量级框架应用(jQuery基础)

    作者 | Jeskson 来源 | 达达前端小酒馆 jquery的安装和语法,jquery的多种选择器,dom操作和jquery事件. jQuery框架,简介,优势,安装,语法,jQuery选择器,i ...

  8. [LeetCode] 647. Palindromic Substrings 回文子字符串

    Given a string, your task is to count how many palindromic substrings in this string. The substrings ...

  9. 源码解读SLF4J绑定日志实现的原理

    一.导读 我们使用log4j框架时,经常会用slf4j-api.在运行时,经常会遇到如下的错误提示: SLF4J: Class path contains multiple SLF4J binding ...

  10. 【报名中】【5G探索】深度揭秘5G核心技术与挑战,云+社区开发者大会北京站等你来!

    报名渠道(扫描下方二维码) 开发者专属福利 限量手办 现场幸运签到开发者即可获得,早到获奖几率更大 幸运抽奖 一等奖:1名 JBL LIVE650 BTNC无线主动降噪智能耳机 二等奖:3名 JBL ...