细说 Javascript 对象篇（二） : 原型对象

lansheng228 发布于2019-08-19 14:40 / 1389人阅读

摘要：并没有类继承模型，而是使用原型对象进行原型式继承。我们举例说明原型链查找机制当访问一个对象的属性时，会从对象本身开始往上遍历整个原型链，直到找到对应属性为止。原始类型有以下五种型。此外，试图查找一个不存在属性时将会遍历整个原型链。

Javascript 并没有类继承模型，而是使用原型对象 prototype 进行原型式继承。
尽管人们经常将此看做是 Javascript 的一个缺点，然而事实上，原型式继承比传统的类继承模型要更加强大。举个例子，在原型式继承顶端构建一个类模型很简单，然而反过来则是个困难得多的任务。
Javascript 是唯一一个被广泛运用的原型式继承的语言，所以理解两种继承方式的差异是需要时间的。

第一个主要差异就是 Javascript 使用原型链来继承：

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};
function Bar() {}

设置 Bar 的 prototype 为 Foo 的对象实例：

Bar.prototype = new Foo();
Bar.prototype.foo = "Hello World";

确保 Bar 的构造函数为本身，并新建一个 Bar 对象实例：

Bar.prototype.constructor = Bar;
var test = new Bar();

下面我们来看下整个原型链的组成：

test [instance of Bar]
    Bar.prototype [instance of Foo]
        { foo: "Hello World" }
        Foo.prototype
            { method: ... }
            Object.prototype
                { toString: ... /* etc. */ }

在上面的例子中，对象 test 将会同时继承 Bar.prototype 和 Foo.prototype。因此它可以访问定义在 Foo 中的函数 method。当然，它也可以访问属性 value。需要提到的是，当 new Bar() 时并不会创建一个新的 Foo 实例，而是重用它原型对象自带的 Foo 实例。同样，所有的 Bar 实例都共享同一个 value 属性。我们举例说明：

 test1 = new Bar();
 test2 = new Bar();
 Bar.prototype.value = 41;
 test1.value //41
 test2.value//41

原型链查找机制

当访问一个对象的属性时，Javascript 会从对象本身开始往上遍历整个原型链，直到找到对应属性为止。如果此时到达了原型链的顶部，也就是上例中的 Object.prototype，仍然未发现需要查找的属性，那么 Javascript 就会返回 undefined 值。

原型对象的属性

尽管原型对象的属性被 Javascript 用来构建原型链，我们仍然可以值赋给它。但是原始值复制给 prototype 是无效的，如：

function Foo() {}
Foo.prototype = 1; // no effect

这里讲个本篇的题外话，介绍下什么是原始值:
在 Javascript 中，变量可以存放两种类型的值，分别是原始值和引用值。

1.原始值(primitive value):
原始值是固定而简单的值,是存放在栈 stack 中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
原始类型有以下五种型: Undefined, Null, Boolean, Number, String。

2.引用值(reference value):
引用值则是比较大的对象，存放在堆 heap 中的对象，也就是说，存储在变量处的值是一个指针 pointer，指向存储对象的内存处。所有引用类型都集成自 Object。

原型链性能问题

如果需要查找的属性位于原型链的上端，那么查找过程对于性能而言无疑会带来负面影响。当在性能要求必要严格的场景中这将是需要重点考虑得因素。此外，试图查找一个不存在属性时将会遍历整个原型链。
同样，当遍历一个对象的属性时，所有在原型链上的属性都将被访问。

总结

理解原型式继承是写较为复杂的 Javascript 代码的前提，同时要注意代码中原型链的高度。当面临性能瓶颈时要学会将原型链拆分开来。此外，要将原型对象 prototype 和原型 __proto__ 区分开来，这里主要讨论原型对象 prototype 就不阐述关于原型 __proto__ 的问题了，如果有疑惑的话，可以阅读 @nightire 凡哥的博文《理解 JavaScript（四）》。

参考

http://bonsaiden.github.io/JavaScript-Garden/#object.prototype

GPU云服务器云服务器 javascript对象 javascript 面向对象 javascript对象方法 JavaScript对象进阶

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

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

细说 Javascript 函数篇（二） : this 的工作机制

摘要：与其他编程语言相比，对的使用是一套完全不同的机制。在五种情况下的值是各有不同的。调用一个函数时在这里，同样指向全局对象。此时在函数内，指向新建的对象。尽管，晚绑定初看上去是个不好的决定，但实际上这是原型式继承工作的基础。与其他编程语言相比，Javascript 对 this 的使用是一套完全不同的机制。this 在五种情况下的值是各有不同的。全局作用域下 this; 当在全...

ZoomQuiet 2019-08-21 12:16 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

AaronYuan 2019-08-20 18:55 评论0 收藏0
细说 Javascript 函数篇（五） : 构造函数

Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。在构造函数体内，this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式，那么我们就默认返回 this，也就是新建的对象。 function Foo() { this.bla = 1; } Foo.prototype.test = function()...

sPeng 2019-08-19 14:42 评论0 收藏0