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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
Python读取网页内容的方法
2015/07/30 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
Python logging设置和logger解析
2019/08/28 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python实现自动签到脚本功能
2020/08/20 Python
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
高三生物教学反思
2014/01/25 职场文书
医院总经理岗位职责
2014/02/04 职场文书
导游词开场白
2015/01/31 职场文书
中学团支部工作总结
2015/08/13 职场文书
Django 如何实现文件上传下载
2021/04/08 Python