javascript 基础 转

最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟. 其实我们容易忽视的javascript的细节还有更多, 本文仅是冰山一角. 希望大家都能通过本文有所斩获.

一. Javascript面向对象

Javascript是一门面向对象的语言, 虽然很多书上都有讲解,但还是有很多初级开发者不了解.

创建对象

ps: 以前写过一篇详细的创建对象的文章(原型方法, 工厂方法等)但是找不到了, 回头如果还能找到我再添加进来.下面仅仅简单介绍.

在C#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字:

  1. var objectA = new Object(); 

但是实际上"new"可以省略:

  1. var objectA = Object(); 

但是我建议为了保持语法一直, 总是带着new关键字声明一个对象.

创建属性并赋值

在javascript中属性不需要声明, 在赋值时即自动创建:

  1. objectA.name = "my name"

访问属性

一般我们使用"."来分层次的访问对象的属性:

  1. alert(objectA.name); 

嵌套属性

对象的属性同样可以是任何javascript对象:

  1. var objectB = objectA;  
  2. objectB.other = objectA;  
  3. //此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变  
  4. objectA.name;  
  5. objectB.name;  
  6. objectB.other.name; 

使用索引

如果objectA上有一个属性名称为"school.college", 那么我们没法通过"."访问,因为"objectA.school.college"语句是指寻找objectA的school属性对象的college属性.

这种情况我们需要通过索引设置和访问属性:

  1. objectA["school.college"] = "BITI";  
  2. alert(objectA["school.college"]); 

下面几个语句是等效的:

  1. objectA["school.college"] = "BITI";  
  2.  var key = "school.college" 
  3. alert(objectA["school.college"]);  
  4. alert(objectA["school" + "." + "college"]);          
  5. alert(objectA[key]); 

JSON 格式语法

JSON是指Javascript Object Notation, 即Javascript对象表示法.

我们可以用下面的语句声明一个对象,同时创建属性:

  1. //JSON  
  2.         var objectA = {  
  3.             name: "myName",  
  4.             age: 19,  
  5.             school:  
  6.             {  
  7.                 college: "大学",  
  8.                 "high school""高中"   
  9.             },  
  10.             like:["睡觉","C#","还是睡觉"]  
  11.         } 

JSON的语法格式是使用"{"和"}"表示一个对象, 使用"属性名称:值"的格式来创建属性, 多个属性用","隔开.

上例中school属性又是一个对象. like属性是一个数组. 使用JSON格式的字符串创建完对象后, 就可以用"."或者索引的形式访问属性:

  1. objectA.school["high school"];  
  2. objectA.like[1]; 

静态方法与实例方法

静态方法是指不需要声明类的实例就可以使用的方法.

实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法.

  1. function staticClass() { }; //声明一个类  
  2.    staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法  
  3.    staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法 

上面首先声明了一个类staticClass, 接着为其添加了一个静态方法staticMethod 和一个动态方法instanceMethod. 区别就在于添加动态方法要使用prototype原型属性.

对于静态方法可以直接调用:

  1. staticClass.staticMethod(); 

但是动态方法不能直接调用:

  1. staticClass.instanceMethod(); //语句错误, 无法运行. 

需要首先实例化后才能调用:

  1. var instance = new staticClass();//首先实例化  
  2. instance.instanceMethod(); //在实例上可以调用实例方法  

二. 全局对象是window属性

通常我们在  

然而我们还应该知道, 实际上全局变量objectA是创建在window对象上, 可以通过window对象访问到:

  1. window.objectA 

三. 函数究竟是什么

我们都知道如何创建一个全局函数以及如何调用:

  1. function myMethod()  
  2. {  
  3. alert("Hello!");  
  4. }   
  5. myMethod();  

