zoukankan      html  css  js  c++  java
  • javascript中prototype与__proto__

    1、prototype:构造函数独有的属性;

      __proto__:每个对象都有一个名为__proto__的属性;

    注意:每个构造函数(自带与自创)都有一个prototype的属性,构造函数的prototype的属性也是一个对象,因此也有一个__proto__的属性。

    function A(){}
    var a = new A();
    console.log(a.prototype); // undefined
    console.log(A.prototype); // Object {}
    console.log(a.__proto__); // Object {}
    console.log(A.__proto__); // function() {}
    console.log(A.__proto__.__proto__); // Object {}
    console.log(A.__proto__.__proto__.__proto__); // null
    console.log(A.prototype.__proto__); // Object {}
    console.log(A.prototype.__proto__.__proto__); // null

    结论:

      a、构造函数的实例没有prototype属性;

      b、A.prototype === a.__proto__,每个对象的__proto__属性指向自身构造函数的prototype;

      c、构造函数也是对象,构造函数的__proto__属性指向一个 function() {}的空函数,空函数__proto__属性指向Object {};

      d、Object{}的__proto__属性最终指向null。

    2、constructor:存在于构造函数的prototype属性中,一般指向构造函数,不过也不一定,可以修改。

    function A(){}
    var a = new A();
    console.log(A.prototype.constructor); // function A(){}
    console.log(a.__proto__.constructor); // function A(){}
    console.log(A.__proto__.constructor); // function Function() { [native code] }
    console.log(A.__proto__.__proto__.constructor); // function Object() { [native code] }
    console.log(A.prototype.__proto__.constructor); // Object {}
    

    3、关系表

    function Foo(who) {
        this.me = who;
    }
    
    Foo.prototype.identify = function() {
        return "I am " + this.me;
    };
    
    function Bar(who) {
        Foo.call(this,who);
    }
    
    Bar.prototype = Object.create(Foo.prototype);
    // NOTE: .constructor is borked here, need to fix
    
    Bar.prototype.speak = function() {
        alert("Hello, " + this.identify() + ".");
    };
    
    var b1 = new Bar("b1");
    var b2 = new Bar("b2");
    
    b1.speak(); // alerts: "Hello, I am b1."
    b2.speak(); // alerts: "Hello, I am b2."

     参考:https://davidwalsh.name/javascript-objects-deconstruction

  • 相关阅读:
    线段树优化建图 && CF-786B.Legacy(优化建图,dijkstra)
    构建高性能JavaScript应用
    关于互联网应用前端架构的一些思考
    Router模块
    View模块
    Backbone源码解析系列
    Model模块
    Events模块
    Backbone源码风格
    jQuery选择器总结
  • 原文地址:https://www.cnblogs.com/ilovexiaoming/p/6872994.html
Copyright © 2011-2022 走看看