学习javascript的闭包,原型,和匿名函数之旅

Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性，本文给大家介绍js的闭包,原型,和匿名函数之旅，感兴趣的朋友一起学习吧

本文通过示例给大家介绍javascript的闭包,原型,和匿名函数，具体详情请看下文。

一 .>关于闭包

理解闭包 需要的知识

1.变量的作用域

例1:

1. var n =99; //建立函数外的全局变量 
2. function readA(){ 
3. alert(n); //读取全局变量 
4. } 

readA(); //执行此函数

例2:

1. function readB(){ 
2. var c = 9; 
3. function readC(){ 
4. console.log(c); //ok c可见 
5. } 
6. return readC; 
7. } 
8. alert(c); //error c is not defined. 

note: 函数内部声明变量c时,一定要加上 var,否则 c会成为一个全局变量

所以函数内可见全局变量,函数内的局部变量却对外不可见

js的作用域是链式的,父对象里的变量总对子对象可见,子对象的对象却对父对象不可见

当我们要获取函数内的内部变量

于是有了例3:

1. function readB(){ 
2. var c = 9; 
3. function readC(){ 
4. console.log(c); 
5. } 
6. return readC(); 
7. } 
8. readB(); 

闭包很类似基于此做了一个变式

1. function readB(){ 
2. var c = 9; 
3. function readC(){ 
4. console.log(c); 
5. } 
6. return readC; 
7. } 
8. var res = readB(); 
9. res(); 

note:

1.慎用闭包,注意内存占用,因为它会保存父函数的状态

2.不要随便改变父函数内部变量的值

理解闭包

note: this 指包含它的函数被执行时所属的对象

例1:

1. var name = "The Window"; 
2.  
3. var object = { 
4. name : "My Object", 
5.  
6. 　　getNameFunc : function(){ //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值 
7. 　　 return function(){ //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于window 
8. 　　　　 return this.name; 
9. 　　　　}; 
10. 　　} 
11. }; 
12. console.log(object.getNameFunc()()); //the window 

例2:

1. var name = "The Window"; 
2.  
3. var object = { 
4. name : "My Object", 
5.  
6. getNameFunc : function(){ 
7. var that = this; 
8. 　　return function(){ 
9. 　　 return that.name; 
10. 　　}; 
11.  
12. } 
13. }; 
14. console.log(object.getNameFunc()()); //My Object 

二 .>匿名函数

直接定义一个匿名函数 然后调用这个匿名函数,这种形式在jquery插件的定义时很常见

1.通过函数字母量的方式. 先声明一个匿名函数,然后执行它

1. ( function(){ 
2. console.log('excute self'); 
3. }) (); 

2.通过优先表达式的方式 , 由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数

1. ( 
2. function () { 
3. alert(2); 
4. } 
5. () 
6. ); 

3.void操作符 用void操作符去执行一个没有用圆括号包围的一个单独操作数

1. void function(){ console.log('void') } (); 

三 .>关于prototype

原型 prototype

理解js中的protitype首先需要明白js的面向对象设计

1. function People(name){ 
2. this.name = name; 
3.  
4. console.log(this); //Window 或者 object { name: 'xxx' } 
5. this.introduce = function(){ //实例对象方法 
6. console.log(this.name); 
7. } 
8. } 
9. new People('leon').introduce(); 
10. //这里有一个非常有趣的现象,结合前面的来看的话, 
11. //首先function people里的this指向的默认是Window对象 
12. //当 调用 People();时 this 输出为 Window对象 
13. //但一旦调用new People('xx')时, this 输出为 {name:'xx'} 
14. //其实也很好理解,一旦new ,便新建了一个对象 

实例对象方法只能这样 new People('leon').introduce(); 调用 因为它使用前必须初始化

类的对象的静态方法

1. var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型 
2. People.sayhi = function(to_who){ 
3. console.log('hi '+ to_who); 
4. } 
5. People.sayhi('lee'); //调用时这样调用 

原型方法

1. var People = function(){}; // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型 
2. People.prototype.meet = function(meet_who) { 
3. console.log('I am '+this.name + ',going to meet ' + meet_who); 
4. }; 
5. new People('lee').meet('xx'); 

原型方法只能由该类的对象 调用

A.prototype = new B();

原型看起来很像继承,但其实不是,它更像clone更准确

如果出现了父类和子类出现了重名的属性,采取就近原则,如果找不到一级一级向上找,如果要指定调用上级的属性,使用call方法

1. extendClass.prototype = new baseClass(); 
2. var instance = new extendClass(); 
3. var baseinstance = new baseClass(); 
4. baseinstance.showMsg.call(instance); 
5. obj1.func.call(obj); 

以上内容是小编给大家分享的学习javascript的闭包,原型,和匿名函数之旅，希望对大家有用。