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了哈。

时间: 2024-12-13 18:50:26

javascript之一切皆为对象2的相关文章

javascript之一切皆为对象3

在前面两个章节"Javascript之一切皆为对象1"和"Javascript之一切皆为对象2"中,曾提到: 1."一切(引用类型)皆为对象" 2. "每个函数都有一个prototype" 3. "每个对象都有一个__proto__" 那么,问题来了,在随笔"Javascript之一切皆为对象2"中,不是有下图么 那,根据"一切(引用类型)皆为对象",图中的函数Fn不

Javascript之一切皆为对象1

在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScript的世界里,怎么区分“值类型”和“引用类型”呢? 哟呼,答案:typeof. 让我们一起写个demo,猜猜看typeofShow()会输出哪些结果. <!DOCTYPE html> <head> <title>javascript</title> <met

JavaScript“并非”一切皆对象

网上非常多都在说”JavaScript一切皆对象“,那么这个"一切"到底是实实在在的"一切",还是一个虚数?也有看过网上的文章,有的三纸无驴,就是抄抄概念,有的也只是解释了一部分,并没有给出确切的结论.那么我想结合自己的理解,给出一个确切的结论. 当然,结论嘛,自然要放在文章结尾.小伙伴们接着往下看. 数据类型概要 进入之前,有必要概要地说一下js的数据类型,当然小伙伴们也可以直接pass. js的数据类型有两种:原始类型和对象类型.其中原始类型又包括以下几种类型:

【JavaScript】【学习】对象的创建和继承

下午刚刚看完了<JavaScript高级程序设计>中的第六章,面向对象的程序设计,因为自己以前没有面向对象程序设计的基础,所以理解得有些困难,但是通过自己的努力研读+上网查资料+反复实践,总算是答题上理解了,对我的编程思维算是一个很大的提高吧,这里把学习笔记和心得发一下,方便以后自己查阅. 一.理解对象 在JavaScript中,一切皆是对象,前面学习引用类型,基本都是JavaScript中的内置对象,而基本类型,则都是这些内置对象的实例,BOM,DOM也是对象,全局变量可以视为window的

javascript 核心语言笔记 6 - 对象

对象是 JavaScript 的基本数据类型.是一种复合值:将很多值聚合在一起.对象可以看做是无序集合,每个属性都是一个名/值对.这种基本数据结构还有很多叫法,比如「散列」(hash).「散列表」(hashtable).「字典」(dictionary).「关联数组」(associative array).JavaScript 还可以从一个称为 原型 的对象继承属性 JavaScript 对象是动态的 -- 可以新增属性也可以删除属性,除了字符串.数字.布尔值.null 和 undefined 之

在JavaScript中生成自定义的对象

使用对象便于组织信息.下面我们介绍如何在JavaScript中生成自定义的对象. ---------------------- JavaScript 对象 在前面几章中我们学到JavaScript中有些内置的对象,比如String, Date, Array等等.除此之外,你还可以定义自己的对象. 对象是一种特殊的数据,含有属性和函数. 下面让我们用一个例子来说明:比如一个人是一个对象.属性是与对象有联系的值,比如人的属性包括姓名,身高,体重,年龄,肤色,眼睛的颜色等等.所有人都有这些属性,但是每

Javascript学习--------认识window窗口对象

window对象: Window 对象表示浏览器中打开的窗口. 可以通过window对象设置窗口的大小,位置等. 还可以控制是否加载网页等. window对象集合: 集合 描述 frames[] 返回窗口中所有命名的框架. 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>.属性 frames.length 存放数组 frames[] 中含有的元素个数.注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数

MDN——javascript——入门——第三章对象——json——知识点总结

1. JSON:javascript object notation(js 对象表示法) 将结构化数据表示为JavaScript对象的标准格式, 通常用于在网站上表示和传输数据 (从服务器向客户端发送一些数据,因此可以将其显示在网页上) Douglas Crockford(提出推广了json)     虽然它是基于JavaScript语法,它可以独立于JavaScript的使用,许多编程环境有 读取(解析),并生成JSON的能力.(例如php)   JSON对象可以存储在它自己的文件,根本上只是

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应