下面的代码:

function Dog(name) {
this.name = name;
Dog.prototype = { shout: function() { alert("I am " + this.name); } }; } var dog1 = new Dog("Dog 1");
dog1.shout();

上面的代码看起来很“优美”,可一运行,却报错:Object #<Dog> has no method 'shout'

在 YUI 3 学习笔记:oop 中,曾提到过,对于代码:

Fn() {}; var fn = new Fn();

new Fn() 的实际构造过程可以等价为以下伪代码:

var o = {__proto__: Fn.prototype}; Fn.apply(o); return o;

理解了 new 的构造过程,我们可以分析上面的实例了。

首先,JS引擎在遇到函数声明 function Dog(…) 时,会给函数对象添加 prototype 属性,伪代码如下:

Dog.prototype = {constructor: Dog};

当运行到 var dog1 = new Dog(”Dog 1″) 时,内部操作:

var o = {__proto__: Dog.prototype}; Dog.apply(o); return o

也许你已经知道问题所在了。为了更清楚,添加点注释:

// Dog.prototype = {constructor: Dog}; var o = {__proto__: Dog.prototype}; // 此时,o = {__proto__: {constructor: Dog}} Dog.apply(o); // 此时,Dog.prototype = {shout: function(){...}} return o;

显然,运行 dog1.shout() 时,dog1 的确没有 shout 方法。

