• 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

  • 相关阅读:
    新年初六
    新年初五
    新年初四
    Who moved my cheese?
    红螺寺踏春
    JSP基本语法--实例演练
    JSP基础语法--跳转指令 jsp:forward page
    JSP基本语法--包含指令<%@include file="路径"%> <jsp:include page>
    JSP基本语法--Page指令 <%@page 属性=”内容“%>
    JSP注释及scriptlet <%局部%><%!全局%><%=输出%>
  • 原文地址:https://www.cnblogs.com/ilovexiaoming/p/6872994.html
Copyright © 2020-2023  润新知