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 相关文章推荐
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
谈谈AngularJs中的隐藏和显示
Dec 09 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
jQuery网页定位导航特效实现方法
2016/12/19 Javascript
js中的面向对象入门
2017/03/06 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
原生js实现日历效果
2020/03/02 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python复制文件的方法实例详解
2015/05/22 Python
Python面向对象特殊成员
2017/04/24 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python re模块的高级用法详解
2018/06/06 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
个人欠款担保书
2014/05/20 职场文书
服务承诺书怎么写
2014/05/24 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
管辖权异议上诉状
2015/05/23 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书