视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
创建js对象的三种方法
2020-11-27 20:32:14 责编:小采
文档
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()方法

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后的图):

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

下载本文
显示全文
专题