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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
Angular短信模板校验代码
Sep 23 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
js同时按下两个方向键
2007/12/01 Javascript
用cssText批量修改样式
2009/08/29 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
简单谈谈Python中的闭包
2016/11/30 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
创意活动策划书
2014/01/15 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
司机岗位职责说明书
2014/07/29 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
北京英语导游词
2015/02/12 职场文书
律政俏佳人观后感
2015/06/09 职场文书