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 相关文章推荐
javascript完美拖拽的实现方法
Sep 29 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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调试函数和日志记录函数分享
2015/01/31 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
企业内控岗位的职责
2014/02/07 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
话题作文之学会尊重
2019/12/16 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers