关卡二： JavaScript函数及对象

前言

在 Java 语言中，我们可以定义自己的类，并根据这些类创建对象来使用，在 Javascript 中，我们也可以定义自己的类，例如定义 User 类、Hashtable 类等等。
目前在 Javascript 中,已经存在一些标准的类,例如 Date、Array、RegExp、String、Math、Number 等等，这为我们编程提供了许多方便。但对于复杂的客户端程序而言，这些还远远不够，所以又有了自定义对象。

一、JavaScript函数及对象

1、函数

1.概念
封装一段可被重复调用执行的代码块，以实现大量代码的重复使用。
2.使用

声明函数

自定义函数方式(命名函数)

// 声明定义方式
function fn() {...}
// 调用
fn();

函数表达式方式(匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

调用函数

函数名();  // 通过调用函数名来执行函数体代码

函数的封装

把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口。

3. 参数

（1）形参

声明函数的时候，函数名括号里面的用来设置接收调用时进行传入的就是形参

不用声明的变量
默认值为 undefined

（2）实参

调用函数的时候，函数名括号里面传入的真实数据就是实参

（3）参数的作用

在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

4.返回值

函数执行完成后可以通过 return 语句将指定数据返回
break、continue、return的用法和区别：

break、continue 主要用于循环语句中
break 立即停止当前语句，并跳出当前代码块，执行 break 代码块后面的代码
continue 的作用是进入下一个循环，所以 continue 只能用于循环的代码块
return 则是用于在函数中返回特定的值
return 语句会终止函数的执行并返回函数的值
break 是结束整个循环体
continue是结束单次循环

5.arguments
当不确定有多少个参数传递的时候，可以用 arguments 来获取；在函数内部使用该对象，用此对象获取函数调用时传的实参。
特点

具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法

2、对象

1.相关概念
（1）什么是对象？
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

（2）为什么需要对象？
保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。而为了能够更好地存储一组数据，对象应运而生：对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。

2.创建对象的三种方式

利用字面量创建对象

// 用字面量创建对象
var obj = {color: '黑色',
weight: '20.0kg',
brand: ' 武极',
model: 'RTX 3050',
watchMovie: function() {console.log('看电影');
},
listenMusic: function() {console.log('听音乐');
},
playGames: function() {console.log('打游戏');
},
knockCode: function() {console.log('敲代码');}
}
for (var k in obj) {console.log(k); // 属性名console.log(obj[k]); // 属性值
}

利用 new Object 创建对象

var obj = new Object();
obj.weight = '2t';
obj.color = '白色';
obj.brand = '五菱宏光';
obj.manned = function() {console.log('核载7人');
}
obj.pullGoods = function() {console.log('拉货');
}
obj.plough = function() {console.log('耕田');
}
for (var k in obj) {console.log(k);console.log(obj[k]);
}

利用构造函数创建对象

// 构造函数 泛指
function Object(width, hight, bgcolor) {this.width = width;this.hight = hight;this.bgcolor = bgcolor;this.onclick = function(click) {console.log(click);};
}
// 对象 特指
var butt = new Object('200px', '400px', 'red');
console.log(butt.width);
console.log(butt['hight']);
console.log(butt.bgcolor);
butt.onclick('点击');

3.遍历对象

// 遍历 for (变量 in 对象) {}
for (var k in butt) {console.log(k); // 属性名console.log(butt[k]); // 属性值
}

二、作用域及预解析

1、作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域；作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
1.全局作用域
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
2.局部作用域（函数作用域）
作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

2、变量的作用域

1.全局变量
在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）
2.局部变量
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
3.全局变量和局部变量的区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存；
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

3、作用域链

只要是代码都一个作用域中，写在函数内部的在局部作用域，未写在任何函数内部即在全局作用域中；如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。
注意：采取就近原则的方式来查找变量最终的值

4、预解析

1.相关概念
        预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义；预解析会把变量和函数的声明在代码执行之前执行完成。
        代码执行：从上到下执行JS语句。
2.变量预解析
        预解析也叫做变量、函数提升；变量提升（变量预解析）：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升；变量提升只提升声明，不提升赋值。
3.函数预解析
        函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数
        函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用
4.函数表达式声明函数问题
        函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用。

三、内置对象

1、内置对象

JavaScript 中的对象分为 3 种：自定义对象、内置对象、浏览器对象
MDN文档地址：https://developer.mozilla.org/zh-CN/

2、Math对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法.

Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入版就近取整注意 -3.5 结果是 -3
Math.abs() 绝对值
Math.max()/Math.min() 求最大和最小值
Math.random() 获取范围在[0,1)内的随机值

获取指定范围内的随机整数：

function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;
}

3、日期对象

Date 对象和 Math 对象不一样，Date 是一个构造函数，所以使用时需要实例化后才能使用其中具体方法和属性。

4、数组对象

1.创建数组的两种方式

字面量方式
new Array()

2.检测是否为数组

instanceof 运算符可以判断一个对象是否是某个构造函数的实例
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

3.添加删除数组元素的方法

push、unshift 为增加一个或多个元素方法
pop、shift 为删除元素的方法

4.数组排序

reverse（）
sort（）

sort方法需要传入参数来设置升序、降序排序：

升序：function(a,b){ return a-b;}
降序：function(a,b){ return b-a;}
5.数组索引方法

arr.indexOf() // 从前面开始找
arr.lastIndexOf() // 从后面开始找

6.数组转换为字符串

toString()
join()

join方法如果不传入参数，则按照 “ , ”拼接元素。

7.字符串转数组

split('分隔符')

8.其他方法

concat() var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

arr.slice([begin[, end]])

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）,原始数组不会被改变。

splice() array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容；此方法会改变原数组。

5、字符串对象

1.基本包装类型
把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法。
2.字符串的不可变性
当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变性。
3.根据字符返回位置

indexOf()
lastIndexOf()

4.根据位置返回字符

charAt(index)
charCodeAt(index)

charCodeAt方法返回的是指定位置上字符对应的ASCII码

str[index]

5.字符串操作方法

contact(str1,str2,str3...)
substr(start,length)
slice(start,end)
substring(start,end)

6.replace()方法
用于在字符串中用一些字符替换另一些字符

字符串.replace(被替换的字符串， 要替换为的字符串)；

7.split()方法
用于切分字符串，它可以将字符串切分为数组；在切分完毕之后，返回的是一个新数组

字符串.split("分割字符")