JavaScript入门(一)

JavaScript入门(一)

哔哩哔哩链接：https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0

前言

• JavaScript是由网景公司发明，起初命名为LiveScript，后来由于SUN公司的介入更名为了JavaScript。

• 1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现JScript。

• 于是在市面上存在两个版本的JavaScript，分别是网景公司的JavaScript和微软的JScript。

• 为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript。

ECMAScript：核心部分，定义js的语法规范

DOM：文档对象模型，主要用来管理页面

BOM：浏览器对象模型，前进、后退、页面刷新、地址栏、历史记录、屏幕宽高

JavaScript严格区分大小写

一、js的标准:ECMAScript

ECMAScript是一个标准，而这个标准需要由各个厂商去实现。

• 不同的浏览器厂商对该标准会有不同的实现。其中chrome的v8是最好的，解析最快

• 我们已经知道ECMAScript是JavaScript标准，所以一般情况下这两个词我们认为是一个意思。

• 但是实际上JavaScript的含义却要更大一些。

• 一个完整的JavaScript实现应该由以下三个部分构成：

js的特点

– 解释型语言

– 类似于 C 和 Java 的语法结构

– 动态语言

– 基于原型的面向对象

1.解释型语言

• JavaScript是一门解释型语言，所谓解释型值语言不需要被编译为机器码在执行，而是直接执行。

• 由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。

• 不过解释型语言中使用了JIT技术，使得运行速度得以改善。

2.类似于 C 和 Java 的语法结构

• JavaScript的语法结构与C和Java很像，像for、if、while等语句和Java的基本上是一模一样的。

• 不过JavaScript和与Java的关系也仅仅是看起来像而已

3.动态语言

• JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。

• 不过动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JS可能是运行速度最快的动态语言了。

4.基于原型的面向对象

• JavaScript是一门面向对象的语言。

• Java也是一门面向对象的语言，但是与Java不同，JavaScript是基于原型的面向对象。

二、js基本语法

1.编写位置

• 我们目前学习的JS全都是客户端的JS，也就是说全都是需要在浏览器中运行的，所以我们我们的JS代码全都需要在网页中编写。

• 我们的JS代码需要编写到

• 我们一般将script标签写到head中。（和style标签有点像）

• 属性：

​ – type：默认值text/javascript可以不写，不写也是这个值。

​ – src：当需要引入一个外部的js文件时，使用该属性指向文件的地址。

2.严格区分大小写

• JavaScript是严格区分大小写的，也就是abc和Abc会被解析器认为是两个不同的东西。

3.注释

• 注释中的内容不会被解析器解析执行，但是会在源码中显示，我们一般会使用注释对程序中的内容进行解释。

• JS中的注释和Java的的一致，分为两种

//单行注释

/*
	多行注释
*/

4.标识符

• 所谓标识符，就是指变量、函数、属性的名字，或函数的参数。

• 标识符可以是按照下列格式规则组合起来的一个或多个字符：

​ – 第一个字符必须是一个字母、下划线（ _）或一个美元符号（ $）。

​ – 其他字符可以是字母、下划线、美元符号或数字。

• 按照惯例，ECMAScript 标识符采用驼峰命名法。

• 但是要注意的是JavaScript中的标识符不能是关键字和保留字符。

1.关键字和保留字符

2.其他不建议使用的标识符

5.变量

• 变量的作用是给某一个值或对象标注名称。

• 比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。

• 变量的声明：

​ – 使用var关键字声明一个变量。

​ – var a;

• 变量的赋值：

​ – 使用=为变量赋值。

​ – a=123;

• 声明和赋值同时进行：

​ – var a = 123;

6.变量类型

1.五种基本数据类型

• JS中的变量可能包含两种不同数据类型的值：基本数据类型和引用数据类型。

• JS中一共有5种基本数据类型：String、Number、Boolean、Undefined、Null。

• 基本数据类型的值是无法修改的，是不可变的。

• 基本数据类型的比较是值的比较，也就是只要两个变量的值相等，我们就认为这两个变量相等。

2.引用数据类型(Object)

• 引用类型的值是保存在内存中的对象。

• 当一个变量是一个对象时，实际上变量中保存的并不是对象本身，而是对象的引用。

• 当从一个变量向另一个变量复制引用类型的值时，会将对象的引用复制到变量中，并不是创建一个新的对象。这时，两个变量指向的是同一个对象。因此，改变其中一个变量会影响另一个。

• 上边我们说到JS中除了5种基本数据类型以外其余的全都是对象，也就是引用数据类型。

• 但是虽然全都是对象，但是对象的种类却是非常繁多的。比如我们说过的Array（数组），Function（函数）这些都是不同的类型对象。

• 实际上在JavaScript中还提供了多种不同类型的对象。（详情参考下方三、对象）

7.六种数据类型

• 数据类型决定了一个数据的特征，比如：123和”123”，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。

• 对于不同的数据类型我们在进行操作时会有很大的不同。

• JavaScript中一共有5种基本数据类型：

​ – 字符串型（String）

​ – 数值型（Number）

​ – 布尔型（Boolean）

​ – null型（Null）

​ – undefined型（Undefined）

• 这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

1.String

• String用于表示一个字符序列，即字符串。

• 字符串需要使用 ’或着是“括起来。

转义字符

• 将其他数值转换为字符串有三种方式：toString()、String()、拼串。

2.Number

• Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

• Number表示的数字大小是有限的，范围是：

​ – ± 1.7976931348623157e+308

​ – 如果超过了这个范围，则会返回± Infinity。

• NaN，即非数值（Not a Number）是一个特殊的数值，JS中当对数值进行计算时没有结果返回，则返回NaN。

数值的转换

• 有三个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。

• Number()可以用来转换任意类型的数据，而后两者只能用于转换字符串。

• parseInt()只会将字符串转换为整数，而parseFloat()可以转换为浮点数。

3.Boolean(布尔型)

• 布尔型也被称为逻辑值类型或者真假值类型。

• 布尔型只能够取真（true）和假（false）两种数值。除此以外，其他的值都不被支持。

• 其他的数据类型也可以通过Boolean()函数转换为布尔类型。

• 转换规则：

4.Undefined

• Undefined 类型只有一个值，即特殊的 undefined 。

• 在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。例如：

​ – var message;

​ – message 的值就是 undefined。

• 需要注意的是typeof对没有初始化和没有声明的变量都会返回undefined。

5.Null

• Null 类型是第二个只有一个值的数据类型，这个特殊的值是null 。

• 从语义上看null表示的是一个空的对象。所以使用typeof检查null会返回一个Object。

• undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true

6.Object

8.运算符

• JS中为我们定义了一套对数据进行运算的运算符。这其中包括：算数运算符、位运算符、关系运算符等。

1.算数运算符

• 算数运算符顾名思义就是进行算数操作的运算符。

• JS中为我们提供了多种算数运算符。

• 算数运算符：

自增和自减

• 自增 ++ 自减--

​ – 自增和自减分为前置运算和后置元素。

​ – 所谓的前置元素就是将元素符放到变量的前边，而后置将元素符放到变量的后边。

– 例子：

• 前置自增：++a

• 后置自减：a–

​ – 运算符在前置时，表达式值等于变量原值。

​ – 运算符在后置是，表达式值等于变量变更以后的值

2.逻辑操作符

• 一般情况下使用逻辑运算符会返回一个布尔值。

• 逻辑运算符主要有三个：非、与、或。

• 在进行逻辑操作时如果操作数不是布尔类型则会将其转换布尔类型在进行计算。

• 非使用符号!表示，与使用 &&表示，或使用 || 表示。

非（ ! ）

• 非运算符使用!表示。

• 非运算符可以应用于任意值，无论值是什么类型，这个运算符都会返回一个布尔值。

• 非运算符会对原值取反，比如原值是true使用非运算符会返回false，原值为false使用非运算符会返回true。

与（&&）

• 与运算符使用&& 表示。

• 与运算符可以应用于任何数据类型，且不一定返回布尔值。

• 对于非布尔值运算，会先将非布尔值转换为布尔值。

• 对布尔值做运算时，如果两个值都为true则返回true，否则返回false。

• 非布尔值时：如果两个都为true，则返回第二个值，如果两个值中有false则返回靠前的false的值。

或（||）

• 或运算符使用||表示。

• 或运算符可以应用于任何数据类型，且不一定返回布尔值。

• 对于非布尔值运算，会先将非布尔值转换为布尔值。

• 对布尔值进行运算时，如果两个值都为false则返回false，否则返回true。

• 非布尔值时：如果两个都为false ，则返回第二个值，否则返回靠前true的值。

3.赋值运算符

• 简单的赋值操作符由等于号 （ = ） 表示，其作用就是把右侧的值赋给左侧的变量。

• 如果在等于号左边添加加减乘除等运算符，就可以完成复合赋值操作。

• +=、*=、-=、/=、%=

• 比如：a+=10和a=a+10是一样的。

4.关系运算符

• 小于（<） 、大于（>） 、小于等于（<=）和大于等于（>=）这几个关系运算符用于对两个值进行比较

• 这几个运算符都返回一个布尔值。用来表示两个值之间的关系是否成立。

相等（==）

• JS中使用==来判断两个值是否相等，如果相等则返回true。

• 使用!=来表示两个值是否不相等，如果不等则返回true。

• 注意：null和undefined使用==判断时是相等的。

• 值相等就可以了

全等（===）

• 除了==以外，JS中还提供了===（值和类型都需要相等）。

• =表示全等，他和基本一致，不过在判断两个值时会进行自动的类型转换，而=不会。

• 也就是说**”55”==55会返回true，而”55”===55**会返回false；

• 同样我们还有!===表示不全等，同样比较时不会自动转型。

逗号

• 使用逗号可以在一条语句中执行多次操作。

• 比如：var num1=1, num2=2, num3=3;

• 使用逗号运算符分隔的语句会从左到右顺序依次执行。

5.条件运算符

• 条件运算符也称为三元运算符。通常运算符写为?:

• 这个运算符需要三个操作数，第一个操作数在?之前，第二个操作数在?和:之间，第三个操作数在:之后。

• 例如：x > 0 ? x : -x // 表示求x的绝对值

• 上边的例子，首先会执行x>0，如果返回true则执行冒号左边的代码，并将结果返回，这里就是返回x本身，如果返回false则执行冒号右边的代码，并将结果返回。

9.运算符的优先级

高——》低：

10.语句(js程序的基本单位)

• 前边所说表达式和运算符等内容可以理解成是我们一门语言中的单词，短语。

• 而语句（statement）就是我们这个语言中一句一句完整的话了。

• 语句是一个程序的基本单位，JS的程序就是由一条一条语句构成的，每一条语句使用 ; 结尾。

• JS中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

代码块

• 代码块是在大括号{}中所写的语句，以此将多条语句的集合视为一条语句来使用。

• 例如：

{
    var a = 123;
    a++;
    alert(a);
}

• 我们一般使用代码块将需要一起执行的语句进行分组，需要注意的是，代码块结尾不需要加分号。

11.条件语句

• 条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句。

• 最基本的条件语句：

​ –if...else

​ –switch...case

if…else语句

• if...else语句是一种最基本的控制语句，它让JavaScript可以有条件的执行语句。

• 第一种形式:

if(expression){
    statement;
}

• 第二种形式:

if(expression){
   statement;
}
else{
   statement;
}

• 除了if和else还可以使用else if来创建多个条件分支。

if语句例子

switch…case语句

• switch...case是另一种流程控制语句。

• switch语句更适用于多条分支使用同一条语句的情况。

• 语法：

• 需要注意的是case语句只是标识的程序运行的起点，并不是终点，所以一旦符合case的条件程序会一直运行到结束。所以我们一般会在case中添加break作为语句的结束。

12.循环语句

• 和条件语句一样，循环语句也是基本的控制语句。

• 循环中的语句只要满足一定的条件将会一直执行。

while

• while语句是一个最基本的循环语句。

• while语句也被称为while循环。

• 语法：

while(条件表达式){
  语句...
}

• 和if一样while中的条件表达式将会被转换为布尔类型，只要该值为真，则代码块将会一直重复执行。

• 代码块每执行一次，条件表达式将会重新计算。

do…while

• do…while和while非常类似，只不过它会在循环的尾部而不是顶部检查表达式的值。

• do...while循环会至少执行一次。

• 语法：

do{
	语句...
   }while(条件表达式);

• 相比于while，do…while的使用情况并不是很多。

for

• for语句也是循环控制语句，我们也称它为for循环。

• 大部分循环都会有一个计数器用以控制循环执行的次数，计数器的三个关键操作是初始化、检测和更新。for语句就将这三步操作明确为了语法的一部分。

• 语法：

for(初始化表达式 ; 条件表达式 ; 更新表达式){
   语句...
}

break和continue

• break 和 continue语句用于在循环中精确地控制代码的执行。

• 使用break语句会使程序立刻退出最近的循环，强制执行循环后边的语句。

• break和continue语句只在循环语句和switch语句中使用。

• 使用continue语句会使程序跳过当次循环，继续执行下一次循环，并不会结束整个循环。

• continue只能在循环中使用，不能出现在其他的结构中。

label语句

• 使用 label 语句可以在代码中添加标签，以便将来使用。

• 语法：

– label: statement

• 例子：

start: for (var i=0; i < count; i++) {
	alert(i);
}

• 这个例子中定义的 start 标签可以在将来由 break 或 continue 语句引用。加标签的语句一般都要与 for 语句等循环语句配合使用。

三、对象

1.Object对象

• Object类型，我们也称为一个对象。是JavaScript中的引用数据类型。

• 它是一种复合值，它将很多值聚合到一起，可以通过名字访问这些值。

• 对象也可以看做是属性的无序集合，每个属性都是一个名/值对。

• 对象除了可以创建自有属性，还可以通过从一个名为原型的对象那里继承属性。

• 除了字符串、数字、true、false、null和undefined之外，JS中的值都是对象。

• 目前为止，我们看到的最多的类型就是Object，它也是我们在JS中使用的最多的对象。

• 虽然Object对象中并没有为我们提供太多的功能，但是我们会经常会用途来存储和传输数据。

• 创建Object对象有两种方式：

​ – var obj = new Object();

​ – var obj = {}

• 上边的两种方式都可以返回一个Object对象。

• 但是第一种我们使用了一个new关键字和一个Object()函数。

• 这个函数就是专门用来创建一个Object对象并返回的，像这种函数我们称为构造函数。

创建对象

• 创建对象有两种方式：

– 第一种

var person = new Object();
person.name = "孙悟空";
person.age = 18;

– 第二种

var person = {
    name:"孙悟空",
    age:18
};

对象属性的访问

• 访问属性的两种方式：

– .访问

​ 对象.属性名

– []访问

​ 对象[‘属性名’]

2.栈和堆

• JavaScript在运行时数据是保存到栈内存和堆内存当中的。

• 简单来说栈内存用来保存变量和基本类型。堆内存用来保存对象。

• 我们在声明一个变量时实际上就是在栈内存中创建了一个空间用来保存变量。

• 如果是基本类型则在栈内存中直接保存

• 如果是引用类型则会在堆内存中保存，变量中保存的实际上对象在堆内存中的地址。

3.数组

• 数组也是对象的一种。

• 数组是一种用于表达有顺序关系的值的集合的语言结构。

• 创建数组：

​ – var array = [1,44,33];

• 数组内的各个值被称作元素。每一个元素都可以通过索引（下标）来快速读取。索引是从零开始的整数。

4.函数

• 函数是由一连串的子程序（语句的集合）所组成的，可以被外部程序调用。向函数传递参数之后，函数可以返回一定的值。

• 通常情况下，JavaScript 代码是自上而下执行的，不过函数体内部的代码则不是这样。如果只是对函数进行了声明，其中的代码并不会执行。只有在调用函数时才会执行函数体内部的代码。

• 这里要注意的是JavaScript中的函数也是一个对象。

1.函数的声明(1)

• 首先明确一点函数也是一个对象，所以函数也是在堆内存中保存的。

var sum = function(a,b){
    return a+b
};

• 上边的例子就是创建了一个函数对象，并将函数对象赋值给了sum这个变量。其中()中的内容表示执行函数时需要的参数，{}中的内容表示函数的主体。

2.函数的声明(2)

• 可以通过函数声明语句来定义一个函数。函数声明语句以关键字function开始，其后跟有函数名、参数列表和函数体。其语法如下所示：

function 函数名(参数,参数,参数...){
	函数体
}

• 例如:

function sum(a,b){
	return a+b;
}

– 上边我们定义了一个函数名为sum，两个参数a和b。函数声明时设置的参数称为形参（形式参数），这个函数对两个参数做了加法运算并将结果返回。

3.函数的调用

• 调用函数时，传递给函数的参数称为实参（实际参数）。

• 如果想调用我们上边定义的sum函数，可以这样写：

var result = sum(123,456);

– 这样表示调用sum这个函数，并将123和456作为实参传递给函数，函数中会将两个参数求和并赋值给result。

4.传递参数

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

5.执行环境

• 执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。

• 每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。

• 全局执行环境是最外围的一个执行环境。在 Web 浏览器中，全局执行环境被认为是 window 对象，因此所有全局变量和函数都是作为window 对象的属性和方法创建的。

• 某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁。

• 在内部环境可以读取外部环境的变量，反之则不行。

6.函数内部属性

• 在函数内部，有两个特殊的对象：

– arguments

​ • 该对象实际上是一个数组，用于保存函数的参数。

​ • 同时该对象还有一个属性callee来表示当前函数。

– this

​ • this 引用的是一个对象。对于最外层代码与函数内部的情况，其引用目标是不同的。

​ • 此外，即使在函数内部，根据函数调用方式的不同，引用对象也会有所不同。需要注意的是，this 引用会根据代码的上下文语境自动改变其引用对象。

this 引用的规则

• 在最外层代码中，this 引用的是全局对象(window)。

• 在函数内，this 根据函数调用方式的不同而有所不同：

5.构造函数

• 构造函数是用于生成对象的函数，像之前调用的Object()就是一个构造函数。

• 创建一个构造函数：

function MyClass(x,y) {
	this.x = x;
	this.y = y;
}

调用构造函数

– 构造函数本身和普通的函数声明形式相同。

– 构造函数通过 new关键字来调用，new 关键字会新创建一个对象并返回。

– 通过 new关键字调用的构造函数内的 this 引用引用了（被新生成的）对象。

new关键字

• 使用new关键字执行一个构造函数时：

​ – 首先，会先创建一个空的对象。

​ – 然后，会执行相应的构造函数。构造函数中的this将会引用这个新对象。

​ – 最后，将对象作为执行结果返回。

• 构造函数总是由new关键字调用。

• 构造函数和普通函数的区别就在于调用方式的不同。

• 任何函数都可以通过new来调用，所以函数都可以是构造函数。

• 在开发中，通常会区分用于执行的函数和构造函数。

• 构造函数的首字母要大写。

6.属性的访问

• 在对象中保存的数据或者说是变量，我们称为是一个对象的属性。

• 读取对象的属性有两种方式：

​ – 对象.属性名

​ – 对象['属性名']

• 修改属性值也很简单：

​ – 对象.属性名 = 属性值

• 删除属性

​ – delete 对象.属性名

• constructor

​ – 每个对象中都有一个constructor属性，它引用了当前对象的构造函数。

7.垃圾回收

• 不再使用的对象的内存将会自动回收，这种功能称作垃圾回收。

• 所谓不再使用的对象，指的是没有被任何一个属性（变量）引用的对象。

• 垃圾回收的目的是，使开发者不必为对象的生命周期管理花费太多精力。

8.原型继承

• JS是一门面向对象的语言，而且它还是一个基于原型的面向对象的语言。

• 所谓的原型实际上指的是，在构造函数中存在着一个名为原型的(prototype)对象，这个对象中保存着一些属性，凡是通过该构造函数创建的对象都可以访问存在于原型中的属性。

• 最典型的原型中的属性就是toString()函数，实际上我们的对象中并没有定义这个函数，但是却可以调用，那是因为这个函数存在于Object对应的原型中。

1.设置原型

• 原型就是一个对象，和其他对象没有任何区别，可以通过构造函数来获取原型对象。

​ – 构造函数. prototype

• 和其他对象一样我们可以添加修改删除原型中的属性，也可以修改原型对象的引用。

• 需要注意的是prototype属性只存在于函数对象中，其他对象是没有prototype属性的。

• 每一个对象都有原型，包括原型对象也有原型。特殊的是Object的原型对象没有原型，为null。

2.获取原型对象的方法

• 除了可以通过构造函数获取原型对象以外，还可以通过具体的对象来获取原型对象。

– Object.getPrototypeOf(对象)
 
– 对象.__proto_

– 对象. constructor.prototype

• 需要注意的是，我们可以获取到Object的原型对象，也可以对它的属性进行操作，但是我们不能修改Object原型对象的引用。

3.原型链

• 基于我们上边所说的，每个对象都有原型对象，原型对象也有原型对象。

• 由此，我们的对象，和对象的原型，以及原型的原型，就构成了一个原型链

• 比如这么一个对象：

​ – var mc = new MyClass(123,456);

​ – 这个对象本身，原型MyClass.proprototype原型对象的原型对象是Object，Object对象还有其原型。这组对象就构成了一个原型链。

​ – 这个链的次序是：mc对象、mc对象原型、原型的原型（Object）、Object的原型

• 当从一个对象中获取属性时，会首先从当前对象中查找，如果没有则顺着向上查找原型对象，直到找到Object对象的原型位置，找到则返回，找不到则返回undefined。

9.typeof运算符

• 使用typeof操作符可以用来检查一个变量的数据类型。

• 使用方式：typeof 数据，例如 typeof 123。

• 返回结果：

– typeof 数值 —> number

– typeof 字符串 —> string

– typeof 布尔型 —> boolean

– typeof undefined —> undefined

– typeof null —> object

10.instanceof运算符

• 之前学习基本数据类型时我们学习了typeof用来检查一个变量的类型。

• 但是typeof对于对象来说却不是那么好用，因为任何对象使用typeof都会返回Object。而我们想要获取的是对象的具体类型。

• 这时就需要使用instanceof运算符了，它主要用来检查一个对象的具体类型。

• 语法：

​ – var result = 变量 instanceof 类型

11.Array对象

• Array用于表示一个有序的数组。

• JS的数组中可以保存任意类型的数据。

• 创建一个数组的方式有两种：var arr= new Array(10);

​ var arr= new Array(123,'hello',true);

• 读取数组中的值使用数组[索引]的方式，注意索引是从0开始的。

12.Date对象

• Date类型用来表示一个时间。

• Date采取的是时间戳的形式表示时间，所谓的时间戳指的是从1970年1月1日0时0秒0分开始经过的毫秒数来计算时间。

• 直接使用new Date()就可以创建一个Date对象。

• 创造对象时不传参数默认创建当前时间。可以传递一个毫秒数用来创建具体的时间。

• 也可以传递一个日期的字符串，来创建一个时间。

​ – 格式为：月份/日/年 时:分:秒

​ – 例如：06/13/2004 12:12:12

13.Function对象

• Function类型代表一个函数，每一个函数都是一个Function类型的对象。而且都与其他引用类型一样具有属性和方法。

• 由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

• 函数的声明有两种方式：

​ – function sum(){}

​ –var sum = function(){};

• 由于存在函数声明提升的过程，第一种方式在函数声明之前就可以调用函数，而第二种不行。

函数也可以作为参数

• 函数也是一个对象，所以函数和其他对象一样也可以作为一个参数传递给另外一个函数。

• 但是要注意的是使用函数作为参数时，变量后边千万不要加()，不加()表示将函数本身作为参数，加上以后表示将函数执行的结果作为参数。

14.函数对象的方法

• 每个函数都有两个方法call()和apply()。

• call()和apply()都可以指定一个函数的运行环境对象，换句话说就是设置函数执行时的this值。

• 使用方式：

​ – 函数对象.call(this对象,参数数组)

​ – 函数对象.apply(this对象,参数1,参数2,参数N)

15.闭包(closure)

• 闭包是JS一个非常重要的特性，这意味着当前作用域总是能够访问外部作用域中的变量。因为函数是JS中唯一拥有自身作用域的结构，因此闭包的创建依赖于函数。

• 也可以将闭包的特征理解为，其相关的局部变量在函数调用结束之后将会继续存在。

16.基本包装类型

• 基本数据类型是不能去调用方法的，所以JS中还提供了3个特殊的引用类型：

​ – Boolean

​ – Number

​ – String

• 这三个类型分别包装了Boolean、Number、String并扩展了许多实用的方法。

• 他们的使用方式和普通的对象一样。

• 要注意的是使用typeof检查这些包装类型时返回的都是object。

17.3个特殊的引用类型

1.Boolean

• Boolean 类型是与布尔值对应的引用类型。

• 可以采用这种方式创建：

​ – var booleanObject = new Boolean(true);

• 我们最好永远不要使用Boolean包装类。

2.Number

• Number是数值对应的引用数据类型。创建Number对象只需要在调用构造函数时传递一个数值：

​ – var num = new Numbaer(20);

• 使用数值时我们建议使用基本数值，而不建议使用包装类。

3.String

• String 类型是字符串的对象包装类型，可以像下面这样使用 String 构造函数来创建。

​ – var str = new String("hello world");

• 可以使用length属性来获取字符串的长度。

18.Math对象

• JS 还为保存数学公式和信息提供了一个公共位置，即Math对象。

• 与我们在 JavaScript 直接编写的计算功能相比， Math 对象提供的计算功能执行起来要快得多。 Math 对象中还提供了辅助完成这些计算的属性和方法。

1.Math对象的属性

2.Math的方法

四、DOM(文档对象模型)

• DOM，全称Document Object Model文档对象模型。

• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

• 文档

​ – 文档表示的就是整个的HTML网页文档

• 对象

​ – 对象表示将网页中的每一个部分都转换为了一个对象

• 模型

​ – 使用模型来表示对象之间的关系，这样方便我们获取对象

1.模型

模型就是体现出节点与节点之间的关系

2.节点(Node)

• 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

• 比如：html标签、属性、文本、注释、整个文档等都是一个节点。

• 虽然都是节点，但是实际上他们的具体类型是不同的。

• 比如：标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。

• 节点的类型不同，属性和方法也都不尽相同。

• 节点：Node——构成HTML文档最基本的单元。

• 常用节点分为四类

​ – 文档节点：整个HTML文档

​ – 元素节点：HTML文档中的HTML标签

​ – 属性节点：元素的属性

​ – 文本节点：HTML标签中的文本内容

节点的属性

nodeName、nodeType、nodeValue是每个节点都有的属性

1.文档节点(Document)

• 文档节点document，代表的是整个HTML文档，网页中的所有节点都是它的子节点。

• document对象作为window对象的属性存在的，我们不用获取可以直接使用。

• 通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。

2.元素节点(Element)

• HTML中的各种标签都是元素节点，这也是我们最常用的一个节点。

• 浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document的方法来获取元素节点。

• 比如：

​ – document.getElementById()

​ – 根据id属性值获取一个元素节点对象，获取页面元素

2.1.获取元素节点

• 通过document对象调用

2.2.获取元素节点的子节点

• 通过具体的元素节点调用

2.3.获取父节点和兄弟节点

• 通过具体的节点调用

2.4.元素节点的属性

• 获取，元素对象.属性名

例：

element.value

element.id

element.className

• 设置，元素对象.属性名=新的值

例：

element.value = “hello”

element.id = “id01”

element.className = “newClass”

2.5.其他属性

• nodeValue

– 文本节点可以通过nodeValue属性获取和设置文本节点的内容

• innerHTML

– 元素节点通过该属性获取和设置标签内部的html代码，向页面输出

– InnerHTML可以编写HTML里的代码，而innerTEXT不可以

3.文本节点(Text)

• 文本节点表示的是HTML标签以外的文本内容，任意非HTML的文本都是文本节点。

• 它包括可以字面解释的纯文本内容。

• 文本节点一般是作为元素节点的子节点存在的。

• 获取文本节点时，一般先要获取元素节点。在通过元素节点获取文本节点。

• 例如：

​ – 元素节点.firstChild;

​ – 获取元素节点的第一个子节点，一般为文本节点

4.属性节点(Attr)

• 属性节点表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。

• 可以通过元素节点来获取指定的属性节点。

• 例如：

​ – 元素节点.getAttributeNode("属性名");

• 注意：我们一般不使用属性节点。

3.节点的修改

4.使用CSS选择器进行查询

• querySelector()

• querySelectorAll()

• 这两个方法都是用document对象来调用，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会自动根据选择器字符串去网页中查找元素。

• 不同的地方是querySelector()只会返回找到的第一个元素，而querySelectorAll()会返回所有符合条件的元素。

五.事件

• 指的是用户与浏览器交互的一瞬间。

• 我们通过为指定事件绑定回调函数的形式来处理事件，当指定事件触发以后我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。

• JavaScript 与 HTML 之间的交互是通过事件实现的。

• 对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。

1.事件处理程序

• 我们可以通过两种方式为一个元素绑定事件处理程序：

​ – 通过HTML元素指定事件属性来绑定

​ – 通过DOM对象指定的属性来绑定

• 这两种方式都是我们日常用的比较多的，但是更推荐使用第二种方式。

• 还有一种方式比较特殊我们称为设置事件监听器。使用如下方式：

​ – 元素对象.addEventListener()

2.通过HTML标签的属性设置

• 通过HTML属性来绑定事件处理程序是最简单的方式。

<button οnclick="alert('hello');alert('world')">按钮</button>

• 这种方式当我们点击按钮以后，onclick属性中对应的JS代码将会执行，也就是点击按钮以后，页面中会弹出两个提示框。

• 这种方式我们直接将代码编写到了onclick属性中，可以编写多行js代码，当然也可以事先在外部定义好函数。

• 这种方式的优点在于，设定步骤非常简单，并且能够确保事件处理程序会在载入时被设定。

• 如果在函数的最后return false则会取消元素的默认行为。

3.通过DOM对象的属性绑定

• 但是其实上面的写法虽然简单，但却将JS和HTML的代码编写到了一起，并不推荐使用，我们更推荐如下的写法：

var btn = document.getElementById('btn');
btn.onclick = function(){
	alert("hello");
};

• 这种写法将HTML代码和JS写在不同的位置，维护起来更加容易。

4.设置事件监听器

• 前边两种方式都可以绑定事件处理程序，但是它们都有一个缺点就是都只能绑定一个程序，而不能为一个事件绑定多个程序。

• 这是我们就可以使用addEventListener()来处理，这个方法需要两个参数：一个是事件字符串，一个是响应函数。

btn.addEventListener('click' , function(){alert("hello");});

• 但是要注意的是ie8以下的浏览器是不支持上边的方法的，需要使用attachEvent代替。

• 也可以使用removeEventListener()和detachEvent()移除事件。

5.事件处理中的this

• 在事件处理程序内的this 所引用的对象即是设定了该事件处理程序的元素。

• 也就是事件是给那个对象绑定的this就是哪个对象。

6.事件对象

• 在DOM对象上的某个事件被触发时，会产生一个事件对象Event，这个对象中包含着所有事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

• 例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持 event对象，但支持方式不同。

• DOM标准的浏览器会将一个event对象传入到事件的处理程序当中。无论事件处理程序是什么都会传入一个event对象。

• 可以通过这种方式获取：

btn.onclick = function(event){
	alert(event.type);
};

• Event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。

Event对象的通用属性/方法

7.IE中的事件对象

• 与访问 DOM 中的 event 对象不同，要访问 IE 中的 event 对象有几种不同的方式，取决于指定事件处理程序的方法。

• 在IE中event对象作为window对象的属性存在的，可以使用window.event来获取event对象。

• 在使用attachEvent()的情况下，也会在处理程序中传递一个event对象，也可以按照前边的方式使用。

Event对象的通用属性/方法(IE)

8.事件的触发

• 事件的发生主要是由用户操作引起的。

• 比如mousemove这个事件就是由于用户移动鼠标引起的，在鼠标指针移动的过程中该事件会持续发生。

• 当指定事件被触发时，浏览器就会调用对应的函数去响应事件，一般情况下事件没触发一次，函数就会执行一

次。

• 因此设置鼠标移动的事件可能会影响到鼠标的移动速度所以设置该类事件时一定要谨慎。

9.事件的传播

• 在网页中标签与标签之间是有嵌套关系的，比如这样一个页面：

• 如果这时用户点击了sample按钮，则会以该按钮作为事件目标触发一次点击事件。

• 这时，事件的处理将会分为捕获阶段、目标阶段、事件冒泡这三个阶段。

9.1.事件的传播流程

1.捕获阶段

– 这一阶段会从window对象开始向下一直遍历到目标对象，如果发现有对象绑定了响应事件则做相应的处理。

2.目标阶段

– 这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。

3.事件冒泡阶段

– 这一阶段，事件的传播方式和捕获阶段正好相反，会从事件目标一直向上遍历，直至window对象结束，这时对象上绑定的响应函数也会执行。

9.2.取消事件传播

• 我们可以使用event对象的两个方法完成：

​ – stopPropagation()

​ – stopImmediatePropagation()

• 取消默认行为：

​ – preventDefault()

六、BOM(浏览器对象模型)

• ECMAScript无疑是JavaScript的核心，但是要想在浏览器中使用JavaScript，那么BOM（浏览器对象模型）才是真正的核心。

• BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

• BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。

1.window对象

• window对象是BOM的核心，它表示一个浏览器的实例。

• 在浏览器中我们可以通过window对象来访问操作浏览器，同时window也是作为全局对象存在的。

• 全局作用域：

​ – window对象是浏览器中的全局对象，因此所有在全局作用域中声明的变量、对象、函数都会变成window对象的属性和方法。

2.窗口大小

• 浏览器中提供了四个属性用来确定窗口的大小：

​ – 网页窗口的大小

​ • innerWidth

​ •innerHeight

​ – 浏览器本身的尺寸

​ • outerWidth

​ •outerHeight

3.打开窗口

• 使用window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。

• 这个方法需要四个参数：

​ – 需要加载的url地址

​ – 窗口的目标

​ – 一个特性的字符串

​ – 是否创建新的历史记录

4.超时调用

• 超时调用：

​ – setTimeout()

​ – 超过一定时间以后执行指定函数

​ – 需要连个参数：

​ • 要执行的内容

​ • 超过的时间

• 取消超时调用

​ –clearTimeout()

• 超时调用都是在全局作用域中执行的。

5.间歇调用

• 间歇调用：

​ – setInterval()

​ – 每隔一段时间执行指定代码

​ – 需要两个参数：

​ • 要执行的代码

​ • 间隔的时间

• 取消间隔调用：

​ – clearInterval()

6.系统对话框

• 浏览器通过 alert() 、confirm() 和 prompt()方法可以调用系统对话框向用户显示消息。

• 它们的外观由操作系统及（或）浏览器设置决定，而不是由 CSS 决定。

• 显示系统对话框时会导致程序终止，当关闭对话框程序会恢复执行。

1.alert

• alert()接收一个字符串并显示给用户。调用alert()方法会向用户显示一个包含一个确认按钮的对话框。

2.confirm

• confirm和alert类似，只不过confirm弹出的对话框有一个确认和取消按钮。用户可以通过按钮来确认是否执行操作。

• 例如：

– confirm('你确定吗？');

• 这个函数的执行会返回一个布尔值，如果选择确定则返回true，如果点击取消则返回false。

3.prompt

• prompt会弹出一个带输入框的提示框，并可以将用户输入的内容返回。

• 它需要两个值作为参数：

​ – 显示的提示文字

​ – 文本框中的默认值

• 例子：

– prompt('你的年龄是？','18');

7.location对象

• location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

• href属性

​ – href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。

• assign() 方法

​ – 所用和href一样，使浏览器跳转页面，新地址参数传递到assign ()方法中

• replace()方法

​ – 功能一样，只不过使用replace方法跳转地址不会体现到历史记录中。

• reload() 方法

​ – 用于强制刷新当前页面

8.navigator对象

• navigator 对象包含了浏览器的版本、浏览器所支持的插件、浏览器所使用的语言等各种与浏览器相关的信息。

• 我们有时会使用navigator的userAgent属性来检查用户浏览器的版本。

9.screen对象

• screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。

• 该对象作用不大，我们一般不太使用。

10.history对象

• history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

• go()

​ – 使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。

• back()

​ – 向后跳转

• forward()

​ – 向前跳转

11.document

• document对象也是window的一个属性，这个对象代表的是整个网页的文档对象。

• 我们对网页的大部分操作都需要以document对象作为起点。

12.js中常用事件

onfocus事件：获取焦点事件

onblur：失去焦点

onkeyup：按键抬起事件

源码获取

至此，我们的JavaScript入门(一)就讲解完成了。下篇我们将结合代码进行介绍JavaScript知识点，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字JavaScript入门源码素材进行获取哦。

JavaScript入门(二)：结合代码讲解①

JavaScript入门(三)：结合代码讲解②

JavaScript入门(四)：结合代码讲解③

JavaScript入门(五)：结合代码讲解④

JavaScript入门(六)：结合代码讲解⑤

JavaScript进阶链接：

JavaScript进阶(一)：类、对象、构造函数、原型对象、继承

JavaScript进阶(二)：函数、this、严格模式、高阶函数、闭包、递归

JavaScript进阶(三)：正则表达式、ES6语法、ES6内置对象

JavaScript进阶(四)：ES6特性

JavaScript进阶(五)：ES7、ES8、ES9、ES10、ES11新特性