细说 Javascript 对象篇(二) : 原型对象

Javascript 并没有类继续模子,而是应用原型对象 prototype 举行原型式继续。
只管人们常常将此看作是 Javascript 的一个瑕玷,然则事实上,原型式继续比传统的类继续模子要越发壮大。举个例子,在原型式继续顶端构建一个类模子很简朴,然则反过来则是个难题很多的使命。
Javascript 是唯一一个被普遍应用的原型式继续的言语,所以明白两种继续体式格局的差别是须要时候的。

第一个重要差别就是 Javascript 应用原型链来继续:

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

设置 BarprototypeFoo 的对象实例:

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.prototypeFoo.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

    原文作者:StephenLee
    原文地址: https://segmentfault.com/a/1190000000478987
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