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获取scrollHeight问题想到的标准问题
May 27 Javascript
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
js读取配置文件自写
Feb 11 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
jQuery实现的placeholder效果完整实例
Aug 02 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
浅谈Javascript事件模拟
2012/06/27 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python 默认参数相关知识详解
2019/09/18 Python
深入浅析python的第三方库pandas
2020/02/13 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
大学生自我鉴定
2013/12/08 职场文书
给女朋友的道歉信
2014/01/10 职场文书
超市重阳节活动方案
2014/02/10 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
公司委托书范本
2014/04/04 职场文书
会计学毕业生求职信
2014/06/25 职场文书
月度优秀员工获奖感言
2014/08/16 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
小学运动会报道稿
2015/07/22 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers