js创建对象几种方式的优缺点对比


Posted in Javascript onSeptember 28, 2016

比较js中创建对象的几种方式

1.工厂模式

function createObj(name, sex){
    var obj = new Object();
    obj.name = name;
    obj.sex = sex;
    obj.sayName = function(){
      alert(this.name);
    }
    return obj;
  }

var person = createObj('Tom', 'man');

缺点:①无法确定对象的类型(因为都是Object)。

 ②创建的多个对象之间没有关联。

 2.构造函数

function createObj(name, sex){
    this.name = name;
    this.sex = sex;
    this.sayName = function(){
      alert(this.name);
    }
  }

  var person = new createObj('Tom', 'man');

缺点:①多个实例重复创建方法,无法共享。

   ②多个实例都有sayName方法,但均不是同一个Function的实例。 

3.原型方法

function createObj(){}

  createObj.prototype.name = 'Tom';
  createObj.prototype.sex = 'man';
  createObj.prototype.sayName = function(){
    alert(this.name);
  }

var person = new createObj();

缺点:①无法传入参数,不能初始化属性值。

   ②如果包含引用类型的值时,改变其中一个实例的值,则会在所有实例中体现。 

4.组合式(构造函数+原型方法)推荐使用

function createObj(name, sex){
  this.name = name;
  this.sex = sex;
 }
 createObj.prototype.sayName = function(){
  alert(this.name);
 }

 var person = new createObj('Tom', 'man');

优点:构造函数共享实例属性,原型共享方法和想要共享的属性。可传递参数,初始化属性值。 

5.动态原型方法

function createObj(name, sex){
  this.name = name;
  this.sex = sex;
  if(typeof this.sayName != 'function'){
   createObj.prototype.sayName = function(){
    alert(this.name);
   }
  }
 }

 var person = new createObj('Tom', 'man');

说明:if语句中只会调用一次,就是在碰到第一个实例调用方法时会执。此后所有实例都会共享该方法。在动态原型方法下,不能使用对象字面量重写原型。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
js工具方法弹出蒙版
May 08 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
AngularJS指令用法详解
Nov 02 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
AngularJS表单验证中级篇(3)
Sep 28 #Javascript
微信公众号 客服接口的开发实例详解
Sep 28 #Javascript
jQuery解析XML 详解及方法总结
Sep 28 #Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 #Javascript
微信小程序 实例应用(记账)详解
Sep 28 #Javascript
JavaScript 闭包详细介绍
Sep 28 #Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 #Javascript
You might like
PHP操作XML作为数据库的类
2010/12/19 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
python实现无证书加密解密实例
2014/10/27 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
什么是servlet链?
2014/07/13 面试题
求职自荐书范文
2013/12/04 职场文书
护士毕业生自荐信
2014/02/07 职场文书
网络技术专业求职信
2014/02/18 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
正规借条模板
2015/05/26 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA