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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
用js实现in_array的方法
Nov 05 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 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写的带缓存数据功能的mysqli类
2012/09/06 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
Python中常用信号signal类型实例
2018/01/25 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
python向图片里添加文字
2019/11/26 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
给学校的建议书范文
2014/05/15 职场文书
博士生导师推荐信
2014/07/08 职场文书
法定代表人资格证明书
2014/09/11 职场文书
2014年教师工作总结
2014/11/10 职场文书
苏州园林导游词
2015/02/03 职场文书
九华山导游词
2015/02/03 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers