JavaScript

最新推荐文章于 2025-05-01 08:38:22 发布

lovekun_03

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量424

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/lovekun_03/article/details/62237035

版权

JavaScript简介

JavaScirpt诞生于1995年。当时，它的主要目的是处理以前由服务器端语言（如 Perl）负责的一
些输入验证操作。在 JavaScript 问世之前，必须把表单数据发送到服务器端才能确定用户是否
没有填写某个必填域，是否输入了无效的值。 Netscape Navigator 希望通过 JavaScript 来解决这个问题。
在人们普遍使用电话拔号上网的年代，能够在客户端完成一些基本的验证任务绝对是令人兴奋的。毕竟，
拨号上网的速度之慢，导致了与服务器的每一次数据交换事实上都成了对人们耐心的一次考验。

基本语法

类型、值和变量

JavaScript的数据类型分为原始类型(primitive type)和对象类型(object type).
其中原始类型包括：数字、字符串和布尔值，另外还包含两个特殊的原始值: null和undefined.
除了这些原始类型的值，其他就是对象了。对象是属性的集合，每个属性都是键值对。其中，有一个特殊的对象:全局对象。
普通的JavaScript对象是键值对的无序集合，JavaScript也定义了一种特殊对象，即数组。表示带有编号的值的有序集合。JavaScript为数组定义了专用的语法，使数组拥有一些和普通对象不同的特有的行为特性。
JavaScript还定义了另一种特殊对象，即函数。和数组一样，JavaScript也为函数对象定义了专用的语法。
除了数组和函数，JavaScript定义了其他三种有用的类: 日期类(Date), 正则类(RegExp), 错误类(Error).
1. 数字
JavaScript不区分整数和浮点数。JavaScript中所有的数值都用浮点数值表示。

面向对象程序设计

数据类型

JavaScript有5中基本数据类型：Undefined、Null、Boolean、Number和String。
另外还有一种复杂数据类型—-Object，Object本质上是一组无序的键值对。
JavaScript不支持自定义类型的机制，所有值都是上述6中数据类型之一。

可以使用typeof 对数据类型进行检测

var message = "hello world";
alert(typeof message);
alert(typeof 95);

Undefined类型

Undefined类型只有一个值，即”undefined”。
使用var声明变量但未对其加以初始化时，这个变量的值就是undefined

var message;
alert(typeof message);

null类型

Null类型也是只有一个值的数据类型，值为null。

var message = null;
alert(typeof message);

Boolean类型

Boolean只有两个字面值：true和false

Number类型

Number类型使用IEEE754格式来表示整数和浮点数值。
除了表示十进制外，八进制的字面值第一位必须是0，十六进制的字面值前两位必须是0x。

var a = 55;
var b = 070;
var c = 0x1A;

由于内存的限制，JavaScript并不能表示所有的数值。它能表示的最小数值保存在Number.MIN_VALUE中，在大多数浏览器中，这个值是5e-324。能表示的最大数值保存在Number.MAX_VALUE中，在大多数浏览器中，这个值是1.7976931348623157e+308。
如果计算超出了数值范围，那么结果被自动转换成特殊的Infinity或-Infinity。

NaN即非数值(Not a Number),是一个特殊的数值，用于表示本来要返回数值的操作数未返回数值的情况。
例如在其他语言中，任何数值除以0都会报错，但在JavaScript中，除以0回返回NaN.
有三个函数可以把非数值转换为数值：
Number(), parseInt(), parseFloat().
第一个函数Number()可以用于任何数据类型，另外两个专门用于把字符串转换成数值。

String类型

String类型用于表示由零活多个16位Unicode字符组成的字符序列，即字符串。
字符串可以由双引号或单引号表示。
JavaScript中的字符串是不可变的，要改变某个变量存储的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。
将一个值转换为字符串有两种方式，第一种是使用toString()方法。
但是Null和Undefined类型的值没有这个方法，可以使用String()的方法。

Object类型

JavaScript中的对象是一组数据和功能的集合。
对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。

函数

JavaScript的函数使用function关键字来声明，后面跟一组参数以及函数体。

function functionname(arg0, arg1,...argN){
    statements
}

Javascript函数的参数与其他语言不同，它并不介意传递进来多少参数，也不在乎传进来的参数是什么类型。也就是说，即使定义了只有两个参数的函数，在调用这个函数时也未必一定只能传递两个参数，可以传一个，三个甚至不传参数。
之所以可以这样是因为JavaScript中的参数在内部是用一个数组来表示的。在函数体内可以通过对象arguments来访问这个参数数组，从而获得传递给函数的每一个参数。
在Java中可以为一个函数编写两个定义，只要这两个定义的签名(接收的参数的类型和数量)不同即可，即重载的方式。而JavaScript的这种传参特性，使得JavaScript不支持重载。

变量、作用域和内存问题

基本类型和引用类型的值

ECMAScript变量包含两种不同数据类型的值:基本类型值和引用类型值。
基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。
五种基本数据类型：Undefined、Null、Boolean、Number和String。
这五种基本数据类型是按值访问的，因此可以操作保存在变量中的实际值。
引用类型的值是保存在内存中的对象。JavaScript不允许直接访问内存中的位置，也就是不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。因此，引用类型的值是按引用访问的。
对于引用类型的值，可以为其添加属性和方法，可以改变和删除其属性和方法。

很多语言中，字符串以对象的形式表示，因此被认为是引用类型的。ECMAScript放弃了这一传统。

变量的复制

基本类型：深复制
引用类型：浅复制
如果从一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值，然后把该值赋值为新变量分配的位置上。
下图形象展示了复制基本类型值的过程

基本类型值的复制

当一个变量向另一个变量赋值引用类型的值时，同样也将存储在变量对象中的值复制一份放到新变量分配的空间中。不同的是，这个值的副本实际上是一个指针，而这个指针指向存储在堆中的一个变量，复制操作结束后，两个变量实际上将引用同一个对象。

引用类型值的复制

传递参数

ECMAScript中所有函数的参数都是按值传递的。也就是说把函数外部的值复制给函数内部的参数，就和把值从一个变量复制到另一个变量一样。

执行环境系和作用域

执行环境是JavaScript中最重要的一个概念，它定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。
全局环境是最外围的一个执行环境。在web中，全局环境是window对象。因此所有全局变量和函数都是作为window对象的属性和方法创建的。
每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。
当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码坐在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象在最开始时只包含一个变量，即arguments对象(这个对象在全局环境中时不存在的)。作用域链中的下一个变量来自下一个外部环境，而再下一个变量对象则来自下一个外部环境。这样一直延续到全局执行环境。全局执行环境始终都是作用域链中的最后一个对象。

没有块级作用域

在其他类C的语言中，由花括号封闭的代码都有自己的作用域。但是在JavaScript中是没有块级作用域的。

for(var i=0; i < 10; i++){
    dosomething();
}
alert(i);

因为没有块级作用域，alert是可以访问到for循环里的i变量。

函数表达式

函数定义

函数的定义大概可以分为三种：

function double(x){
  return 2*x;
}

这是第一种方式，也是最常规的方式。

var double = new Function('x', 'return 2*x;');

这是第二种方式，使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。

var double = function(x){
  return 2*x;
}

“=”号右边是一个匿名函数，创造完毕函数后，又将该函数赋值给了变量double。

匿名函数的创建
第一种方式也就是上面的第三种方法，也是最常见的方法之一。
第二种方式：

  (function(x, y){
    alert(x+y); 
  }(2, 3));

这里创建了一个匿名函数，并在后面直接调用该函数并传入参数。

闭包

闭包是指有权访问另一个函数作用域中的变量的函数。
创建闭包的常见方式，就是在一个函数内部创建另一个函数(这点类似于Java中的内部类)。

模仿块级作用域

用作块级作用域(通常成为私有作用域)的匿名函数的语法如下所示：

(function(){
    alert(x+y);
})(2,3);

以上代码定义并立即调用了一个匿名函数。
无论在什么地方，只要临时需要一些变量，就可以使用私有作用域，例如：

function outputNumbers(count){
    (function(){
        for(var i=0; i < count; i++){
            alert(i);
        }
    });

    alert(i);      //报错
}

JavaScript面向对象程序设计

BOM

BOM(浏览器对象模型)的核心对象是window，它表示浏览器的一个实例。
在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是JavaScript规定的Global对象。
由于window扮演着JavaScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都是window对象的属性和方法。

location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
location对象既是window对象的属性，也是document对象的属性，即window.location和document.location引用的是同一个对象。

属性名	例子	说明
hash	“#contents”	返回URL中hash(#号后面跟零或多个字符),如果URL中不包含散列，则返回空字符串
host	“wwww.wrox.com:80”	返回服务器名称和端口号
hostname	“www.wrox.com”	返回不带端口号的服务器名称
href	“http://www.wrox.com”	返回当前页面的完整URL
pathname	“/WileyCDA/”	返回URL中的目录和文件名

事件

JavaScript与HTML之间的交互式通过事件实现的。
就是文档或浏览器窗口中发生的一些特定的交互瞬间，可以使用监听器来预订事件，以便事件发生时执行响应的代码。(观察者模式)
客户端的JavaScript采用异步事件驱动编程模型。

注册事件处理程序

注册事件处理程序大概可以包括4种方法,这些方法适用于不同的浏览器版本,因此需要甄别使用:

设置JavaScript对象属性为事件处理程序

window.onload = function(){
    var elt = document.getElementById("form");
    elt.onsubmit = function(){
        alert("");
    }
}

这段示例代码设置window对象的onload属性为一个函数，用以处理文档加载完的事件。并在函数中根据id查找一个form表单，赋值给elt对象，设置elt对象的onsubmit属性为一个事件处理的函数。

设置html标签属性为事件处理程序

<button onclick="alert("hello world");">点击这里</button>

addEventListener()

在IE8以后的浏览器中，任何能成为事件目标的对象(这些对象包括window, document以及所有文档元素),都定义了addEventListener()方法。因此使用addEventListener()和removeEventListener()方法可以为元素或对象注册一个事件或注销一个事件。