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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
JS模板实现方法
Apr 03 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
bootstrap table实例详解
Jan 06 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
javascript中如何判断类型汇总
May 14 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python简单实现AES加密和解密
2019/03/28 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
运动会广播稿500字
2014/01/28 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
卖房协议书
2014/04/11 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
职工宿舍管理制度
2015/08/05 职场文书
高一作文之乐趣
2019/11/21 职场文书
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python