(个人验证:
console.log(dog1.__proto__ === Dog.prototype);
输出为false。
上面的解释不是很清楚,可以这么理解,在我们在创建dog1的时候,一般是Dog1的prototype已经确定了的,但这里prototype在构造的时候更改了,
导致我们的_proto__发生改变了。 为什么改为下面的就可以了:
function Dog(name) {
this.name = name; }
Dog.prototype = { shout: function() { alert("I am " + this.name); } };
var dog1 = new Dog("Dog 1");
dog1.shout();//输出 i am dog1
因为是Dog.prototype首先确定下面了,再dog1=new Dog("dog1");

上面的代码:
console.log(dog1.__proto__.constructor);
输出的是:function Object() { [native code] } 说明指向 的是Object。看http://www.cnblogs.com/youxin/p/3219175.html 这个图就明白了。 )

考考大家:

function Dog(name) {
this.name = name;
Dog.prototype = { shout: function() { alert("I am " + this.name); } };
}
var dog1 = new Dog("Dog 1");
var dog2 = new Dog("Dog 2");
dog2.shout();
dog1.shout();

请问运行结果是什么?

(i'm dog2  ,第二个dog1没有方法shout,运行错误)

注意是先创建的dog1,而后调用dog1.)

最后,想大声疾呼:作为一门语言,JavaScript 有自己的脾性。用 Java 等代码方式去书写 JavaScript 代码,是不妥当的。在不使用框架的情况下,一次性添加多个方法时,推荐以下书写风格:

function Dog(name) { this.name = name; } 
Dog.prototype = { constructor: Dog, shout: function() { \* ... *\ }, run: function() { \* ... *\ } }; http://lifesinger.org/blog/2009/08/new-funtion-secret/#more-2103

从一个实例,看new FunctionName()的内部机制的更多相关文章

  1. 从一个实例看javascript几种常用格式的转换

    要对如图一所示的左侧table的数据按照“总量”进行排序 1,在前端实现 2,数据格式为object,如图二 原创文章,转载请注明:http://www.cnblogs.com/phpgcs java ...

  2. 从一个死锁看mysql innodb的锁机制

    背景及现象 线上生产环境在某些时候经常性的出现数据库操作死锁,导致业务人员无法进行操作.经过DBA的分析,是某一张表的insert操 作和delete操作发生了死锁.简单介绍下数据库的情况(因为涉及到 ...

  3. 关于类、方法、对象(实例):通过一个例子看一下self都做了哪些事情

    我们在定义一个类时,经常会在类的各个方法中看到self,那么在程序执行时self到底起了什么作用,什么时候要加self,这一点需要我们思考并好好理解.之前在学习时没有想这么多,加之用pycharm写代 ...

  4. Singleton单例模式是最简单的设计模式,它的主要作用是保证在程序执行生命周期中,使用了单类模式的类仅仅能有一个实例对象存在。

                                                                                                        ...

  5. C# 只启动一个实例完全解决方案

    工作上经常会遇到"程序只能启动一个实例"这样的需求. 我想,这样的需求应该很普遍,所以没打算去动脑筋,去找谷歌问下就得了,用下来发现,不是这里不爽就是那里不行. 先说下我详细的几点 ...

  6. C语言入门(17)——C语言数组应用的一个实例

    本篇通过一个实例介绍使用数组的一些基本模式.问题是这样的:首先生成一列0-9的随机数保存在数组中,然后统计其中每个数字出现的次数并打印,检查这些数字的随机性如何.随机数在某些场合(例如游戏程序)中是非 ...

  7. 苹果公司的新的编程语言 Swift 高级语言(十一)--初始化类的析构函数的一个实例

    一 .实例的初始化          实例的初始化是准备一个类.结构或枚举的实例以便使用的过程. 初始化包含设置一个实例的每个存储属性为一个初始值,以及运行不论什么其他新的实例可以使用之前须要的设置或 ...

  8. spring得到实例和new一个实例,哪个快?

    spring配置的bean是默认单例,那么在程序中,得到一个实例一定比创建一个实例的速度快,也更加省资源.今天实际测试的时候发现,new 一个对象比spring得到一个对象快多了.后面自己又加了个单例 ...

  9. vc++高级班之窗口篇[4]---让程序只运行一个实例

      大家都看过或者使用过类似只运行一个实例的程序,比如:QQ游戏.部分浏览器 等等! 让一个程序只运行一个实例的方法有多种,但是原理都类似,也就是在程序创建后,有窗口的程序在窗口创建前, 检查系统中是 ...

随机推荐

  1. ServletConfig和ServletContext

    ServletConfig和ServletContext Servlet初始化参数 在Servlet的配置文件web.xml中,可以使用一个或多个<init-param>标签为Servle ...

  2. BCB6.0(Borland C++ Builder 6.0)下载位置(P2P)

    这个老东西还真不好找,搜索了一下,有一些所谓的精简版,绿色版,破解版,不靠谱. 公司有正版光盘,我装过,下面这两个应该是原版的: CD1: ed2k://|file|%5BBorland.C...Bu ...

  3. 常用433MHZ无线芯片性能对比表分享

    常用433M芯片性能对比: 芯片型号 SI4432 CC1101 NRF905 A7102 A7108 输出功率 20dBm 10dBm 10dBm 15dBm 20dBm 功耗 TX:85mA RX ...

  4. C#打印条码BarTender SDK打印之路和离开之路(web平凡之路)

    从来没想过自己会写一篇博客,鉴于这次从未知的探索到一个个难点的攻破再到顺利打印,很想记录这些点滴,让后人少走弯路. 下面走进正题. 需求:取数据库里的相应的字段数据,并生成条形码,可以批量.单条打印. ...

  5. CXF发布webservice入门

    1.设置CXF的bin目录进环境变量 2.CXF导入相关的jar包. 3.建立接口 @WebService public interface HelloWorld { public void say( ...

  6. grep 和 sed:linux经常使用工具 &amp; 基本正則表達式

    grep 见链接:http://www.cyberciti.biz/faq/grep-regular-expressions/ sed參考文章:http://www.thegeekstuff.com ...

  7. mysql insert中文乱码无法插入ERROR 1366 (HY000): Incorrect string value

    ERROR 1366 (HY000): Incorrect string value: '\xB1\xEA\xCC\xE2\xD5\xE2...' for column 'title' at row ...

  8. sublime安装和汉化

    对程序员来说,在不同的平台下有不同的IDE,网上很多教程都是使用DW,以致DW大名鼎鼎.其实,还有一些我们不为熟知的,却超级牛X的编辑器,我相信Sublime Text就是其中之一. 官方下载地址:h ...

  9. UVA 1614 - Hell on the Markets

    题意: 输入n个数,第i个数ai满足1≤ai≤i.对每个数添加符号,使和值为0. 分析: 排序后从最大的元素(假设为k)开始,凑出sum/2即可.用去掉了k的集合,一定可以凑出sum/2 - a[k] ...

  10. CSS中字体尺寸总结

    下面是我总结的css中关于字体尺寸的知识,欢迎高手拍砖! 前端开发过程中,我们经常会遇到设置某个div固定显示几行文本:这时我们需要精确计算每个字号字体的宽度和高度. 下面是w3school中描述的尺 ...