[zz]new FunctionName()的内部机制
2009-11-07 23:28
302 查看
测试代码:
上面的代码看起来很“优美”,可一运行,却报错:“Object doesn’t support this property or method”.
对于代码:
new Fn() 的实际构造过程可以等价为以下伪代码:
理解了 new 的构造过程,我们可以分析上面的实例了。
首先,JS引擎在遇到函数声明 function Dog(…) 时,会给函数对象添加 prototype 属性,伪代码如下:
当运行到 var dog1 = new Dog(”Dog 1″) 时,内部操作:
也许你已经知道问题所在了。为了更清楚,添加点注释:
显然,运行 dog1.shout() 时,dog1 的确没有 shout 方法。
考考大家:
请问运行结果是什么?
最后,想大声疾呼:作为一门语言,JavaScript 有自己的脾性。
用 Java 等代码方式去书写 JavaScript 代码,是不妥当的。在不使用框架的情况下,一次性添加多个方法时,推荐以下书写风格:
function Dog(name) { this.name = name; Dog.prototype = { shout: function() { alert("I am " + this.name); } }; } var dog1 = new Dog("Dog 1"); dog1.shout();
上面的代码看起来很“优美”,可一运行,却报错:“Object doesn’t support this property or method”.
对于代码:
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 方法。
考考大家:
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();
请问运行结果是什么?
最后,想大声疾呼:作为一门语言,JavaScript 有自己的脾性。
用 Java 等代码方式去书写 JavaScript 代码,是不妥当的。在不使用框架的情况下,一次性添加多个方法时,推荐以下书写风格:
function Dog(name) { this.name = name; } Dog.prototype = { constructor: Dog, shout: function() { /* ... */ }, run: function() { /* ... */ } };
相关文章推荐
- 从一个实例,看new FunctionName()的内部机制
- 对new functionName()定义一个函数的理解
- 看看GtkWindow如何被生出来的(gtk_window_new()的内部机制)
- new和instanceof的内部机制
- PHPExcel导入导出 若在thinkPHP3.2中使用(无论实例还是静态调用(如new classname或classname::function)都必须加反斜杠,因3.2就命名空间,如/classname
- function getNewUrl(oldurl,paramname,pvalue)
- 对new functionName()定义一个函数的理解
- 看看GtkWindow如何被生出来的(gtk_window_new()的内部机制).
- 对new functionName()的理解
- Tomcat8.x Servlet应用 req.getParameter("username")的内部机制
- 再谈new functionName
- new和instanceof的内部机制
- new和instanceof的内部机制
- [转]浅谈ASP.NET内部机制(四)
- android内核剖析学习笔记:AMS(ActivityManagerService)内部原理和工作机制
- 搭建高可用mongodb集群(三)—— 深入副本集内部机制
- [转]浅谈ASP.NET内部机制(六)
- Coding Style to implement our own function new() -- when using vmm_data_member_begin
- ConcurrentDictionary内部机制粗解
- malloc和new的区别[zz]