jQuery 剧场版你必须知道的javascript

2024-12-01 12:12:23

一.摘要

本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节. 适合希望巩固javascript理论知识和基础知识的开发人员阅读.

二.前言

最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟. 其实我们容易忽视的javascript的细节还有更多, 本文仅是冰山一角. 希望大家都能通过本文有所斩获.

三.Javascript面向对象

Javascript是一门面向对象的语言, 虽然很多书上都有讲解,但还是有很多初级开发者不了解.

创建对象

ps: 以前写过一篇详细的创建对象的文章(原型方法, 工厂方法等)但是找不到了, 回头如果还能找到我再添加进来.下面仅仅简单介绍.

在C#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字:

var objectA = new Object();

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

但是实际上"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>

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#中无法在方法中再次声明方法. 而在一个方法中调用另一个方法通常使用参数传递数据.

本文不再详细讲解闭包, 深入学习请参考下面的文章

八.总结

jQuery 剧场版你必须知道的javascript

一.摘要本文是jQuery系列教程的剧场版, 即和jQuery这条主线无关, 主要介绍大家平时会忽略的一些javascript细节. 适合希望巩固javascript理论知识和基础知识的开发人员阅读. 二.前言最近面试过一些人, 发现即使经验丰富的开发人员, 对于一些基础的理论和细节也常常会模糊. 写本文是因为就我自己而言第一次学习下面的内容时发现自己确实有所收获和感悟. 其实我们容易忽视的javascript的细节还有更多, 本文仅是冰山一角. 希望大家都能通过本文有所斩获. 三.Ja
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍

代码示例: 复制代码代码如下: var date1 = new Date(2013,1,1); var date2 = new Date(2013,1,1); date1 == date2; //执行结果为false date1 === date2; //执行结果为false var num1 = new Number(10); var num2 = new Number(10); num1 == num2; //执行结果为false num1 === num2; //执行结果为fal
你必须知道的Javascript知识点之"单线程事件驱动"的使用

复制代码代码如下: var intervalBody = function(){ console.log('interval'); } var startInterval = function(){ setInterval(intervalBody,1000); } var timeoutBody = function(){ console.log('timeout'); } var startTimeout = function(){ setTimeout(t
你必须知道的JavaScript 中字符串连接的性能的一些问题

而JavaScript的核心是ECMAScript .与其他语言类似,ECMAScript 的字符串是不可变的,即它们的值不能改变. 请考虑下面的代码: 复制代码代码如下: var str = "hello ";str += "world";实际上,这段代码在幕后执行的步骤如下: 1.创建存储 "hello " 的字符串.2.创建存储 "world" 的字符串.3.创建存储连接结果的字符串.4.把 str 的当前内容复制到结
你必须知道的Javascript知识点之"深入理解作用域链"的介绍

示例代码: 复制代码代码如下: var xxxVar1 = 1; var outer = function(){ var xxxVar2 = 2; var results = []; for(var i = 0; i< 3; i++) { var inner = function(){ var xxxVar3 = 3; return xxxVar3 + xxxVar2 +xxxVar1 + i; } resu
你必须知道的Javascript知识点之"this指针"的应用

很多人都知道this指针,这篇文章的主要目的是为了培训我们公司的新人.默认的this指针指向规则1this指针默认指向方法调用时为其指定的对象,如:obj.fun(),fun方法体中的this指针指向obj. 复制代码代码如下: var user = { name: '段光伟' };user.getName = function(){ return this.name; };user.getName(); //返回'段光伟' 复制代码代码如下: var user = { name: '段光
你必须知道的JavaScript 变量命名规则详解

变量命名还应遵守以下某条著名的命名规则: 著名的变量命名规则Camel 标记法首字母是小写的,接下来的字母都以大写字符开头.例如: 复制代码代码如下: var testValue = 0, secondValue = "hi";Pascal 标记法首字母是大写的,接下来的字母都以大写字符开头.例如: 复制代码代码如下: var TestValue = 0, SecondValue = "hi";匈牙利类型标记法在以 Pascal 标记法命名的变量前附加一个小
前端开发必须知道的JS之闭包及应用

在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教.一. 闭包的理论首先必须了解以下几个概念: 执行环境每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行环境中执行,如读写局部变量.函数参数.运行内部逻辑.创建执行环境的过程包含了创建函数的作用域,函数也是在
必须知道的C语言八大排序算法(收藏)

概述排序有内部排序和外部排序,内部排序是数据记录在内存中进行排序,而外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存. 我们这里说说八大排序就是内部排序. 当n较大,则应采用时间复杂度为O(nlog2n)的排序方法:快速排序.堆排序或归并排序序. 快速排序:是目前基于比较的内部排序中被认为是最好的方法,当待排序的关键字是随机分布时,快速排序的平均时间最短: 1.插入排序-直接插入排序(Straight Insertion Sort) 基本思想: 将一个记录插入到
Android开发新手必须知道的10大严重错误

本文总结了Android开发新手必须知道的10大严重错误.分享给大家供大家参考,具体如下: 作为过去10年广泛涉猎各热门平台的经验丰富手机应用开发商,我们觉得Android平台对新手开发者来说是最通俗易懂的平台.平价的工具.友好的开发社区.及众所周知的编程语言(Java),可以说开发Android应用不是难事.但尽管如此,我们依然发现有些错误反复出现在刚涉足Android平台的新手开发者身上,下面是他们常犯的10大严重错误.希望新手朋友们能够借鉴,避免误区. 1. 未阅读Android文件 An