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 判断undefined的实现代码
Nov 26 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
多重?l件?合查?(二)
2006/10/09 PHP
Discuz 模板引擎的封装类代码
2008/07/18 PHP
php发送post请求函数分享
2014/03/06 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
python实现哈希表
2014/02/07 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
征兵宣传标语
2014/06/20 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
人事局接收函
2015/01/31 职场文书
大学生自荐书范文
2015/03/05 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
二审答辩状格式
2015/05/22 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
学校隐患排查制度
2015/08/05 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js