`
liliang_xf
  • 浏览: 62687 次
  • 性别: Icon_minigender_1
  • 来自: 湖北
社区版块
存档分类
最新评论
  • yangqk1: 不知道楼主还在关注这个么,你做的这个项目还在继续么。我真正研究 ...
    webim
  • 周超亿: 你好,我想请问下, http://code.faqee.com ...
    webim
  • 周超亿: 你好,能不能把项目打包发给我一份,谢谢 Email:zhouc ...
    webim
  • liliang_xf: SQL子查询,连接查询,数据汇总,GROUP BY,ORDER ...
    sql的
  • liliang_xf: http://www.ibm.com/developerwor ...
    webim

javascript学习笔记一

阅读更多

Javascript中的继承

 

java 代码
  1.   
  2.        
  3.            
  4.         <script language=< span="">"javascript">   
  5.             function son(like)   
  6.             {   
  7.                 this.name="lang";   
  8.                 this.age =20;   
  9.                 this.aihao= function()   
  10.                 {   
  11.                     alert(like+".....");   
  12.                 }   
  13.             }   
  14.             function father(like)   
  15.             {   
  16.                 this.newSon = son;   //句柄
  17.                 this.newSon(like);   
  18.                 delete this.newSon;   //删除引用
  19.             }   
  20.             function test()   
  21.             {   
  22.                 var f= new father('足球');   
  23.                 alert(f.name);   
  24.                 f.aihao();   
  25.             }   
  26.         </script>   
  27.        
  28.        
  29.         "button" value="测试" onclick="test()"/>   
  30.        
  31.   

2使用Call方法进行继承

java 代码
  1.   
  2.        
  3.            
  4.         <script language=< span="">"javascript">   
  5.             function son(like)   
  6.             {   
  7.                 this.name="lang";   
  8.                 this.age =20;   
  9.                 this.aihao= function()   
  10.                 {   
  11.                     alert(like+".....");   
  12.                 }   
  13.             }   
  14.             //使用Call方法进行继承   
  15.             function father(like)   
  16.             {   
  17.                 son.call(this,'排球');   
  18.             }   
  19.             function test()   
  20.             {   
  21.                 var f= new father();   
  22.                 alert(f.name);   
  23.                 f.aihao();   
  24.             }   
  25.         </script>   
  26.        
  27.        
  28.         "button" value="测试" onclick="test()"/>   
  29.        
  30.   

 

 闭包的两个特点:

1、作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态。
2、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

例子

java 代码
  1. <script type=< span="">"text/javascript">    
  2. function sayHello2(name) {    
  3.  var text = 'Hello ' + name; // local variable    
  4.  var sayAlert = function() { alert(text); }    
  5.  return sayAlert;    
  6. }    
  7. var sy = sayHello2('never-online');    
  8. sy();    
  9. </script>  

作为一个Javascript程序员,应该明白上面的代码就是一个函数的引用。如果你还不明白或者不清楚的话,请先了解一些基本的知识,我这里不再叙述。
上面的代码为什么是一个闭包?
因为sayHello2函数里有一个内嵌匿名函数
sayAlert = function(){ alert(text); }
在Javascript里。如果你创建了一个内嵌函数(如上例),也就是创建了一个闭包。

在C或者其它的主流语言中,当一个函数返回后,所有的局部变量将不可访问,因为它们所在的栈已经被消毁。但在Javascript里,如果你声明了一个内嵌函数,局部变量将在函数返回后依然可访问。比如上例中的变量sy,就是引用内嵌函数中的匿名函数function(){ alert(text); },可以把上例改成这样:

java 代码
  1. <script type=< span="">"text/javascript">    
  2. function sayHello2(name) {    
  3.  var text = 'Hello ' + name; // local variable    
  4.  var sayAlert = function() { alert(text); }    
  5.  return sayAlert;    
  6. }    
  7. var sy = sayHello2('never-online');    
  8. alert(sy.toString());    
  9. </script>  

这里也就与闭包的第二个特点相吻合。

例2。

java 代码
  1. <script type=< span="">"text/javascript">    
  2. function say667() {    
  3.  // Local variable that ends up within closure    
  4.  var num = 666;    
  5.  var sayAlert = function() { alert(num); }    
  6.  num++;    
  7.  return sayAlert;    
  8. }    
  9.   
  10. var sy = say667();    
  11. sy();    
  12. alert(sy.toString());    
  13. </script>  

上面的代码中,匿名变量function() { alert(num); }中的num,并不是被拷贝,而是继续引用外函数定义的局部变量——num中的值,直到外函数say667()返回。

例3。

java 代码
  1. <script type=< span="">"text/javascript">    
  2. function setupSomeGlobals() {    
  3.  // Local variable that ends up within closure    
  4.  var num = 666;    
  5.  // Store some references to functions as global variables    
  6.  gAlertNumber = function() { alert(num); }    
  7.  gIncreaseNumber = function() { num++; }    
  8.  gSetNumber = function(x) { num = x; }    
  9. }    
  10.   
  11. </script>    
  12. "setupSomeGlobals()">生成 - setupSomeGlobals()    
  13. "gAlertNumber()">输出值 - gAlertNumber()    
  14. "gIncreaseNumber()">增加 - gIncreaseNumber()    
  15. "gSetNumber(5)">赋值5 - gSetNumber(5)   

 

上例中,gAlertNumber, gIncreaseNumber, gSetNumber都是同一个闭包的引用,setupSomeGlobals(),因为他们声明都是通过同一个全局调用——setupSomeGlobals()。
你可以通过“生成”,“增加”,“赋值”,“输出值”这三个按扭来查看输出结果。如果你点击“生成”按钮,将创建一个新闭包。也就会重写gAlertNumber(), gIncreaseNumber(), gSetNumber(5)这三个函数。

如果理解以上代码后,看下面的例子:

例4

java 代码
  1. <script type=< span="">"text/javascript">    
  2. function buildList(list) {    
  3.  var result = [];    
  4.  for (var i = 0; i < list.length; i++) {    
  5.  var item = 'item' + list[i];    
  6.  result.push( function() {alert(item + ' ' + list[i])} );    
  7.  }    
  8.  return result;    
  9. }    
  10.   
  11. function testList() {    
  12.  var fnlist = buildList([1,2,3]);    
  13.  // using j only to help prevent confusion - could use i    
  14.  for (var j = 0; j < fnlist.length; j++) {    
  15.  fnlist[j]();    
  16.  }    
  17. }    
  18.   
  19. testList();    
  20. </script>    
  21. 运行结果:    
  22. item 3 is undefined    
  23. item 3 is undefined    
  24. item 3 is undefined    
  25.   
  26. 代码result.push( function() {alert(item + ' ' + list[i])} ),    
  27. 使result数组添加了三个匿名函数的引用。这句代码也可以写成    
  28. var p = function() {alert(item + ' ' + list[i])};    
  29. result.push(p);   

 关于为什么会输出三次都是 "item 3 is undefined"

在上面的例子say667()例子中已经解释过了。
匿名函数function() {alert(item + ' ' + list[i])}中的list[i]并不是经过拷贝,而是对参数list的一个引用。直到函数buildList()返回为止,也就是说,返回最后一个引用。即遍历完list(注:list的最大下标应该是2)后,经过i++也就变成了3,这也就是为什么是item 3,而list[3]本身是没有初始化的,自然也就是undefined了。

例5

java 代码
  1. <script type=< span="">"text/javascript">    
  2. function newClosure(someNum, someRef) {    
  3.  // Local variables that end up within closure    
  4.  var num = someNum;    
  5.  var anArray = [1,2,3];    
  6.  var ref = someRef;    
  7.  return function(x) {    
  8.  num += x;    
  9.  anArray.push(num);    
  10.  alert('num: ' + num +     
  11.  'nanArray ' + anArray.toString() +     
  12.  'nref.someVar ' + ref.someVar);    
  13.  }    
  14. }    
  15. var closure1 = newClosure(40, {someVar:' never-online'})    
  16. var closure2 = newClosure(99, {someVar:' BlueDestiny'})    
  17. closure1(4)    
  18. closure2(3)    
  19. </script>  

 

在这最后一个例子中,展示如何声明两个不同的闭包。

分享到:
评论

相关推荐

    个人Javascript学习笔记 精华版

    个人Javascript学习笔记 精华版 本资源为个人Javascript学习笔记的精华版,涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明: 1. 什么是JavaScript...

    HTML+CSS+JavaScript教程学习笔记.zip

    HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    JavaScript是一种高级的、动态的、基于对象的客户端脚本语言。它是在网页上执行的脚本语言,能实现网页的交互功能。下面是该资源中的重要知识点总结: 一、 JavaScript 基本概念 * JavaScript是一种基于对象的脚本...

    JavaScript-学习笔记.pdf

    以上是JavaScript学习笔记中提到的一些核心知识点,通过对这些知识点的理解和熟练应用,可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中,结合具体的项目需求,这些知识会得到更深入的拓展和应用...

    JavaScript 学习笔记集和代码库

    JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和代码库JavaScript 学习笔记集和...

    javascript学习笔记

    ### JavaScript学习笔记精要 #### JavaScript简介 JavaScript是一种强大的、多用途的脚本语言,用于增强网站的交互性和用户体验。它是由Netscape公司的Brendan Eich在1995年发明的,并且迅速成为了Web开发的标准之...

    javascript入门学习笔记

    这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...

    js 笔记 javascript 学习笔记

    本学习笔记将深入探讨JavaScript的核心概念,包括变量、数据类型、操作符、控制流程、函数、对象、数组、原型链、闭包等,并结合实际示例,如my.js、order.js、login.js等文件,来讲解其在实际项目中的应用。...

    javascript学习笔记整理知识点整理

    这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料,涵盖了JavaScript的基础知识,旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中,变量用于存储数据。...

    javascript学习笔记.docx

    这篇学习笔记主要涵盖了JavaScript的基础语法和客户端JavaScript的相关知识。 1. **JavaScript基本语法**: - **变量声明**:未声明的变量尝试读取时会产生错误,而写入未声明的变量会创建一个全局变量。 - **...

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程,涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始,引导读者理解网页样式的设置与应用。 1. CSS(Cascading Style Sheets)样式表是用于控制...

    JavaScript学习笔记.pdf

    JavaScript学习笔记是一本关于JavaScript编程语言的教材,该教材通过丰富的实例,系统地介绍了JavaScript的基础知识和实际应用技巧,帮助读者一步步掌握客户端编程技术。本书共分为九章,每一章都有其特定的主题,...

    Javascript学习笔记PPT

    Javascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript学习笔记PPTJavascript...

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...

    javaScript学习笔记总结.docx

    JavaScript是一种轻量级的解释型编程语言,主要用于网页和网络应用开发。它由网景公司的Brendan Eich在1995年发明,最初设计目的是增强网页的交互性,验证表单数据。JavaScript的运行环境是浏览器,它不需要预编译,...

Global site tag (gtag.js) - Google Analytics