其实同全局对象一样, 使用function关键字创建的方法(也可以创建类)的名称, 实际上是为window对象创建了myMethod属性, 并且值是一个匿名方法, 上面的语句等同于:

  1. window.myMethod = function()  
  2. {  
  3. alert("Hello!");  

无论使用哪种方式声明, 实际保存时都是使用函数名创建window对象的属性. 并且值只有函数体没有函数名称.

所以,下面三种声明方式是等效的:

  1. function myMethod()  
  2. {  
  3. alert("Hello!");  
  4. }  
  5. window.myMethod = function()  
  6. {  
  7. alert("Hello!");  
  8. }  
  9. myMethod = function()  
  10. {  
  11. alert("Hello!");  

四. "this"究竟是什么

在C#中,this变量通常指类的当前实例. 在javascript则不同, javascript中的"this"是函数上下文,不是由声明决定,而是由如何调用决定.因为全局函数其实就是window的属性, 所以在顶层调用全局函数时的this是指window对象.

下面的例子可以很好的说明这一切:

  1. var o1 = { name: "o1 name" };  
  2.         window.name = "window name";  
  3.  
  4.         function showName()  
  5.         {  
  6.             alert(this.name);  
  7.         }          
  8.           
  9.         o1.show = showName;  
  10.         window.show = showName;  
  11.  
  12.         showName();  
  13.         o1.show();  
  14.         window.show(); 

结果

window name

o1 name

window name 

 

结果证明在顶层调用函数和使用window对象调用函数时, this都指向window对象. 而在对象中调用函数时this指向当前对象.

五. javascript中的闭包

闭包的概念比较难以理解, 先看闭包的定义:

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

简单表达:

闭包就是function实例以及执行function实例时来自环境的变量.

先看下面的例子:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6. <body>  
  7.     <div id="divResult"></div>  
  8.     <script type="text/javascript">  
  9.         function start()  
  10.         {  
  11.             var count = 0;  
  12.             window.setInterval(function()  
  13.             {  
  14.                 document.getElementById("divResult").innerHTML += count + "<br/>";  
  15.                 count++;  
  16.             }, 3000);  
  17.         };  
  18.         start();  
  19.     </script>  
  20. </body>  
  21. </html> 

count是start函数体内的变量, 通常我们理解count的作用于是在start()函数内, 在调用start()函数结束后应该也会消失.但是此示例的结果是count变量会一直存在,并且每次被加1:

从零开始学习jQuery(剧场版) 你必须知道的javascript

因为count变量是setInterval中创建的匿名函数(就是包含count++的函数)的闭包的一部分!

再通俗的讲, 闭包首先就是函数本身, 比如上面这个匿名函数本身, 同时加上在这个函数运行时需要用到的count变量.

javascript中的闭包是隐式的创建的, 而不像其他支持闭包的语言那样需要显式创建. 我们在C#语言中很少碰到是因为C#中无法在方法中再次声明方法. 而在一个方法中调用另一个方法通常使用参数传递数据.

转载于:https://www.cnblogs.com/kevinge/archive/2011/10/20/2218639.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/462439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2019春第二次课程设计实验报告

2019春第二次课程设计实验报告 一、实验项目名称 用数组实现反弹球消砖块 二、实验项目功能描述 利用键盘按键控制小球方向让小球碰到挡板后反弹上去消除砖块。 三、项目模块结构介绍 四、实现界面展示 五、代码托管链接 https://gitee.com/huangxuannn/events 六、实验总结 上…

nodejs+redis

为什么80%的码农都做不了架构师&#xff1f;>>> redis可以用来管理session http://www.csser.com/board/4f77e6f996ca600f78000936 然后使用的时候redis-server这个服务进程得开着&#xff0c;不然会悲剧的 转载于:https://my.oschina.net/kiloct/blog/137629

FxCAD 实验三 实现对象的【属性】事件

接着实验三&#xff0c;本次实验&#xff0c;实现鼠标右键点击【图形对象时】可以弹出一个【WinForm】属性界面 添加一个WindowsForm 界面&#xff0c;如图。类名字&#xff1a;FormBox 回到FxBox类文件 覆盖 SelectEvent 方法&#xff0c;添加上面的代码 运行程序&#xff0c;…

图像的灰度处理

图像的灰度处理的三种方法&#xff1a; 1.imread的方法将像素值修改为0 2.调用一个RGB转灰度的方法实现灰度转化&#xff08;cv2.COLOR_BGR2GRAY&#xff09; 3.R G B 的均值取灰度值来灰度转化&#xff08;原理&#xff09; 处理结果 如下: 转载于:https://www.cnblogs.com/Ja…

面向对象基础-委托与事件

首先举一个实例&#xff1a;创建一个控制台程序&#xff0c;需求是&#xff1a;有一只猫Tom&#xff0c;有两只老鼠Jerry和Jack&#xff0c;Tom只叫一声“喵&#xff0c;我是Tom”&#xff0c;两只老鼠就说“老猫来了&#xff0c;快跑”&#xff0c;我们来分析一下&#xff1a;…

linux下wget的用法

2019独角兽企业重金招聘Python工程师标准>>> Linux wget是一个下载文件的工具&#xff0c;它用在命令行下。对于Linux用户是必不可少的工具&#xff0c;尤其对于网络管理员&#xff0c;经常要下载一些软件或从远程服务器恢复备份到本地服务器。如果我们使用虚拟主机…

【传智播客】Libevent学习笔记(三):事件循环

目录 00. 目录01. event_base_loop函数02. event_base_dispatch函数03. event_base_loopexit函数04. event_base_loopbreak函数05. event_base_got_exit函数06. event_base_got_break函数07. event_base_dump_events函数08. event_base_dump_events函数09. 废弃的事件循环函数1…

Android的MVC框架

http://www.cnblogs.com/wanghafan/archive/2012/07/20/2600786.html MVC是当前比较流行的框架&#xff0c;随便Google下&#xff0c;就可以发现几乎所有的应用程序开发中都采用了MVC框架&#xff0c;例如&#xff1a;.NET&#xff0c;Java Spring&#xff0c;Java Struts&…

DVWA-SQL注入

SQL注入解题思路 寻找注入点&#xff0c;可以通过web扫描工具实现通过注入点&#xff0c;尝试得到连接数据库的用户名&#xff0c;数据库名称&#xff0c;权限等信息。猜解关键数据库表极其重要字段与内容。通过获得的用户信息寻找后台进行登录。利用后台上传webshell或一句话木…

easyui验证:validatebox

2019独角兽企业重金招聘Python工程师标准>>> $.extend($.fn.validatebox.defaults.rules, { eqTrim : {/* 填写名字前面不能有空格&#xff01; */ validator : function(value,param) { var reg new RegExp(param); var falg!reg.test(value); return falg; }, me…

秒懂机器学习---当机器学习遇上决策树....

秒懂机器学习---当机器学习遇上决策树.... 一、总结 一句话总结&#xff1a; 多多看图&#xff0c;图的直观效果很好&#xff0c;很多时候文字实在表达不清 1、决策树&#xff08;Decision Tree&#xff09;中的各个节点表示什么意思&#xff1f; 每一个树节点表示一个属性上的…

Linux系统目录结构及主要内容

为什么80%的码农都做不了架构师&#xff1f;>>> 文件结构 &#xff1a; /&#xff1a;根目录&#xff0c;所有的目录、文件、设备都在/之下&#xff0c;/就是Linux文件系统的组织者&#xff0c;也是最上级的领导者。 /bin&#xff1a; bin 就是二进制&#xff08;b…

学习《深度学习入门:基于Python的理论与实现》高清中文版PDF+源代码

入门神经网络深度学习&#xff0c;推荐学习《深度学习入门&#xff1a;基于Python的理论与实现》&#xff0c;这本书不来虚的&#xff0c;一上来就是手把手教你一步步搭建出一个神经网络&#xff0c;还能把每一步的出处讲明白。理解神经网络&#xff0c;很容易就能入门。 深度学…

学习《PythonWeb开发实战(董伟明)》中文PDF+源代码

python可以用了进行数据分析&#xff0c;也可以进行Web开发&#xff0c;一般会使用django或者flask等进行开发。 国内介绍python web的书有写的不错的&#xff0c;推荐看看《PythonWeb开发实战》 他的定位是进阶读者&#xff0c;介绍了Python web的生态&#xff0c;有些包介绍得…

周鸿祎:在360新员工入职培训上的讲话

这个是周鸿祎给入司360新员工的一段话&#xff0c;不但适合360&#xff0c;也适合所有的公司员工。特此分享。我想给新入职的同事讲一讲我的期望&#xff0c;再提几个建议。我这个人喜欢说真话&#xff0c;不喜欢说漂亮话&#xff0c;因为漂亮话没用。但说真话&#xff0c;大家…

使用面向对象技术创建高级 Web 应用程序

作者&#xff1a; 出处&#xff1a; 使用面向对象技术创建高级 Web 应用程序 来源:开源中国社区 作者:oschina最近&#xff0c;我面试了一位具有5年Web应用开发经验的软件开发人员。她有4年半的JavaScript编程经验&#xff0c;自认为自己具有非常优秀的JavaScript技能&#xff…

DevExpress控件使用经验总结

DevExpress控件使用经验总结 DevExpress是一个比较有名的界面控件套件&#xff0c;提供了一系列的界面控件套件的DotNet界面控件。本文主要介绍我在使用DevExpress控件过程中&#xff0c;遇到或者发现的一些问题解决方案&#xff0c;或者也可以所示一些小的经验总结。总体来讲&…

第二阶段团队绩效评分

第二阶段评分结果&#xff1a; 转载于:https://www.cnblogs.com/xczd/p/11068692.html

随堂小测冲刺.第19天

我们小组的logo出来的&#xff0c;太酷了&#xff0c;不符合我的审美&#xff0c;本人表示无法接受。。。 还要谢谢李泽宇的女盆友&#xff0c;O(∩_∩)O哈哈~ 转载于:https://www.cnblogs.com/daisy99lijing/p/11024465.html

MSBuild编译扩展

新增一个C#工程&#xff0c;用记事本打开工程文件&#xff08;.csproj结尾&#xff09;&#xff0c;滚动条拉到最后&#xff0c;大家可以看到一段如下的代码&#xff0c;其中<Target Name"BeforeBuild">和<Target Name"AfterBuild">大家根据名…