js创建对象的方法汇总


Posted in Javascript onJanuary 07, 2016

js一个有三种方法创建对象,这里做一个总结.

1.对象直接量

所谓对象直接量,可以看做是一副映射表,这个方法也是最直接的一个方法,个人比较建议,

//创建简单对象
var obj1 = {}; //空对象

var obj2 = {
  name: "ys",
  age: 12
};
//创建复杂对象
var obj3 = {
  name: "ys",
  age: 12,
  like: {
    drink: "water",
    eat: "food"
  }
};

console.log(typeof obj1);  //object
console.log(typeof obj2);  //object
console.log(typeof obj3);  //object

有的人可能会发现,这里的键值名怎么没有引号”“,好细心,其实这个引号(单引双引号,js一样)加不加都行,但是个人建议加上,为什么能,因为加上之后,键值名可以很随意….当然如果你不乱定义名字的话,第一个比较好,因人而异,

var obj4 = {
  "my name": "ys",  //键值名中间有空格
  "my-age": 12,    //键值名中间有连字符
  "while": 111    //键值名是关键字
}

console.log(obj4['my name']);  //ys
console.log(obj4['my-age']);  //12
console.log(obj4.while);    //111
console.log(typeof obj3);    //object

通过上面的例子,大家可以看出”.”和”[]”访问属性的区别了吧

对象直接量创建的对象,键值对的值支持表达式,如下

var obj3 = {
  name: "ys",
  age: obj2.age,   //引用obj2.age
  like: {
    drink: "water",
    eat: "food"
  }
};

console.log(obj3.age); //100

2.new创建对象

1).系统内置对象

var obj1 = new Object();
var obj2 = new Array();
var obj3 = new Date();
var obj4 = new RegExp("ys");

console.log(typeof obj1);  //object
console.log(typeof obj2);  //object
console.log(typeof obj3);  //object
console.log(typeof obj4);  //object

2).自定义对象

function Person(name, age){
  this.name = name;
  this.age = age;
}

var obj1 = new Person("ys", 12);

console.log(Object.prototype.toString.call(obj1));  //object
console.log(Person instanceof Object);        //true
console.log(typeof obj1);              //object
console.log(obj1.age);                //12

3.Object.create()创建

该方法有两个参数,我就只解释下第一参数,第二个参数不常用(对对象的属性进行进一步描述)
第一个参数:传入要继承的原型(prototype)对象
怎样理解这句话呢?

var obj1 = Object.create({
  name: "ys",
  age: 12
});
console.log(obj1);     //{}
console.log(obj1.age);   //12

obj1为{},为什么可以访问到属性值呢?我们理解下第一个参数的意义“传入要继承的原型对象”

console.log(obj1.__proto__);  //Object {name: "ys", age: 12}

对象本身为空,但是原型链上数据不为空,存在obj1.age,所以可以访问到。

1).当第一个参数为null时

var obj2 = Object.create(null);   //不继承对象应有的属性和方法
console.log(obj2 + "abc");     //报错 ,失去 + 功能

为什么会报错呢?正常参数下生成的图如下:

js创建对象的方法汇总

通过图可以看出,要继承的原型对象(即参数)又继承了Object的原型对象,关键原因来了,Object的原型对象包含了一些js对象的基本方法(indexOf(),toString(),'+'功能……)而这个时候,如果参数为null,那么这条继承链就断了。

这个时候大家应该理解了一句话了吧,JavaScript中所有的对象都继承自Object,以为Object处于继承链的最顶端。

2).创建空对象

var obj3 = Object.create(Object.prototype); 
console.log(obj3);              //{},(空对象,与前两个方法 {},new Object 相同)
console.log(obj3.__proto__);         //如下图 ,只包含了基本对象的方法

代码的图:

js创建对象的方法汇总

这样创建的对象,只包含了对象的基本方法。

3).最后大家看下面的代码,希望能更深刻的理解Object.create()方法,大家可以参考这篇文章:《一种新的javascript对象创建方式Object.create()》

var obj1 = {
  name: "ys",
  age: 12
};
obj1.prototype = {
  sayName: function(){
    return console.log(this.name);
  }
};
/*①对象参数,只继承对象*/
var obj2 = Object.create(obj1);
console.log(obj2);                 //{}
console.log(obj2.name);               //ys
/*console.log(obj2.sayName());*/          /* 报错 obj2.sayName is not a function*/
console.log(obj2.__proto__.prototype.sayName());  //ys 理解原型的原型

如果不理解的话,看下面的图

js创建对象的方法汇总

/*②对象原型,继承对象原型*/
var obj3 = Object.create(obj1.prototype);
console.log(obj3);                 //{}
console.log(obj3.name);               //undefined,没有继承对象本身
obj3.name = "ys";
console.log(obj3.name);               //ys
console.log(obj3.sayName());            //ys

代码不理解看图(设置name后的图):

js创建对象的方法汇总

这个时候相信大家都理解第一个参数了吧。

以上就是本文的全部内容,希望可以帮助大家更好的创建对象。

Javascript 相关文章推荐
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
js同源策略详解
May 21 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 #Javascript
js确认框confirm()用法实例详解
Jan 07 #Javascript
实例讲解jquery与json的结合
Jan 07 #Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 #Javascript
基于jquery实现表格无刷新分页
Jan 07 #Javascript
js密码强度检测
Jan 07 #Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
如何实现动态删除javascript函数
2007/05/27 Javascript
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
python实现目录树生成示例
2014/03/28 Python
Python如何快速实现分布式任务
2017/07/06 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
python3实现高效的端口扫描
2019/08/31 Python
python set集合使用方法解析
2019/11/05 Python
python程序输出无内容的解决方式
2020/04/09 Python
零基础小白多久能学会python
2020/06/22 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
公司财务自我评价分享
2013/12/17 职场文书
2015年社区工作总结
2015/04/08 职场文书
工作失职自我检讨书
2015/05/05 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis