经过几天研究查找资料,对原型终于有点理解了,今天就做下总结,不对之处,希望各位能够提出。

  

  1、每一个Javascript对象(null除外)都和另一个对象相关联,“另一个”对象就是我们今天所要总结的原型,每一个对象都从原型继承属性。

  2、所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过Javascript代码Object.prototype获取对原型对象的引用。

  3、通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值。

看下图

这幅图是从一个外国网站(mollypages.org)上看到的,具体地址已经忘记了。

可以使用一下代码作为解释:

 function Foo(){};
var f1=new Foo();
var o1=new Object();

按照上图可得出一下等式:

f1._proto_ === Foo.prototype

f1._proto_.constructor === Foo

Foo._proto_ === Function.prototype

Foo.prototype.__proto === Object.prototype

f1.__proto__.__proto__ === Object.prototype

o1._proto_ === Object.prototype

Object._proto === Function.prototype  //  Object instanceof function  ==>true(可以解释为Object是Function的实例)

Function._proto_ === Object.prototype  //  Function instanceof Object ==>true(Function是Object的实例)

在Object中__proto__是Function,prototype是Object。
在Function中__proto__是Function,prototype也是Function。

所以,我们可以有如下结论:
1、Function的__proto__和prototype就是一个,扩展任何一个都是相同的效果。
2、Object的__proto__就是Function.prototype。当我们扩展Object.__proto__时,就相当于扩展了Function.prototype和__proto__,反之亦然。

从实际效果上来说,可以认为__proto__是用来扩展Function的,可以直接调用,不需要new出对象才能用,同时对象是不会通过扩展__proto__的方法或属性的。

Foo.__proto__.test="__proto__ test "; //通过__proto__扩展
alert("Foo:"+Foo.test); //可以访问
 
对于prototype来说,它是针对对象的,也就是Function是无法使用的,只有new出来的才能有效。
Foo.prototype.test="prototype test";
alert("Foo instance:"+f1.test); //可以执行
 
简单来说就是:
  __proto__扩展出来的,只有函数可以直接访问
  prototype扩展出来的,只有对象才能直接访问。
 
 
 

javascript中的原型理解总结的更多相关文章

  1. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  2. 前端知识体系:JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则

    理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...

  3. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

  4. JavaScript中的原型、原型链、原型模式

    今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...

  5. 深入了解JavaScript中基于原型(prototype)的继承机制

    原型 前言 继承是面向对象编程中相当重要的一个概念,它对帮助代码复用起到了很大的作用. 正文 Brendan Eich在创建JavaScript时,没有选择当时最流行的类继承机制,而是借鉴Self,用 ...

  6. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  7. JavaScript中的闭包理解

    原创文章,转载请注明:JavaScript中的闭包理解  By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...

  8. javascript中的原型继承

    在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...

  9. javascript中 (function(){})();如何理解?

    javascript中 (function(){})();如何理解? javascript中: (function(){})()是匿名函数,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环 ...

随机推荐

  1. start with connect by prior学习

    这是oracle中的树查询,查询出来的数据会根据上下级组成树的结构.select * from mw_sys.mwt_pd_deps start with obj_id = '63EBEC8E-E76 ...

  2. 一个CSS小测试

    <!DOCTYPE html> <html> <head> <style type="text/css"> body{ margin ...

  3. 武汉科技大学ACM :1008: 华科版C语言程序设计教程(第二版)习题6.14

    Problem Description 输入一个八进制的字符串,将它转换成等价的十进制字符串,用pringf的%s格式输出. Input 首先输入一个正整数t,表示有t组测试数据(1<= t & ...

  4. a标签增加onclick事件提示未定义function

    项目使用的是ext框架,版本是ext4.2 出现的问题代码如下: renderer : function(value){ var html = "<a href=\"java ...

  5. 你好,C++(24)好大一个箱子!5.1.1 函数的声明和定义

    第5章 用函数封装程序功能 在完成功能强大的工资程序V1.0之后,我们信心倍增,开始向C++世界的更深远处探索. 现在,我们可以用各种数据类型定义变量来表达问题中所涉及的各种数据:用操作符连接这些变量 ...

  6. Linux "top" 命令解析

    TOP命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况.   TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户 ...

  7. if exists用法

    1 判断数据库是否存在Sql代码 if exists (select * from sys.databases where name = ’数据库名’)    drop database [数据库名] ...

  8. Js正则表达式提取图片地址

    JavaScript使用正则表达式和Replace两种方法提取IMG标签图片地址,代码如下: /正则表达式 <script language="javascript"> ...

  9. mysql_config not found

    在python中安装MySQL_python.不想通过下载源码编译,而是想用 easy_install MySQL_python 来安装.结果一直报错: mysql_config not found ...

  10. [转] c#多线程(UI线程,控件显示更新) Invoke和BeginInvoke 区别

    如果只是直接使用子线程访问UI控件,直接看内容三,如果想深入了解从内容一看起. 一.Control.Invoke和BeginInvoke方法的区别 先上总结: Control.Invoke 方法 (D ...