简单地说,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. response.sendRedirect 报 java.lang.IllegalStateException 异常的解决思路

    今天在进行代码开发的时候,出现了 java.lang.IllegalStateException异常,response.sendRedirect("./DEFAULT.html") ...

  2. MongoDB基础教程系列--第三篇 MongoDB基本操作(二)

    1.集合操作 1.1.创建集合 MongoDB 用 db.createCollection(name, options) 方法创建集合. 格式 db.createCollection(name, op ...

  3. 查看mac上的隐藏文件

    打开终端敲入(最好是复制),这样就可以隐藏隐藏文件: defaults write com.apple.finder AppleShowAllFiles -boolean false ; killal ...

  4. Hibernate(四)之对象状态及一级缓存

    一.Hibernate中的对象状态 1.1.瞬时态(临时态) 没有与Hibernate产生关联 与数据库中的记录没有产生关联(有关联就是与数据库中表的id相对应) 获得:一般都只直接创建(new) 瞬 ...

  5. 30分钟掌握 C#7

    1. out 变量(out variables) 以前我们使用out变量必须在使用前进行声明,C# 7.0 给我们提供了一种更简洁的语法 "使用时进行内联声明" .如下所示: va ...

  6. DataTable 转实体

    因为Linq的查询功能很强大,所以从数据库中拿到的数据为了处理方便,我都会转换成实体集合List<T>. 开始用的是硬编码的方式,好理解,但通用性极低,下面是控件台中的代码: using ...

  7. 如何修改Xampp服务器上的mysql密码

    今天自己在搞php的过程中发现,如果我们使用Xampp服务器自带数据库mysql,就必须先修改mysql的密码,大家都知道,mysql的初始面为空,但是如果连接数据库是密码为空就会报错,在网上查找了很 ...

  8. protected 学习

    virtual是把一个方法声明为虚方法,使派生类可重写此方法,一般建立的方法是不能够重写的,譬如类A中有个方法protected void method(){ 原代码....;}类B继承自类A,类B能 ...

  9. C#,VB.NET 如何将Excel转换为Text

    在工作中,有时我们需要转换文档的格式,之前已经跟大家介绍过了如何将Excel转换为PDF.今天将与大家分享如何将Excel转换为Text.这次我使用的依然是免费版的Spire.XLS for .NET ...

  10. JavaScript的XMLHttpRequest对象

    ajax的核心技术是XMLHttpRequest对象,简称XHR. //支持IE7及更高的版本 function createXML() { if(typeof XMLHttpReqquest!=&q ...