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 尚未实现错误解决办法
Nov 27 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
详解vue v-model
Aug 31 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类使用方法示例分享
2014/03/29 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python下singleton模式的实现方法
2014/07/16 Python
python Django模板的使用方法
2016/01/14 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
一个SQL面试题
2014/08/21 面试题
集团公司人力资源部岗位职责
2014/01/03 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
优秀学生获奖感言
2014/02/15 职场文书
市场总经理岗位职责
2014/04/11 职场文书
教师评语大全
2014/04/28 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Nginx安装配置详解
2022/06/25 Servers