prototype是函数的内置属性,每一个function都拥有这样一个属性,在js的面向对象编程上,prototype发挥着强大的作用。

某天,春哥问我你知道prototype的原理吗?我突然懵了,这个东西都知道干嘛用,怎么用,但是它的原理,确实不知道。为什么放在prototype里的方法不会在每次new对象的时候在这些对象分配资源来存放这些方法,却又可以直接调用这些方法呢?

先来看看使用new关键字生成对象的时候,javascript解释器做了些什么?

以 var obj = new FF(); 为例:

1,先创建一个空对象

2,把this指向这个空的对象

3,把对象的内置属性 _proto_ 指向FF的prototype属性(这时候对象的_proto_属性和这个构造函数的prototype属性,都指向了同一个对象)

4,通过this把属性和方法加在这个空对象上

5,return this指向的对象

如何验证上面所述呢?

 function DemoA(){
this.title = "this is a demo constructor";
this.f1 = function(){}
} function DemoB(){
this.title = "this is b demo constructor";
this.f2 = function(){}
}
DemoB.prototype = new DemoA(); var bDemo = new DemoB();
console.log(bDemo);

在控制台看到的结果是:

  从控制台的log可以看出,bDemo对象有个_proto_属性,它指向的是一个DemoA对象(代码中DemoB.prototype = new DemoA();),这个DemoA对象的_proto_属性指向函数DemoA的prototype(函数的默认prototype指向什么对象呢?console.log(DemoA.prototype);在控制台里打出的是DemoA{},众所周知函数本身就是一个对象,所有这里是不是涉及到了function更深层的原理呢?暂时先不去深究了),DemoA函数的prototype指向的是一个对象,它的_proto_属性指向了Object。

  那么现在也就知道了,用new构造器生成的对象,它的_proto_属性指向构造器的prototype属性所指向的对象,所有同一个构造器new出来的对象,是公用prototype里的方法和属性的。那么为什么可以像是直接调用对象的属性那样去调用prototype里的方法和属性呢?

  当我们对一个对象调用其方法时,js运行环境首先看,这个对象本身有没有这个方法,如果有就直接调用,如果没就查找这个对象的_proto_属性指向的对象(也就是该对象的构造器的prototype属性), 如果有该方法就调用,没有继续查找_proto_属性指向对象的_proto_属性指向的对象, 以此类推。这就是所谓原型链,在原型链的最末端,就是Object构造函数的prototype属性指向的那一个原型对象,这个原型上定义了一些基本的方法,如valueOf,toString等,这就像是java中的Object。

javascript的prototype原理理解的更多相关文章

  1. 我也谈javascript闭包的原理理解

    参考原文:http://www.oschina.net/question/28_41112 前言:还是一篇入门文章.Javascript中有几个非常重要的语言特性——对象.原型继承.闭包.其中闭包 对 ...

  2. 转载:Javascript面向对象编程原理 -- 理解对象

    源地址:http://www.html-js.com/article/1717 虽然JavaScript中已经自带了很多内建引用类型,你还是会很频繁的需要创建自己的对象.JavaScript编程的很大 ...

  3. Web程序员应该知道的Javascript prototype原理

    有同事问了我几个和Javascript的类继承的小问题,我在也不太理解的情况下,胡诌了一通. 回来以后有些内疚, 反省一下, 整理整理Javascript的prototype的原理, 自己清楚点, 也 ...

  4. JavaScript闭包的一些理解

    原文:JavaScript闭包的一些理解 简单一点的说:闭包就是能够读取其他函数内部变量的函数.那如何实现读取其它函数内部变量呢,大家都知道在JavaScript中内部函数可以访问其父函数中的变量,那 ...

  5. 对JavaScript中闭包的理解

    在前端开发中闭包是一个很重要的知识点,是面试中一定会被问到的内容.之前我对闭包的理解主要是"通过闭包可以在函数外部能访问到函数内部的变量",对闭包运用的也很少,甚至自己写过闭包自己 ...

  6. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  7. 转:对JavaScript中闭包的理解

    关于 const     let      var  总结: 建议使用 let  ,而不使用var,如果要声明常量,则用const. ES6(ES2015)出现之前,JavaScript中声明变量只有 ...

  8. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  9. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

随机推荐

  1. 本地windows下PHP连接远程oracle遇到的诸多问题

    任务目的:本地windows下PHP连接远程服务器下的oracle. 必须必须 确定服务器的数据库版本,如果本地的驱动和对方服务器版本不一致,会导致许多报错. 已知的oracle版本  分为 32位的 ...

  2. Jetty开发(2)

    部署web应用 配置了部署模块的Jetty服务器实例能够在webapps目录下热部署web应用.在webapps目录下标准的War包和jetty的配置文件能够被热部署进服务器需要符合下述规则: exa ...

  3. AFNetworking使用总结

    AFNetworking使用总结   关于AFNetworking使用总结 以及一些错误的解决办法. AD:WOT2015 互联网运维与开发者大会 热销抢票 AFNetworking使用总结 分享类型 ...

  4. chord原理的解读

    chord: A Scalable Peer-to-peer Lookup Service for Internet Application 在 P2P 系统中,有效地定位分布在网络中不同节点的数据资 ...

  5. C++中new和delete的背后( call edx 调用虚表内的第二个函数(析构函数))

    关于 C++中new背后的行为, 以前已经写过一篇了 理解C++中new背后的行为, 但是里面也只是泛泛而谈,没有真凭实据, 下面我们从汇编的角度看C++编译器究竟在背后干了什么?   我们的代码很简 ...

  6. BZOJ2101: [Usaco2010 Dec]Treasure Chest 藏宝箱

    2101: [Usaco2010 Dec]Treasure Chest 藏宝箱 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 327  Solved:  ...

  7. BZOJ2023: [Usaco2005 Nov]Ant Counting 数蚂蚁

    2023: [Usaco2005 Nov]Ant Counting 数蚂蚁 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 56  Solved: 16[S ...

  8. (1) 一个字符串,根据输入参数m,找出字符串的m个字符的所有字符串

    /** * 有一个字符串,根据输入参数m,找出字符串的m个字符的所有字符串 例如: String str ="abc", m=2 得到结果是 "ab" &quo ...

  9. 华为手机APK 汉语译名

    华为桌面 删除前要找一个桌面程序代替短信息 不删(貌似自带短信会偷流量..猜测猜测.唉~暂时没办法)输入法 也是删除前要找到替代输入法,否则后果..... 同名的odex也删了,主体不见了留躯壳何用? ...

  10. Address Book(地址薄)

    <?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.Scene?> ...