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实现对话框的教程
Jun 04 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
js实现动态显示时间效果
Mar 06 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
PHP多态代码实例
2015/06/26 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
一个入门级python爬虫教程详解
2021/01/27 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
介绍一下UNIX启动过程
2013/11/14 面试题
测试工程师岗位职责
2013/11/28 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
质量管理标语
2014/06/12 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
优秀教师推荐材料
2014/12/16 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书