栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

一个实例看懂JS四种创建对象方式的区别

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

一个实例看懂JS四种创建对象方式的区别

1. 概述

JS中常用的创建对象方式有四种:

  1. 对象字面量
  2. new Object()
  3. 构造函数
  4. Object.create()

这四种方式虽然都能创建对象,但是还是有区别的,接下来我们研究下。

2. 功能相同

先来看一个实例,我们使用4种方式创建4个对象。

		// 对象字面量
 var dog1 = {
     name: '大黄',
     age: 2,
     speak: function () {
  console.log("汪汪");
     }
 }
 // 使用Object
 var dog2 = new Object();
 dog2.name = "大黄";
 dog2.age = 2;
 dog2.speak = function () {
     console.log("汪汪");
 }
 // 使用构造函数
 function Dog(name, age) {
     this.name = name;
     this.age = age;
 }
 Dog.prototype.speak = function () {
     console.log("汪汪");
 };
 var dog3 = new Dog("大黄", 2);
 // 使用Object.create
 var dog4 = Object.create(dog1);

这4个对象都是有name、age两个属性和speak一个方法,我们来测试下:

	 	console.log(dog1.name + dog1.age);
 dog1.speak();
 console.log(dog2.name + dog2.age);
 dog2.speak();
 console.log(dog3.name + dog3.age);
 dog3.speak();
 console.log(dog4.name + dog4.age);
 dog4.speak();

执行结果如下,可见他们的功能是一样的。

3. 结构不同

虽然使用起来功能一样,但是实际这4个对象的结构并不是一样的,我们继续执行以下代码:

		console.log(dog1);
 console.log(dog2);
 console.log(dog3);
 console.log(dog4);

执行结果如下:

可见,对象字面量和new Object方式创建的对象结构是一样的。

使用构造函数创建的对象,speak方法是在其原型上的。

而使用Object.create创建的对象,原对象的属性和方法都会挂到新对象的原型上。

4. 小结

使用没区别,结构有区别,还是要加以区分的。

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号