JavaScript闭包模型和原型模型.ppt

Tenfyguo（郭懿心） 深度探讨javascript函数的原型链和闭包 2010年01月15日 tencent 提 纲 JavaScript中的函数 [[prototype]]和prototype属性 函数作用域链以及闭包 一些实验结论 QA 1，JavaScript中的函数 Javascript = 数据 +函数。 函数的各种定义方式。 基于原型链的继承体系的构建（不同于传统的基于class的继承机制）。 函数即数据，即变量，即方法，即上下文。 1，JavaScript中的函数 //普通的函数定义（定义式的函数） function fn(a, b) { } //赋值形式声明的函数 var fn = function(a, b) { } //作为对象的方法 var obj = {}; obj.fn = function(a, b) { } 1，JavaScript中的函数 //调用Function 构造函数new Function var fn = new Function(‘a’,’b’, ‘return (a+b);’ ); //匿名函数-定义并立刻执行 (常用于模块隔离) (function(){ //TODO here })(); //内嵌函数 – (重点讨论) function outer(a,b) { function _innerFn(){ //可以访问外部函数的变量 }; } 1，猜猜看？？ 1，猜猜看？？ 详细讨论函数的执行顺序： /tenfyguo/archive/2009/09/06/4525957.aspx 1，作为构造函数 //作为构造函数进行调用 function constructorFn(a, b) { } var obj = new constructor(a, b); 是否这样也是ok的？ var obj = {}; constructor.call(obj,a,b); //作为构造函数进行调用 function constructorFn(a, b) { } constructorFtotype.fn = function(){ }; var obj = new constructor(a, b); //new 其实对应了几步基本的操作？ obj.fn(); 1，[[prototype]]和prototype属性？ 这两个属性有什么区别？ 二，[[prototype]]和prototype属性 [[prototype]]是一切javascript Native Object的内置的原型属性。 [[prototype]]不能由javascript直接访问，只能由js engine搜索原型链的时候访问。 javascript正是通过搜索原型链来搭建它的继承体系。 Prototype是javascript函数自身具有的属性的，它不是内置的，因此我们可以通过 Javascript直接访问。 Javascript的内置Constructor的prototype不能被改写，但可以添加更多的成员。 函数的prototype将会赋值给通过该函数进行new的对象的[[prototype]]。 二，ECMA262 二，函数和对应的[[scope]]属性 (function (a){ var b=I am tenfy; alert(a); })(test); function outer(out_var){ var outlocal = i am outer local; var innerFn = function(inner_var){ var inlocal = i am inner local; alert(inner_var); alert(inlocal); alert(outlocal); alert(out_var); }; innerFn(inner_var); }; outer(out_var); 二，[[scope]]的搜索顺序 function test1() { for(var i=0;i10000;i++) { var el = document.getElementsByTagName(div); } var a; }; test1(); 二，[[scope]]的搜索顺序 function test2() { var el,_d = document; for(v