javascript创建对象的3种方法


Posted in Javascript onNovember 02, 2016

本文为大家分享了js创建对象的多种方法,分享个方法的优劣,具体内容如下

第一种创建对象的方式:

创建JSON对象
推荐使用的场合: 作为函数的参数,临时只用一次的场景。比如设置函数原型对象。

var object = {
  name: "Eric",
  age: 24,
  sayHi: function(){
   console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
  }
 };

第二种创建对象的方式:

创建一个Object对象

var object = new Object();
 object.name = "Eric";
 object.age = 24;
 object.sayHi = function(){....};

以上两种创建对象方式的缺点:不能作为对象创建的模板,也就是不能用new进行构造新对象。

第三种创建对象的方式:

function Person() {
  this.name = "Eric";
  this.age = 24;
  this.sayHi = function(){
   console.log(this.name);
  }
 }

 var object1 = new Person();
 var object2 = new Person();

这种创建对象方式解决了前两种方式的缺点,可以作为对象创建的模板,可以一直复用创建出多个对象。

new运算符的作用:

执行构造函数(new后面的那个函数),在构造函数内部创建一个空对象
把上一部创建的空对象跟构造函数的原型对象进行关联
然后把this指向当前空对象
在构造函数执行结束后,如果没有return,把空对象返回给object

new运算符原理

第三种方式有个缺点: 对象的内部的函数会在每个对象中都存一份如果创建的对象非常多的话,那么非常浪费内存。函数的行为是所有对象可以共有,不需要每个对象都保存一份。所以,可以把函数放到原型中进行声明,那么所有对象都有了公共的函数,而且内存中只保留一份。所有的属性写到对象的内部

第三种方式beta1:

function Person() {
  this.name = 'Eric';
  this.age = 24;
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person();
 var object2 = new Person();

继续升级 beta2 :

function Person(name,age) {
  this.name = name || "";
  this.age = age || "";
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person(name1,age1);
 var object2 = new Person(name2,age2);

问题:1、调用者如果传递参数的顺序发生变化,那么废了
问题:2、参数增减都会导致函数声明变化,调用的地方也可能发生变化。

如何解决:继续升级 beta3 :

function Person(option) { //用一个对象把所有参数覆盖
  this.name = option.name || "";
  this.age = option.age || "";
 }
 Person.prototype = {
  sayHi: function() {
  },
 };

 var object1 = new Person({
   name: "Eric",
   age: 24
  });
 var object2 = new Person({
   name: "XXX",
   age: xx
  });

继续优化,把初始化的代码 放到init函数中

继续升级 beta4 :

function Person(option) {
  this._init(option);
 }
 Person.prototype = {
  _init: function (option){
   this.name = option.name;
   this.age = option.age;
  },
  sayHi: function(){
   console.log("HI");
  }
 };

 var object1 = new Person({
   name: "Eric";
   age: 24
  });
 object1.sayHi();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 #Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 #Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 #Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 #Javascript
在JSP中如何实现MD5加密的方法
Nov 02 #Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 #Javascript
JavaScript基础——使用Canvas绘图
Nov 02 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
php explode函数实例代码
2012/02/27 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP时间和日期函数详解
2015/05/08 PHP
php实现映射操作实例详解
2019/10/02 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python之循环结构
2019/01/15 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
参观考察邀请函范文
2014/01/29 职场文书
学生感冒英文请假条
2014/02/04 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书