`
羽风之扬
  • 浏览: 86484 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论
阅读更多
从零开始学习jQuery(剧场版) 你必须知道的javascript
一.摘要
本文是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();

结果:







结果证明在顶层调用函数和使用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:



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

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

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

本文不再详细讲解闭包, 深入学习请参考下面的文章: http://www.felixwoo.com/archives/247


分享到:
评论

相关推荐

    jQuery1.x和2.x版本js大全官方版.rar

    jQuery自发布以来,从1.0版本一直到现在2.x大约有十几个版本,尽管官方发布了2.x,但是由于2.x不再兼容IE6、7、8,因此使用jQuery1.x版本的开发者还是比较多,由于版本较多,您可能无法获取最全的jQuery框架,最火...

    jQuery 1_2 API 参考文档中文版.mht

    jQuery 1_2 API 参考文档中文版.mht

    jquery1 9中文API 包括min js与升级说明

    JQuery 1 9 1 中文手册 chm API JQUERY最新1 8 CHM jquery api 1 9 英文 chm jQuery1 9升级指南和相关注意事项 pdf jquery 1 9 1 min js 绝对值得拥有

    jQuery1·3API参考文档中文版.CHM

    jQuery1·3API参考文档中文版.CHM

    jQuery1-2-3中文参考手册

    jQuery1-2-3中文参考手册

    jQuery1.12.4+jQuery中文手册.rar

    `jQuery1.11.0_20140330.chm`可能是早期版本的jQuery API参考,而`jQueryAPI_CHM.CHM`则是针对jQuery 1.x系列的API手册,可能包含了1.12.4版本的相关信息。 在这些API文档中,你可以找到jQuery的函数、方法、选择器...

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jQuery 1_3 API 参考文档中文版.mht

    jQuery 1_3 API 参考文档中文版.mht

    jquery-1.9.1.js

    因为旧版 IE 浏览器在整个互联网中还有很大部分市场,所以他们非常期望大部分网站能继续使用 jQuery 1.x 一段时间。jQuery 团队也将同时支持 jQuery 1.x 和 2.x 。1.9 和 2.0 版的 API 是相同的,所以不必因为你们...

    jQuery-1.9.1(英文版)帮助文档

    jQuery 1 9 1英文版帮助文档 包括3个部分内容:学习中心(Learning Center) JQuery API JQuery UI API 其中学习中心有JS入门基础 JQuery的相关核心概念 J插件常识和性能方面建议 JQuery Mobile 移动开发)等 内容比...

    jquery form插件的各个版本

    例如,早期版本可能适用于jQuery 1.x,而较新版本可能兼容到jQuery 3.x甚至4.x。 - 某些版本可能增加了新特性,比如支持更多的选项或API,以满足不断发展的Web开发需求。 - 新版本通常会修复安全漏洞,因此对于...

    jquery jqGrid 4 7 1 zip下载 css js plugins src

    | jquery 1 9 0 min js plugins | grid addons js | grid postext js | grid setcolumns js | jquery contextmenu js | jquery searchFilter js | jquery tablednd js | searchFilter css | ui multiselect css | ui...

    jquery未压缩源码下载

    1. **jQuery核心概念** - **选择器(Selectors)**: jQuery模仿CSS选择器,使得通过JavaScript选取DOM元素变得简单,如`$("#myID")`选取ID为`myID`的元素。 - **链式调用(Chaining)**: jQuery对象可以连续调用...

    jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq

    "jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定,"sangat1"可能是项目名或者是个人开发者的名字,而"jquery3.4.1"是jQuery库的另一种写法,它们都指向同一种资源——jQuery 3.4.1。...

    jQuery1.x_VSDoc智能提示

    jquery-1.3.2-vsdoc.js jquery-1.4.2-vsdoc.js jquery-1.4.4-vsdoc.js jquery-1.6.2-vsdoc.js jquery-1.7-vsdoc.js jquery-1.8-vsdoc.js jquery-1.9.1-vsdoc.js 使用方法: test.js /// &lt;reference path="../Tips/...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jQuery基础.pptx

    1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级,“写的少,做的...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    锋利的jQuery pdf + 示例代码

    第1章 认识jQuery 1 1.1 JavaScript和JavaScript库 1 1.1.1 JavaScript简介 1 1.1.2 JavaScript库作用及对比 1 1.2 加入jQuery 3 1.2.1 jQuery简介 3 1.2.2 jQuery的优势 4 1.3 jQuery代码的编写 5 1.3.1 ...

    jQuery 2.1.1 官方正式版

    如 果你想要同时兼容新旧版浏览器,你可以使用条件注释,让2.0在新浏览器上使用,而旧版本使用1.9,但是更简单的方法则是沿用 jQuery1.x版本。至少目前2.0的主要用例,对IE的支持是不再考虑范围内了,而是Chrome或者...

Global site tag (gtag.js) - Google Analytics