zoukankan      html  css  js  c++  java
  • 细说JavaScript对象(2):原型对象

    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://segmentfault.com/blog/stephenlee/1190000000478987

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

    延伸阅读:

    细说JavaScript对象(1):对象的使用和属性

    细说JavaScript对象(2):原型对象

    细说JavaScript对象(3):hasOwnProperty

    细说JavaScript对象(4): for in 循环

  • 相关阅读:
    深入Activity生命周期(一)
    android APK 中英文对比(转)
    android中获得系统语言
    mime Contenttype(http head)(转)
    activity设置全屏
    Activity常用知识
    关于这次数学建模
    排列组合
    hdu 1003 笔记
    杂想
  • 原文地址:https://www.cnblogs.com/52php/p/5677830.html
Copyright © 2011-2022 走看看