对象字面量和构造函数建立对象的区别?

看了这篇文章,能够帮助你理解以下内容:javascript

一、向原型链上添加属性为何用prototype,而通常不用__proto__java

二、javascript为何要设置一个函数对象,他的做用是什么函数

三、更深层次了解原型链this

废话很少说了,正文开始>>>spa

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

以下两段代码,分别是使用对象字面量和构造函数建立对象。code

代码段1:对象

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

代码段2:blog

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

首先,咱们须要知道:继承

一、函数对象的原型是对象(原型链为:实例,经过new构造函数-->函数对象-->对象-->null)

二、函数有prototype属性,而对象没有

而后,在某些场景下,咱们有一个公共的属性,须要多个新建的对象去继承,这个时候就能体现出函数对象的特色了,咱们看下代码:

一、使用构造器

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

二、使用对象字面量

使用对象字面量建立的是对象,他没有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是对象也是继承的对象的原型,多以致使了这个问题的出现。

最后,总结下来就是:

函数对象是继承自对象的原型,有了函数对象,咱们能够给函数的原型添加属性,这些属性保存在函数对象中,可是又不会影响其余对象。

图片描述

相关文章
相关标签/搜索