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 相关文章推荐
可选择和输入的下拉列表框示例
Nov 05 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 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
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
《海底世界》教学反思
2014/04/16 职场文书
学校募捐倡议书
2014/05/14 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
2015年行政部工作总结
2015/04/28 职场文书
小学班主任工作随笔
2015/08/15 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript