jQuery 剧场版 你必须知道的javascript


Posted in Javascript onMay 27, 2009

一.摘要

本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节.  适合希望巩固javascript理论知识和基础知识的开发人员阅读.

 

二.前言

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

 

三.Javascript面向对象

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

创建对象

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

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

var objectA = new Object();

 

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

var objectA = Object();

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

创建属性并赋值

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

objectA.name = "my name";

 

访问属性

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

alert(objectA.name);

 

嵌套属性

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

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

 

使用索引

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

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

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

 

下面几个语句是等效的:

objectA["school.college"] = "BITI";
    var key = "school.college"
    alert(objectA["school.college"]);
    alert(objectA["school" + "." + "college"]);    
    alert(objectA[key]);

 

JSON 格式语法

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

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

//JSON
    var objectA = {
      name: "myName",
      age: 19,
      school:
      {
        college: "大学",
        "high school": "高中" 
      },
      like:["睡觉","C#","还是睡觉"]
    }

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

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

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

静态方法与实例方法

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

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

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

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

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

staticClass.staticMethod();

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

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

 

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

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

 

四.全局对象是window属性

通常我们在<script>标签中声明一个全局变量, 这个变量可以供当前页面的任何方法使用:

<script type="text/javascript">
    var objectA = new Object();
  </script>

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

window.objectA

五.函数究竟是什么

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

function myMethod()
    {
      alert("Hello!");
    }

    myMethod();

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

window.myMethod = function()
    {
      alert("Hello!");
    }

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

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

function myMethod()
    {
      alert("Hello!");
    }

    window.myMethod = function()
    {
      alert("Hello!");
    }

    myMethod = function()
    {
      alert("Hello!");
    }

六."this"究竟是什么

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

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

var o1 = { name: "o1 name" };
    window.name = "window name";

    function showName()
    {
      alert(this.name);
    }    
    
    o1.show = showName;
    window.show = showName;

    showName();
    o1.show();
    window.show();

 

结果:

jQuery 剧场版 你必须知道的javascript

jQuery 剧场版 你必须知道的javascript

jQuery 剧场版 你必须知道的javascript

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

 

七.javascript中的闭包

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

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

简单表达:

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

先看下面的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
  <div id="divResult"></div>
  <script type="text/javascript">
    function start()
    {
      var count = 0;
      window.setInterval(function()
      {
        document.getElementById("divResult").innerHTML += count + "<br/>";
        count++;
      }, 3000);
    };
    start();
  </script>
</body>
</html>

 

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

jQuery 剧场版 你必须知道的javascript

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

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

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

本文不再详细讲解闭包, 深入学习请参考下面的文章

八.总结

Javascript 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
详解小程序循环require之坑
Mar 08 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 #Javascript
jquery cookie插件代码类
May 26 #Javascript
判断脚本加载是否完成的方法
May 26 #Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 #Javascript
Javascript Select操作大集合
May 26 #Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 #Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php中设置多级目录session的问题
2011/08/08 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
如何用python整理附件
2018/05/13 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
中国入世承诺
2014/04/01 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
公民授权委托书范本
2014/09/17 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
Python 数据可视化之Matplotlib详解
2021/11/02 Python