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 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
jquery带下拉菜单和焦点图代码分享
Aug 24 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
详解Django框架中的视图级缓存
2015/07/23 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
python实现手机销售管理系统
2019/03/19 Python
如何通过python画loss曲线的方法
2019/06/26 Python
详解python中的数据类型和控制流
2019/08/08 Python
django实现用户注册实例讲解
2019/10/30 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
煤矿安全生产责任书
2014/04/15 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
践行三严三实心得体会
2014/10/13 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