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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 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
sql注入与转义的php函数代码
2013/06/17 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
用js实现控制内容的向上向下滚动效果
2007/06/26 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python动态导入模块的方法实例分析
2018/06/28 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python socket聊天脚本代码实例
2020/01/02 Python
python 串行执行和并行执行实例
2020/04/30 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
档案管理员岗位职责
2013/12/01 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
毕业实习评语
2014/02/10 职场文书
法律专业自荐信
2014/06/03 职场文书
营销计划书
2015/01/17 职场文书
给客户的感谢信
2015/01/21 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电