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 事件队列调整方法
Sep 18 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
node+express制作爬虫教程
Nov 11 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
vue实现数字滚动效果
Jun 29 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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 输出简单动态WAP页面
2009/06/09 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
ES6学习教程之对象字面量详解
2017/10/09 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python模拟鼠标拖动操作的方法
2015/03/11 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
局域网标准
2016/09/10 面试题
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
高三自我鉴定范文
2013/10/19 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
初中家长评语和期望
2014/12/26 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2015元旦感言
2015/12/09 职场文书
入党转正申请书范文
2019/05/20 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python