zoukankan      html  css  js  c++  java
  • 原型与原型链的简单理解

    javascript的原型链有显式和隐式两种:

    显式原型链:即我们常见的prototype;
    隐式原型链:在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问;隐式原型链用于javascript引擎内部对原型链的搜寻,通过显示原型链来设置;
     

    一、prototype和__proto__的概念

      prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

      __proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性。

          用chrome和FF都可以访问到对象的__proto__属性,IE不可以。

    二、new 的过程
      
    var Person = function(){};
    var p = new Person();

       new的过程拆分成以下三步:
       (1) var p={}; 也就是说,初始化一个对象p
       (2) p.__proto__ = Person.prototype;
       (3) Person.call(p); 也就是说构造p,也可以称之为初始化p

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

    var Person = function(){};
    var p = new Person();
    alert(p.__proto__ === Person.prototype);

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

    三、示例

    复制代码
        var Person = function(){};
        Person.prototype.sayName = function() {
            alert("My Name is Jacky");
        };
    
        Person.prototype.age = 27;
        var p = new Person();
        p.sayName();
    复制代码

    p是一个引用指向Person的对象。我们在Person的原型上定义了一个sayName方法和age属性,当我们执行p.age时,会先在this的内部查找(也就是构造函数内部),如果没有找到然后再沿着原型链向上追溯。

    这里的向上追溯是怎么向上的呢?这里就要使用__proto__属性来链接到原型(也就是Person.prototype)进行查找。最终在原型上找到了age属性。

    四、总结

    其实吧,这个东西很简单,就是一个实例,子类<父类<父类 。。。,但是拿术语说的时候,有点儿绕。

    直接上图

    图一:构造函数

    图二 _proto_与prototype。(var person=new Person())

    图三完整的原型链 。person → Person → Object ,普通人继承人类,人类继承对象类

     参考网站:https://www.jianshu.com/p/ddaa5179cda6

  • 相关阅读:
    【模板】线段树(区间加)
    【模板】树状数组(区间修改+单点查询)
    【模板】并查集
    【模板】最小生成树
    LOJ #10130 点的距离
    【模板】最近公共祖先(LCA)
    【模板】树状数组
    【模板】堆
    LeetCode 242 Valid Anagram
    LeetCode 171 Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/shj-com/p/11165918.html
Copyright © 2011-2022 走看看