简单地说,prototype就是原型对象的一个开放接口,让我们可以为对象的实例扩展属性和方法。

先看一下对象的静态方法和实例方法。

function Person () {
};
Person.sayHello = function () { //定义一个静态方法
console.log("Hello!");
};
var p = new Person();
Person.sayHello(); // Hello!
p.sayHello(); // p.sayHello is not a function

由此可以看出,对象的静态方法不能被对象实例调用。例如String对象的fromCharCode()方法,正确的调用方法应该是 String.fromCharCode(),而使用 myString.fromCharCode()会报错。

如果我们想给对象的实例添加方法,可以在构造函数中使用"this"来定义:

var Person = function () {
this.sayHello = function () {
console.log("Hello!");
}
};
var p = new Person();
p.sayHello(); // Hello!

构造函数模式虽然好用,但有个很大的缺点,那就是每个方法都会在每个实例上重新创建一遍。例如,我们创建两个Person实例,p1和p2都有一个名为sayHello()的方法,但这两个方法不是同一个Function的实例。

var Person = function () {
this.sayHello = function () {
console.log("Hello!");
}
};
var p1 = new Person();
var p2 = new Person();
console.log(p1.sayHello == p2.sayHello); // false

因为JavaScript中函数也是对象,因此每定义一个函数就会实例化一个Function对象,造成了不必要的内存开销。另外,使用this创建实例方法也并不总是可行的。例如我们想给Date对象实例扩展一个format()方法,我们总不能直接修改Date的源码吧,而用prototype就很简单了:

Date.prototype.format = function () {
//do something...
}
var time = new Date();
time.format();

下面说一下__proto__。当调用构造函数创建一个新实例后,该实例内部会包含一个指针,指向构造函数的原型对象。这个指针在ECMA-262第5版上叫[[Prototype]],虽然没有标准方式访问[[Prototype]],但在Firefox、Safari和Chrome等浏览器上都实现了一个__proto__属性来访问它。当解析器查找实例上的某个属性时,如果没有查找到,就会在__proto__上查找,而__proto__指向构造函数的原型对象,这就是多个对象实例共享原型的属性和方法的基本原理。

简单的说就是,p.__proto__ === p.constructor.prototype

但也有例外,那就是使用Object.creat创建对象的时候。

function Person () {
};
var p1 = new Person();
var p2 = Object.create(Person)
console.log(p1.__proto__ === Person.prototype) // true
console.log(p2.__proto__ === Person.prototype) // false
console.log(p2.__proto__ === Person.prototype.constructor) // true

一般情况下,对象的__proto__等于其构造函数的prototype ,而使用Object.create()创建的对象,其__proto__等于其原型对象的构造函数。

浅谈prototype和__proto__的更多相关文章

  1. JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈

    toStirng()与Object.prototype.toString.call()方法浅谈 一.toString()是一个怎样的方法?它是能将某一个值转化为字符串的方法.然而它是如何将一个值从一种 ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  3. 浅谈javascript的原型及原型链

    浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...

  4. javascript中的prototype和__proto__的理解

    在工作中有时候会看到prototype和__proto__这两个属性,对这两个属性我一直比较蒙圈,但是我通过查阅相关资料,决定做一下总结加深自己的理解,写得不对的地方还请各位大神指出. 跟__prot ...

  5. JS function 是函数也是对象, 浅谈原型链

    JS function 是函数也是对象, 浅谈原型链 JS 唯一支持的继承方式是通过原型链继承, 理解好原型链非常重要, 我记录下我的理解 1. 前言 new 出来的实例有 _proto_ 属性, 并 ...

  6. 浅谈JavaScript之原型

    上一篇谈new关键字也是给这一篇写关于原型的文章买个伏笔,我对原型的理解可能会有偏差,如有错误,望指正一定修改,望各位道友如果想真正的理解原型的概念一定要再看完各方言论再回归教材. 言归正传谈原型,首 ...

  7. 浅谈JavaScript浮点数及其运算

    原文:浅谈JavaScript浮点数及其运算     JavaScript 只有一种数字类型 Number,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的.浮点数的精度问题 ...

  8. 浅谈 js 字符串 search 方法

    原文:浅谈 js 字符串 search 方法 这是一个很久以前的事情了,好像是安心兄弟在学习js的时候做的练习.具体记不清了,今天就来简单分析下 search 究竟是什么用的. 从字面意思理解,一个是 ...

  9. 车大棒浅谈jQuery源码(二)

    前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

随机推荐

  1. 用Caffe生成对抗样本

    同步自我的知乎专栏:https://zhuanlan.zhihu.com/p/26122612 上篇文章 瞎谈CNN:通过优化求解输入图像 - 知乎专栏 中提到过对抗样本,这篇算是针对对抗样本的一个小 ...

  2. XJOI1595空中楼阁【最短路】

    空中楼阁 ( House ) 话说Z4阴差阳错地来到了神秘岛.不久,他们发现,这是一个由n个小岛和一个中心岛组成的群岛,群岛之间有m座桥.令他们感到惊讶的是,这些桥并不是固定不变的,经较长时间的观察, ...

  3. 老李推荐:第5章1节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 官方简介

    老李推荐:第5章1节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 官方简介   在MonkeyRunner的框架中,Monkey是作为一个服务来接受来自Monkey ...

  4. 对象的创建过程(chapter5.7.3)

    总结一下对象的创建过程,假设有一个名为Dog的类: 1. 即使没有显示地使用static关键字,构造器实际上也是静态的方法,因此,当首次创建类型为Dog的对象时(构造器可以看成静态方法),或者Dog类 ...

  5. 一个web应用的诞生(11)--列表分页

    上章的结束,若在实际开发过程中,会发现一个问题,那就首页或关注分享,是一下子按时间顺序全部显示出来,这在实际项目中不可能出现的,想想实际中的产品是如何做的? 一般来说,无非是两种,一种是使用页码,来进 ...

  6. css3 loading动画 三个省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. php常用的优化手段

    由于工作码成狗,抽闲整理了下内容,以下是网上流传比较广泛的30种SQL查询语句优化方法: 1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. ...

  8. sql中常见日期获取

    获取当前年月日 --获取当前月份 ,GETDATE())) --获取当前月份的下个月 ,GETDATE())) --获取当前月份的上个月 year()获取年 select year(GETDATE() ...

  9. C++ 中关于optional 使用过程中遇到的问题

    头文件:#include <boost/optional.hpp> using namespace boost; optional很像一个仅能存放一个元素的容器,它实现了"未初始 ...

  10. OC 常见面试题以及答案

    一. #improt 和include区别?@class? 1.include 主要用用来引用C 文件  import 主要引用OC 头文件  import 确保一个文件只能被导入一次  避免了交叉编 ...