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 原型机制的更多相关文章

  1. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  2. javascript原型Prototype【转】

    转自:http://www.cnblogs.com/starof/p/4190404.html 在javaScript创建对象一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同 ...

  3. javascript原型Prototype

    在javaScript创建对象一文中提到过:用构造函数创建对象存在一个问题即同一构造函数的不同实例的相同方法是不一样的,所以我们用原型把构造函数中公共的属性和方法提取出来进行封装,达到让所有实例共享的 ...

  4. JavaScript 原型与继承机制详解

    引言 初识 JavaScript 对象的时候,我以为 JS 是没有继承这种说法的,虽说 JS 是一门面向对象语言,可是面向对象的一些特性在 JS 中并不存在(比如多态,不过严格来说也没有继承).这就困 ...

  5. JavaScript原型OOP——你上车了吗?

    .title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...

  6. javascript继承机制的设计思想(ryf)

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  7. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...

  8. 【转载】Javascript原型继承-学习笔记

    阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javas ...

  9. 【JavaScript】重温Javascript继承机制

    上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Ja ...

随机推荐

  1. android 资源文字ids的作用

    ids.xml--为应用的相关资源提供唯一的资源id.id是为了获得xml中的对象而需要的参数,也就是Object = findViewById(R.id.id_name)中的id_name.这些值可 ...

  2. masm中list文件和宏的一些常用编译调试查看方法

    我们知道使用用 ml /Fl a.asm 可以生成lst文件,但是如果不加调整,masm默认生成的lst文件是非常大的,因为它包含了很大的windows必须用到的头文件内容,为了减小lst文件大小,便 ...

  3. css中bfc和ifc

    bfc定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置.Box垂直方向的距离由mar ...

  4. 锋利的Jquery摘要

    一本好书值得去反复回味 第一章: jquery中的$(document).ready(function(){})与js中的windows.onload()的比较   $(document).ready ...

  5. Django之admin的使用和源码剖析

    admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLE ...

  6. 超精简易用cocoaPods的安装和使用

    cocoaPods 安装和使用 第一步:替换ruby源 $ gem sources -l                                查看当前ruby的源 $ gem sources ...

  7. IT轮子系列(一)——DropDownList 的绑定,你秒懂了吗

    前言 最近猛然惊觉(说是猛然,是因为自己工作那么多年,居然不自知.不反省),在开发中,自己碰到一些常用的功能代码块,还是习惯性的baidu,然后copy....这样的操作,不知自己重复了多少遍.现在回 ...

  8. webpack 4.x 遇到的错误

    由于之前重装电脑,很多之前的小Demo 现在都跑不起来.特别是webpack一直在报错. webpack 安装node 全局安装webpack,webpack-cli(一定要全局安装) 项目初始化 w ...

  9. 到底创建了几个String对象?

    到底创建了几个String对象? 标签: 堆栈使用 对象创建 分类: 开发技术 关键字: java 面试题 string 创建几个对象 作者:臧圩人(zangweiren) 网址:http://zan ...

  10. Python新手入门学习常见错误

    当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...