zoukankan      html  css  js  c++  java
  • Javascript中的__proto__、prototype、constructor

    今天重温了下Javacript,给大家带来一篇Javascript博文,相信对于Javacript有一定了解的人都听过prototype原型这个概念,今天我们深度的分析下prototype与__proto__。

    好了,下面看一个非常简单的例子:

          var Person = function(name)
           {
               this.name = name ;
           };
          var p = new Person("Ben");
          console.log(p.name);
    
    代码简单的 你不用说明了,如果现在让大家根据上面的代码画一张包含Function与Object的内存图,大家肯定回想什么叫包含Function与Object,上面的代码和它们有几毛钱的关系。好了,下面我先按要求把图画出来,大家参考下:


    解析下:

    1、任何一个由构造器产生的对象都有__proto__属性,且此属性指向该构造器的prototype。

    2、所有构造器/函数的__proto__都指向Function的prototype

    拿第2条对比第1条,貌似我们发现了什么,没错函数的构造器就是Function,看下面的代码:

       //函数表达式
           var Person = function(name)
           {
               this.name = name ;
           };
            //函数声明
            function Person(name)
            {
                this.name = name ;
            }
            //上面两种方式实际上就相当与new Function
            var Person = new Function("name" , "this.name = name ;" );
    当然了不能说说,下面看代码验证:

     console.log(Person.__proto__ === Function.prototype);  //true
     console.log(typeof p.__proto__);//objcect
     console.log(p.__proto__.__proto__ === Object.prototype); //true

    有人会问,那么Function与Object的prototype,__prop__到底是什么呢?

         console.log(Object.__proto__ === Function.prototype); // true
            console.log(Function.__proto__ === Function.prototype); //true
            console.log(Function.prototype.__proto__ == Object.prototype); //true
            console.log(Object.prototype.__proto__); //null


    有此可见

    1、所有的构造器包括Object和Function都继承了Function.prototype的方法,由第三行可知所有的构造器都是对象,即js中一切皆为对象。

    2、__proto__最终的指向都是Object.prototype,这也就是js中的原型链。


    最后我们看一下Object的文档:

    The following table lists properties of the Object Object.

    Property

    Description

    __proto__ Property

    Specifies the prototype for an object.

    constructor Property

    Specifies the function that creates an object.

    prototype Property

    Returns a reference to the prototype for a class of objects.

    发现Object还有个constructor属性。

    1、constructor属性指向的是创建当前对象的构造函数。

    2、每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数

    看下面的例子:

      //函数表达式
           var Person = function(name)
           {
               this.name = name ;
           };
    
             var p = new Person("Ben");
    
            console.log(p.constructor === Person);//true
            console.log(Person.prototype.constructor === Person);  //true
            console.log(Person.prototype instanceof  Object);  //true
            console.log(Person.prototype instanceof  Person);  //false
             //改变Person的prototype
            Person.prototype = {name:"123"} ;
            var p2 = new Person("Ben");
            console.log(p2.constructor === Object);//true
            console.log(p2.constructor === Person.prototype.constructor);//true
            console.log(Person.prototype.constructor === Object);//true
            console.log(Person.prototype.constructor === Person);//false


    当改变Person的prototype时,会发现,Person.prototype.constructor指向了Object,主要是因为:

    Person.prototype = {name:"123"} 相当于Person.prototype=new Object({name:"123"} );此时的构造器变成了Object.



    好了,就介绍到这里,各位看官没事留个言,赞一个,哈~。





  • 相关阅读:
    核心API的使用(给定一个字符串,统计每个字符出现的次数)
    将博客搬至CSDN
    [DEBUG] python写文件时print漏掉整行数据
    [DEBUG] pyinstaller打包-命令行报错 pyinstaller failed to execute script 脚本名
    [DEBUG] springboot结合freemaker和js实现页面跳转和传值-踩坑记录
    724. 寻找数组的中心索引
    1010. 总持续时间可被 60 整除的歌曲
    27.移除元素
    [tensorflow] 入门day1-数据整理与展示
    [tensorflow] 安装
  • 原文地址:https://www.cnblogs.com/oversea201405/p/3752016.html
Copyright © 2011-2022 走看看