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 相关文章推荐
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
js实现div色块碰撞
Jan 16 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 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的类树(支持无限分类)
2006/10/09 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue实现拖拽效果
2019/12/23 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python求最大值最小值方法总结
2019/06/25 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python 发送邮件方法总结
2020/08/10 Python
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
python某漫画app逆向
2021/03/31 Python
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
JS 基本概念详细介绍
2021/10/16 Javascript
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS