如何更好地理解Javascript对象的自有属性和原型继承属性

kviccn 发布于2019-08-21 10:36 / 2876人阅读

摘要：对象具有自有属性，也有一些属性是从原型对象继承而来的。为了更好地理解对象自有属性和继承属性下面的示例深入解释了属性的访问和设置细节。在给对象的属性赋值时，是在原始对象上创建属性或者对已有属性赋值，而不会去修改原型链。

Javascript对象具有“自有属性”（own property），也有一些属性是从原型对象继承而来的。为了更好地理解对象自有属性和继承属性下面的示例深入解释了属性的访问和设置细节。

function Obj () {
    this.z = 3;//自有属性
}

//对象会继承原型里的属性
Obj.prototype.x = 1;
Obj.prototype.y = 2;

var o = new Obj();
console.log(o); //o的打印结果如下图，可以看到其自有属性和继承自原型的属性

假设要查询对象o的属性y, 如果o自有属性中不存在y, 那么会继续在o的原型对象中查找属性y。如果原型对象中也没有y，但这个原型对象也有原型，那么继续在这个原型对象的原型上执行查询，直到没找到y或者查找到一个原型是null的对象为止。对象的原型属性构成了一个“链”。通过这个“链”可以实现属性的继承。

现在假设给对象o的属性x赋值，如果o中已经有属性x(自有属性，不是继承来的)那么这个赋值操作只改变这个已有属性x的值。如果o中不存在属性x, 那么赋值操作给o添加一个新属性x。如果之前o继承了自己的原型对象的x属性，那么这个继承的属性就被新创建的同名属性屏蔽了。

o.x = 5;
console.log(o);
console.log(o.x);// 5

从打印结果可以看到对象创建了一个自有属性x，屏蔽了之前继承来的x值，这个操作只影响o这个单一对象，不会影响对象的原型里的x属性，既不会影响其他继承该原型的对象。

var b = new Obj();
console.log(b);
console.log(b.x);//1

我们再把对象o的x属性delete掉,然后再访问属性“x”

delete o.x;//true
o.x; // 1

发现访问o.x时 x 再次指向了原型对象中的 x属性。
实际上自有属性和继承属性与静态语言的实例属性和类属性很像，因此在编写程序的时候最好不要把实例属性和类属性使用相同的名字，因为相同名字的实例属性会屏蔽掉类属性，但是当你删除实例属性后，再使用相同的名称访问到的将是类属性。

在给对象的属性赋值时，是在原始对象上创建属性或者对已有属性赋值，而不会去修改原型链。在Javascript中，只有查询属性时才会体会到继承的存在，而设置属性则和继承无关，该特性可以让我们可以有选择地覆盖继承的属性。

GPU云服务器云服务器匹配对象的属性和函数对象的属性 js原型属性有什么用 js中集合对象的属性

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

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

【JavaScript】【对象】更好地理解对象继承

摘要：每一个通过构造函数实例化的对象和都具有构造函数中的属性，实例和构造函数之间是构造关系构造过程中也形成了原型关系是的原型，是的原型，实例通过原型链找到原型中的属性和方法。自定义和构造函数的属性是自有属性，它们是对象本身的属性。继承原理：实例中包含一个指向原型对象的内部指针实现方法：让原型对象等于另一个类型的实例关键点：构造函数、原型对象、实例实例属性、原型方法构造关系、原型...

Youngs 2019-08-21 13:33 评论0 收藏0
彻底搞懂JavaScript中的继承

摘要：这正是我们想要的太棒了毫不意外的，这种继承的方式被称为构造函数继承，在中是一种关键的实现的继承方法，相信你已经很好的掌握了。你应该知道，JavaScript是一门基于原型链的语言，而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说，所谓的原型链就是一条继承链。有些困惑了吗？接着看下去吧。一、构造函数，原型属性与实例对象要搞清楚如何在JavaScript中实现继承，...

_ivan 2019-08-21 17:48 评论0 收藏0
JS基础05「对象」

摘要：对象是的数据类型。对象是动态的，可以随时新增和删除自有属性。客户端中表示网页结构的对象均是宿主对象。提供第二个可选参数，用以对对象的属性进行进一步描述。没有原型的对象为数不多，就是其中之一。运算符的左侧是属性名字符串，右侧是对象。对象是 JavaScript 的数据类型。它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值，因此我们可以把它看成是从字符串到值的映射。对象是...

frolc 2019-08-26 10:58 评论0 收藏0
《JavaScript 闯关记》之对象

摘要：属性名可以是包含空字符串在内的任意字符串，但对象中不能存在两个同名的属性。客户端中表示网页结构的对象均是宿主对象。这里的函数称做构造函数，构造函数用以初始化一个新创建的对象。通过关键字和构造函数调用创建的对象的原型就是构造函数的属性的值。对象是 JavaScript 的数据类型。它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值，因此我们可以把它看成是从字符串到值的映射...

rozbo 2019-08-20 10:50 评论0 收藏0
《JavaScript面向对象精要》读书笔记

摘要：解除引用的最佳手段是将对象变量设置为。字面形式允许你在不需要使用操作符和构造函数显示创建对象的情况下生成引用值。函数就是值可以像使用对象一样使用函数因为函数本来就是对象，构造函数更加容易说明。 JavaScript（ES5）的面向对象精要标签： JavaScript 面向对象读书笔记 2016年1月16日-17日两天看完了《JavaScript面向对象精要》（参加异步社区的活动送...

GitCafe 2019-08-19 17:26 评论0 收藏0