js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)


Posted in Javascript onNovember 09, 2015

在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法。这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧。

前言

虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码。因此为了解决这个问题,人们开始使用以下几种方式来常见对象。

工厂模式

该模式抽象了创建对象的具体过程,用函数来以特定接口创建对象的细节

function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('谦龙','男','100');
 p1.show();
 var p2 = cPerson('雏田','女','14');
 p2.show();

工厂模式测试

工厂方式的问题:使用工厂模式能够创建一个包含所有信息的对象,可以无数次的调用的这个函数。虽然其解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即如何得知一个对象的类型)

构造函数模式

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('谦龙','男','100');
 p1.show();
var p2 = new CPerson('雏田','女','14');
 p2.show();

构造函数模式测试

注意构造函数与工厂模式有些不同的地方,如下

构造函数首字母大写

没有显式地创建对象

将属性和方法赋值给了 this 对象

没有return语句

而且以这种方式来调用构造函数会大致经历一下 几个步骤

创建一个新的对象

将构造函数的作用域赋值给这个对象(因此this就指向了这个对象)

执行构造函数中的代码(即给新对象添加属性和方法的过程)

返回对象

注意:构造函数其实和普通的函数没有太大的差别,唯一的不同在于调用方式的不同。以下演示不同的几种调用方式

// 调用方式1 new 方式
 var p1 = new CPerson('谦龙','男','100');
 p1.show();//谦龙 100 男
 // 调用方式2 普通函数调用
 CPerson('谦龙','男','100');
 window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上
 // 调用方式3 在另一个对象的作用域中调用
 var obj = new Object();
 CPerson.call(obj,'谦龙','男','100');
 obj.show(); //谦龙 100 男 在obj的作用域

构造函数的问题:使用构造函数最主要的问题就是每个方法都要在每个实例上重新创建一次,p1与p2的都有show方法,但不是同一个Function的实例,因为function在js中也是一个对象。因此他们共有的show方法并不相等。

原型模式

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

好处是可以让所有对象的实例共享他的属性的方法。即无需在构造函数中定义实例的信息

function CPerson(){
}
CPerson.prototype.name='谦龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //谦龙 100 男
var p2 = new CPerson();
 p2.show();//谦龙 100 男
 console.log(p1.show == p2.show)//true

以上内容是关于js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式),希望大家喜欢。

Javascript 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 #Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
Nov 09 #Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 #Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 #Javascript
jquery实现简易的移动端验证表单
Nov 08 #Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 #Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
python中format()函数的简单使用教程
2018/03/14 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
学生会主席演讲稿
2014/04/25 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
捐款活动总结
2014/08/27 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
部队个人年终总结
2015/03/02 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
Python字符串格式化方式
2022/04/07 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL