zoukankan      html  css  js  c++  java
  • javascript原型链问题

    转自 https://www.jianshu.com/p/08c07a953fa0

    原型链是前端面试里一个经久不衰的问题了,自己也查阅了很多的资料,像红宝书、JavaScript忍者秘籍上都有对这一方面的描述和概括,今天就像自己归纳一下这个问题:

    首先,我们先来看一张图:

     

     
     

    这个绕来绕去的线是不是很恶心呢?那就先别管这些了,等整个逻辑我们梳理完就自然而然的会明白了~

    一、 什么是原型链?

            每个对象都可以有一个原型_proto_,这个原型还可以有它自己的原型,以此类推,形成一个原型链。查找特定属性的时候,我们先去这个对象里去找,如果没有的话就去它的原型对象里面去,如果还是没有的话再去向原型对象的原型对象里去寻找...... 这个操作被委托在整个原型链上,这个就是我们说的原型链了。

    二、原型指针

        我们知道了原型的概念,接下来我们就照着上面的图来具体分析一下原型的指针;中间最上面蓝色模块标注的构造函数Foo, 里面有两个属性: _proto_ 和 prototype, 这两个很容易使人混淆,先说说prototype:

    prototype:

        prototype属性,它是函数所独有的,它是从一个函数指向一个对象。它的含义是函数的原型对象,也就是这个函数(其实所有函数都可以作为构造函数)所创建的实例的原型对象; 这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象);

    __proto__:

        __proto__ 是原型链查询中实际用到的,它总是指向 prototype,换句话说就是指向构造函数的原型对象,它是对象独有的。注意,为什么Foo构造也有这个属性呢,因为再js的宇宙里万物皆对象,包括函数;

    根据以上的概括我们能知道Foo构造函数_proto_指向的是他的构造函数的原型对象,它的构造函数是Function, 也就是说Foo的_proto_指向Function.prototype,  我们再看到左边绿色的a和b函数的_proto_指像的是Foo.prototype,因为他们是通过 new Foo实例化出来的,它们的构造函数就是Foo(), 即a._proto_ = Foo.prototype;  接着我们来看看最右边紫色的模块Function.prororype, 它的_proto_指针指向的是Object.prototype,Object._proto_又为null.。于是我们就可以得出:在原型链中的指向是,函数 → 构造行数  → Function.prototype → Object.protype → null ;

    constructor:

        我们看到途中最中间灰色模块有一个constructor属性,这个又是做什么用的呢?

    每个函数都有一个原型对象,该原型对象有一个constructor属性,指向创建对象的函数本身。

        此外,我们还可以使用constructor属性,所有的实例对象都可以访问constructor属性,constructor属性是创建实例对象的函数的引用。我们可以使用constructor属性验证实例的原型类型(与操作符instanceof非常类似)。

        由于constructor属性仅仅是原始构造函数的引用,因此我们可以使用该属性创建新的对象,如:

        

     
     

        通过第一个对象实例化对象的constuctor方法创建第2个实例化对象,说明创建的新对象ninja2 是Ninja的实例,由于ninja和ninja2不是同一个对象可以得出它们是两个截然不同的实例;

    结论:

            1、__proto__ 是原型链查询中实际用到的,它总是指向 prototype;

            2、prototype 是函数所独有的在定义构造函数时自动创建,它总是被 __proto__ 所指。

    所有对象都有__proto__属性,函数这个特殊对象除了具有__proto__属性,还有特有的原型属性prototype。prototype对象默认有两个属性,constructor属性和__proto__属性。prototype属性可以给函数和对象添加可共享(继承)的方法、属性,而__proto__是查找某函数或对象的原型链方式。constructor,这个属性包含了一个指针,指回原构造函数。




  • 相关阅读:
    [LeetCode] Power of Three 判断3的次方数
    [LeetCode] 322. Coin Change 硬币找零
    [LeetCode] 321. Create Maximum Number 创建最大数
    ITK 3.20.1 VS2010 Configuration 配置
    VTK 5.10.1 VS2010 Configuration 配置
    FLTK 1.3.3 MinGW 4.9.1 Configuration 配置
    FLTK 1.1.10 VS2010 Configuration 配置
    Inheritance, Association, Aggregation, and Composition 类的继承,关联,聚合和组合的区别
    [LeetCode] Bulb Switcher 灯泡开关
    [LeetCode] Maximum Product of Word Lengths 单词长度的最大积
  • 原文地址:https://www.cnblogs.com/lonelyshy/p/13599020.html
Copyright © 2011-2022 走看看