对象字面量和构造函数创建对象的区别？

0x584a 发布于2019-08-26 11:42 / 1292人阅读

摘要：如下两段代码，分别是使用对象字面量和构造函数创建对象。最后，总结下来就是函数对象是继承自对象的原型，有了函数对象，我们可以给函数的原型添加属性，这些属性保存在函数对象中，但是又不会影响其他对象。

看了这篇文章，可以帮助你理解如下内容：

1、向原型链上添加属性为什么用prototype，而一般不用__proto__

2、javascript为什么要设置一个函数对象，他的作用是什么

3、更深层次了解原型链

废话不多说了，正文开始>>>

对象字面量创建的是对象，而构造函数创建的是函数对象。为了帮助理解，我写了一些代码。

如下两段代码，分别是使用对象字面量和构造函数创建对象。

代码段1：

var a={"name":"nihao"};
console.log(a);

代码段2：

var a=function(name){
    this.name=name;
};
var b= new a("nihao");
console.log(b);

首先，我们需要知道：

1、函数对象的原型是对象(原型链为：实例，通过new构造函数-->函数对象-->对象-->null)

2、函数有prototype属性，而对象没有

然后，在某些场景下，我们有一个公共的属性，需要多个新建的对象去继承，这个时候就能体现出函数对象的特点了，我们看下代码：

1、使用构造器

var a=function(name){
    this.name=name;
};
a.prototype.sex="nan";
var b= new a("nihao");
console.log(b);
console.log(b.name);
console.log(b.sex);

var c=new a("test");
console.log(c);
console.log(c.name);
console.log(c.sex);

如上，可以很容易的实现属性或方法的继承，在控制台打印上述代码，可以很容易看到原型链是这样的(以对象b为例)：对象b-->函数对象-->对象-->null

2、使用对象字面量

使用对象字面量创建的是对象，他没有prototype属性，所以我们只能通过__proto__，但是在对象上使用__proto__可能会导致一些问题的出现。代码如下：

var a={"name":"nihao"};
a.__proto__.sex="nan";
console.log(a);
console.log(a.name);
console.log(a.sex);
var b={};
console.log(b);
console.log(b.name);
console.log(b.sex);

如上，运行上面代码，可以很容易得到运行结果：

{name: "nihao"} nihao nan {} undefined nan

哎，这个就很奇怪了，b对象明明设置的为空啊？这是因为在执行a.__proto__.sex="nan";时候，程序向对象的原型上添加了一个属性sex，而b是对象也是继承的对象的原型，多以导致了这个问题的出现。

最后，总结下来就是：

函数对象是继承自对象的原型，有了函数对象，我们可以给函数的原型添加属性，这些属性保存在函数对象中，但是又不会影响其他对象。

云服务器 GPU云服务器字面量对象对象javascript字面量 js数据对象和对象的区别吗匹配对象的属性和函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107401.html

通过对象字面量和构造函数创建对象的区别：

摘要：通过对象字面量方式创建对象我们可以直接在创建对象的时候添加功能或者首先定义一个空对象，然后添加属性和方法上面的空对象为什么打了双引号这只是一种简称而已。通过对象字面量方式创建对象：我们可以直接在创建对象的时候添加功能 var person = { name : zqq, age : 28, say : function(){ return ...

marser 2019-08-20 14:31 评论0 收藏0
《JavaScript模式》读书笔记(二)字面量和构造函数

摘要：对象字面量定义一个空对象这里的空指的是其自身属性为空，对象继承了的属性和方法添加属性方法完全删除属性方法自定义构造函数用操作符调用构造函数时，函数内部会发发生以下情况创建一个新对象，并且引用了该对象并继承了该函数的原型属性和方法被加入到的引对象字面量 //定义一个空对象,这里的空指的是其自身属性为空，dog对象继承了Object.prototype的属性和方法 var dog={} ...

_Zhao 2019-08-26 12:18 评论0 收藏0
关于创建对象的三种写法 ---- 字面量,new构造器和Object.create()

摘要：前言重新梳理一下发现以前说的有问题顺便比较两两写法之间的差异性使用对象字面量表示法函数字面量运行时间嵌套函数字面量调用方法函数字面量运行时间函数字面量运行时间使用操作符后跟构造函数详情可参考关于中的运算符构造函数与原型链一些理解构造函数原型前言 PS:2018/04/14: 重新梳理一下发现以前说的有问题,顺便比较两两写法之间的差异性. 1、使用对象字面量表示法 console.ti...

Jiavan 2019-08-26 10:26 评论0 收藏0
《javascript高级程序设计》第六章读书笔记之 javascript对象的几种创建方式

摘要：三种使用构造函数创建对象的方法和的作用都是在某个特殊对象的作用域中调用函数。这种方式还支持向构造函数传递参数。叫法上把函数叫做构造函数，其他无区别适用情境可以在特殊的情况下用来为对象创建构造函数。一、工厂模式工厂模式：使用字面量和object构造函数会有很多重复代码，在此基础上改进showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

xiaotianyi 2019-08-23 14:31 评论0 收藏0
闲话JavaScript数据类型

摘要：支持的类型的内置数据类型罗列如下自定义自定义这三种类型的赋值是同类似的。这根不同，这因为是没有包装类新增的基本类型，只支持函数式赋值，不支持字面量和函数构造。 JavaScript支持的类型 JS的内置数据类型罗列如下： undefined null bool number string function object Function Date ...

jerryloveemily 2019-08-20 18:04 评论0 收藏0