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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
JS正则表达式验证密码强度
Mar 18 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
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
PHP7 windows支持
2021/03/09 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
PyQt5每天必学之进度条效果
2018/04/19 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
django使用admin站点上传图片的实例
2019/07/28 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
酒店管理毕业生自我鉴定
2014/03/02 职场文书
护士个人自我鉴定
2014/03/24 职场文书
金融事务专业求职信
2014/04/25 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
自我管理的活动方案
2014/08/25 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
利用Redis实现点赞功能的示例代码
2022/06/28 Redis