zoukankan      html  css  js  c++  java
  • javascript之一切皆为对象2

    其实呢,“函数function”和“对象object”之间还有这么一句话:对象是通过函数来创建的,而函数却又是一种对象

    这个函数是一种对象,上节中“Javascript之一切皆为对象1”也清楚的阐述了。

    但这个对象又是通过函数来创建的,咳咳,似乎在平时代码中也是哈。

    请看下面代码

    function Fn(){
    
    }
    var fn =new Fn(); 

    你可能会说,哥们,不对吧,不是我们也曾写过如下代码吗!!

    var obj = {};

    哈,是的哈。

    但是,还记得么?

    以上代码,其本质是这样的:

    var obj = new Object();

    咦,好吧,我承认是这样的,但是它为什么会这么设置呢?

    prototype。

    prototype?

    对,还记得大明湖畔的原型链么。。。

    每个函数都有一个prototype属性,且prototype是一个对象。

    当我们通过函数function,(new)创建一个对象时,创建的对象的隐指针__proto__,就指向这个函数的prototype对象。

    ?!!在说什么。见下图:

     

    上图中,中间是函数Fn,函数Fn有一个prototype对象,prototype对象中,又必须有,且自带一个constructor属性,它又是指向函数Fn本身的,“其他属性”的意思是你自己可以通过prototype对象扩展属性,当函数Fn构建好后,你可以通过new这个函数Fn,创建对象,如上图中左边的fn、fn1,创建的对象,自带一个隐指针__proto__,它是指向函数Fn中的prototype,所以创建的所有对象的__proto__,是同时指向创建它的函数Fn的prototype对象啦。

    有点没看懂?

    么关系,我们一起来写个demo,一步步理解。

    首先,我们一起编写一个函数Fn,并给这个函数Fn的prototype分配两个属性name和age,具体代码如下:

    <!DOCTYPE html>
        <head>
            <title>ttt</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        </head>
        <body>
            <script>
                function Fn(){ }
                Fn.prototype.name = 'monkey';
                Fn.prototype.age = 24;
                console.log(Fn.prototype);
            </script>
        </body>
    </html>

    通过chrome调试器,可得下结果图

    大家可以看见我利用console.log(Fn.prototype),是输出了age和name,但还有constructor和__proto__,我代码中是没有写的,所以是prototype自带的。

    constructor倒好理解了,但它怎么会有个__proto__呢?

    你上面不是说每个对象才有__proto__吗?

    是的,这个prototype也是对象哦,不要忘啦。

    prototype的__proto__从上图可知,是指向Object,修改上面的流程图,可得下图

    接下来,我们再通过函数Fn,来创建两个对象fn和fn1,代码如下

    <!DOCTYPE html>
        <head>
            <title>ttt</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        </head>
        <body>
            <script>
                function Fn(){ }
                Fn.prototype.name = 'monkey';
                Fn.prototype.age = 24;
                var fn = new Fn();
                var fn1 = new Fn();
                console.log( fn.prototype );
                console.log( fn1.prototype );
            </script>
        </body>
    </html>

    通过chrome调试器,效果图如下

     

    咦,怎么是undefined呢?!!

    哈哈哈,仔细看我上面的代码,我console的是对象fn和fn1的prototype哦!只有函数才有prototype,对象只有隐指针__proto__哦,它是指向函数Fn的prototype的哈。

    修改代码,通过chrome调试器的效果图如下:

     

    它们的__proto__都是指向创建它们的Fn的prototype的哈,且是同一个。这也就好理解了,为什么它们是共享Fn的prototype了哈。

    Javascript之一切皆为对象3

    如果喜欢本文,请点击右下角的推荐哦,谢谢~
    更多,见My微信公众号^.^
  • 相关阅读:
    开始学习编写用于 Windows SideShow 设备的小工具【转】
    Windows Mobile 6.5 Developer Tool Kit 下载
    Microsoft Security Essentials 微软免费杀毒软件下载
    SQL Server 2008 空间数据存储摘抄(SRID 点 MultiPoint LineString MultiLineString 多边形 MultiPolygon GeometryCollection)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (2)
    Vista Sidebar Gadget (侧边栏小工具)开发教程 (4)
    负载测试、压力测试和性能测试的异同
    Windows Server 2008 Vista Sidebar Gadget (侧边栏小工具) 入门开发实例
    Silverlight Tools 安装失败 解决办法
    SQL Server 2008 空间数据库 空间索引概念及创建(取自帮助)
  • 原文地址:https://www.cnblogs.com/giggle/p/5204354.html
Copyright © 2011-2022 走看看