js创建对象的方法汇总

更新时间：2016年01月07日 16:50:53 作者：xi_2130

这篇文章主要介绍了js创建对象的方法，js一个有三种方法创建对象，这里为大家做一个总结，感兴趣的小伙伴们可以参考一下

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");     //报错 ，失去 + 功能

为什么会报错呢？正常参数下生成的图如下：

通过图可以看出，要继承的原型对象（即参数）又继承了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__);         //如下图 ，只包含了基本对象的方法

代码的图：

这样创建的对象，只包含了对象的基本方法。

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 理解原型的原型

如果不理解的话，看下面的图

/*②对象原型，继承对象原型*/
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后的图）：

这个时候相信大家都理解第一个参数了吧。

以上就是本文的全部内容，希望可以帮助大家更好的创建对象。

您可能感兴趣的文章:

实现无刷新联动例子汇总
最近在用asp.net做项目的时候，遇到需要实现无刷新联动的需求，度娘了一下，这里汇总一下几个比较实用的例子，有需要的小伙伴可以参考下。
2015-05-05
详解ES6语法之可迭代协议和迭代器协议
这篇文章主要介绍了详解ES6语法之可迭代协议和迭代器协议,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Javascript闭包实例详解
闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在，本文通过代码实例给大家介绍javascript闭包，对javascipt闭包相关知识感兴趣的朋友一起学习吧
2015-11-11
javascript 制作坦克大战游戏初步图片与代码
javascript 制作坦克大战游戏初步图片与代码...
2007-11-11
JavaSript中变量的作用域闭包的深入理解
js中的变量都是公用的没有静态变量，下面为大家介绍下变量的作用域闭包,需要的朋友可以参考下
2014-05-05
Javascript的表单验证-初识正则表达式
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。接下来通过本文给大家介绍Javascript的表单验证-初识正则表达式，对js表单验证正则表达式相关知识感兴趣的朋友一起学习吧
2016-03-03
JavaScript分页组件使用方法详解
这篇文章主要为大家详细介绍了JavaScript分页组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
JS异步编程之generator与async/await语法糖详解
这篇文章主要为大家详细介绍了JS异步编程中generator与async/await语法糖的使用，文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下
2022-11-11
js控制鼠标事件移动及移出效果显示
鼠标事件的移动及移出效果都可以使用js来自定义，下面有个示例，实，效果为当事件发生改变时背景颜色也随着改变
2014-10-10
JS动态创建DOM元素的方法
这篇文章主要介绍了JS动态创建DOM元素的方法,涉及javascript动态创建DOM元素及DOM元素事件绑定与删除的相关技巧,需要的朋友可以参考下
2015-06-06

js创建对象的方法汇总

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具