javascript 原型机制

prototype,__proto__,constructor
在 JavaScript 原型继承结构里面,规范中用 [[Prototype]] 表示对象隐式的原型,在 JavaScript 中用 __proto__ 表示,并且在 Firefox 和 Chrome 浏览器中是可以访问得到这个属性的,但是 IE 下不行。所有 JavaScript 对象都有 __proto__ 属性,但只有 Object.prototype.__proto__ 为 null,前提是没有在 Firefox 或者 Chrome 下修改过这个属性。这个属性指向它的原型对象。 至于显示的原型,在 JavaScript 里用 prototype 属性表示。
/**
* 声明构造函数Person,创建Person的实例p
*/
var Person = function () { };
var p = new Person(); //等价于:
var p = {}; //初始化一个对象p
p.__proto__ = Person.prototype; //
Person.call(p); //初始化p
证明一下:
var Person = function () { };
var p = new Person();
p.__proto__ === Person.prototype; // true
每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。默认情况下prototype属性会默认获得一个constructor(构造函数)属性,这个属性是一个指向prototype属性所在函数的指针,有些绕了啊,写代码、上图!

根据上图可以看出Person对象会自动获得prototyp属性,而prototype也是一个对象,会自动获得一个constructor属性,该属性正是指向Person对象。
当调用构造函数创建一个实例的时候,实例内部将包含一个内部指针(很多浏览器这个指针名字为__proto__)指向构造函数的prototype,这个连接存在于实例和构造函数的prototype之间,而不是实例与构造函数之间。
Function,Object
function f1(){}
var f2 = function(){}
var f3 = new Function('str','console.log(str)');
f1 instanceof Function //true
f2 instanceof Function //true
f3 instanceof Function //true
Object instanceof Function //true
Function instanceof Function //true
Object.__proto__ === Function.prototype //true
Function.__proto__ === Function.prototype //true
f1、f2、f3为函数,但是其实函数也是对象,是Function的实例。
Function , Object 都是函数引用,由Function创建出来,所有均有__proto__属性,指向Function.prototype。
总结
每一个函数都有prototype这个显示属性,这个属性是一个引用,指向一个对象,这个对象包含一个属性constructor,指向prototype属性所在的函数的指针。
每一个实例都有一个__proto__这个隐藏属性,这个属性指向实例构造函数的prototype属性。
当我们访问一个对象的属性 时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样 一直找下去,也就是我们平时所说的原型链的概念。
javascript 原型机制的更多相关文章
- 从mixin到new和prototype:Javascript原型机制详解
从mixin到new和prototype:Javascript原型机制详解 这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...
- javascript原型Prototype【转】
转自:http://www.cnblogs.com/starof/p/4190404.html 在javaScript创建对象一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同 ...
- javascript原型Prototype
在javaScript创建对象一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同方法是不一样的,所以我们用原型把构造函数中公共的属性和方法提取出来进行封装,达到让所有实例共享的 ...
- JavaScript 原型与继承机制详解
引言 初识 JavaScript 对象的时候,我以为 JS 是没有继承这种说法的,虽说 JS 是一门面向对象语言,可是面向对象的一些特性在 JS 中并不存在(比如多态,不过严格来说也没有继承).这就困 ...
- JavaScript原型OOP——你上车了吗?
.title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...
- javascript继承机制的设计思想(ryf)
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- Javascript原型模式总结梳理
在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...
- 【转载】Javascript原型继承-学习笔记
阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javas ...
- 【JavaScript】重温Javascript继承机制
上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...
随机推荐
- Unity Editor 编写unity插件类
在unity写了一个编辑类,基于iTweenpath插件,为了更方便的操作iTweenpath,顺便练习UnityEditor的操作,写了一个CreateiTweenPath,放在Editor文件夹中 ...
- C++开发基础
硬件配置: 586以上PC兼容机或品牌机,配有彩色显示器.鼠标.键盘,内存不小于20MB,硬 盘自由空间不少于60MB.推荐配置为内存32MB或64MB(或以上),硬盘自由空间500MB 以上. 软件 ...
- SharePoint 查找字段内部名称的小方法
今天逛博客园,偶然看到了下面的文章,介绍不用工具查看SharePoint字段内部名称,也介绍下自己的小方法. http://www.cnblogs.com/sunjunlin/archive/2012 ...
- leetcode之旅(8)-Contains Duplicate
题目: Given an array of integers, find if the array contains any duplicates. Your function should retu ...
- java多线程的基础-java内存模型(JMM)
在并发编程中,需要处理两个关键问题:线程之间如何通信,以及线程之间如何同步.通信是指线程之间如何交换信息,在命令式编程中,线程之间的通信机制有两种:内存共享和消息传递. 同步是指程序中用于控 ...
- 解析Json字符串的三种方法
在很多时候,我们的需要将类似 json 格式的字符串数据转为json, 下面将介绍日常中使用的三种解析json字符串的方法 1.首先,我们先看一下什么是 json 格式字符串数据,很简单,就是 jso ...
- H5页面转成图片并下载到本地
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- IT轮子系列(一)——DropDownList 的绑定(二)
补记: 今天在阅读公司项目代码的时候,发现MVC中的dropdownlist已经封装了数据绑定方式.相对于第一篇文章,这样的方式更简便.简洁.现记录如下: 首先,创建我们的数据模型 如下图: 模型代码 ...
- 万水千山ABP - 系统发布后迁移 CodeFirst 数据库[原创]
在项目开发的过程中,常会遇到项目发布后还变更数据库的情况.这时如何方便地进行数据库迁移呢 ? 下面直接列出操作的步骤: 1. 发布修改后的应用: 将最新版本的应用更新到目标机器中.更新的文件当然不包括 ...
- Linux命令之文件搜索
locate 文件名 locate只能搜索文件名,不能搜索文件大小.搜索速度快. locate并不会搜索到那些新加入的文件.新加入文件后,使用updatedb,更新数据库后,再使用locate搜索. ...