zoukankan      html  css  js  c++  java
  • 理解js中的原型链,prototype与__proto__的关系

    首先,要明确几个点:



    1.在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。
    即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

    2.方法(Function)
    方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。

    好啦,知道了这两个基本点,我们来看看上面这副图。



    1.构造函数Foo()
    构造函数的原型属性Foo.prototype指向了原型对象,在原型对象里有共有的方法,所有构造函数声明的实例(这里是f1,f2)都可以共享这个方法。

    2.原型对象Foo.prototype
    Foo.prototype保存着实例共享的方法,有一个指针constructor指回构造函数。

    3.实例
    f1和f2是Foo这个对象的两个实例,这两个对象也有属性__proto__,指向构造函数的原型对象,这样子就可以像上面1所说的访问原型对象的所有方法啦。

    另外:



    构造函数Foo()除了是方法,也是对象啊,它也有__proto__属性,指向谁呢?
    指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛,因此这里的__proto__指向了Function.prototype。
    其实除了Foo(),Function(), Object()也是一样的道理。

    原型对象也是对象啊,它的__proto__属性,又指向谁呢?
    同理,指向它的构造函数的原型对象呗。这里是Object.prototype.

    最后,Object.prototype的__proto__属性指向null。

    总结:



    1.对象有属性__proto__,指向该对象的构造函数的原型对象。
    2.方法除了有属性__proto__,还有属性prototype,prototype指向该方法的原型对象。

    *******************************************************************************************************

    说到prototype,就不得不先说下new的过程。

    我们先看看这样一段代码:

    1 <script type="text/javascript">
    2 var Person = function () { };
    3 var p = new Person();
    4 </script>

    很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:

    <1> var p={}; 也就是说,初始化一个对象p。

    <2> p.__proto__=Person.prototype;

    <3> Person.call(p);也就是说构造p,也可以称之为初始化p。

    关键在于第二步,我们来证明一下:

    1 <script type="text/javascript">
    2 var Person = function () { };
    3 var p = new Person();
    4 alert(p.__proto__ === Person.prototype);
    5 </script>

    这段代码会返回true。说明我们步骤2的正确。

    那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。

    按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是Firefox的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。

    好,概念说清了,让我们看一下下面这些代码:

    1 <script type="text/javascript">
    2 var Person = function () { };
    3 Person.prototype.Say = function () {
    4 alert("Person say");
    5 }
    6 var p = new Person();
    7 p.Say();
    8 </script>

    这段代码很简单,相信每个人都这样写过,那就让我们看下为什么p可以访问Person的Say。

    首先var p=new Person();可以得出p.__proto__=Person.prototype。那么当我们调用p.Say()时,首先p中没有Say这个属性, 于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我们在上面定义了 Person.prototype.Say=function(){}; 于是,就找到了这个方法。

    好,接下来,让我们看个更复杂的。

    01 <script type="text/javascript">
    02 var Person = function () { };
    03 Person.prototype.Say = function () {
    04 alert("Person say");
    05 }
    06 Person.prototype.Salary = 50000;
    07 var Programmer = function () { };
    08 Programmer.prototype = new Person();
    09 Programmer.prototype.WriteCode = function () {
    10 alert("programmer writes code");
    11 };
    12 Programmer.prototype.Salary = 500;
    13 var p = new Programmer();
    14 p.Say();
    15 p.WriteCode();
    16 alert(p.Salary);
    17 </script>

    我们来做这样的推导:

    var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

    而在上面我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

    p1.__proto__=Person.prototype;

    Programmer.prototype.__proto__=Person.prototype;

    由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

    好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是 Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是 Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

    其余的也都是同样的道理。

    这也就是原型链的实现原理。

    最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!

  • 相关阅读:
    AGC037F Counting of Subarrays
    AGC025F Addition and Andition
    CF506C Mr. Kitayuta vs. Bamboos
    AGC032D Rotation Sort
    ARC101F Robots and Exits
    AGC032E Modulo Pairing
    CF559E Gerald and Path
    CF685C Optimal Point
    聊聊Mysql索引和redis跳表
    什么是线程安全
  • 原文地址:https://www.cnblogs.com/pangguoming/p/6509393.html
Copyright © 2011-2022 走看看