【第四部分 | JavaScript 基础】3：函数、作用域与预解析、对象_办公生活

【第四部分 | JavaScript 基础】3：函数、作用域与预解析、对象

创始人

2024-04-10 22:15:11

| 函数

声明与调用

参数

返回值

arguments（JS特有知识点）

命名函数和匿名函数

| 作用域

全局和局部、JS5没有块级作用域

就近原则：作用域链

| 预解析（重要）

导论：四种语句位置导致的现象

上述现象的原理：JS编译的流程【重点！】

预解析相关面试考核点

| 自定义对象

创建对象

使用对象的属性、方法

【辨析】变量、属性、函数、方法

new 关键字执行的四个步骤

对象的遍历使用for...in...

总结

| 内置对象

官方API

数学对象Math

日期对象Date

数组对象 Array

基本包装类型 & 字符串不可变

字符串对象 String

[案例] 统计出现次数最多的字符

| 函数

声明与调用

参数

JS的形参声明，不需要声明类型！直接写变量名即可

函数形参和实参个数不匹配问题

经过测试，在函数形参中修改数组的元素，相当于修改数组对应地址的元素



Document

返回值

注意一下JS返回值和Java的不同点

不需要在函数声明的语句中写返回类型
只需要写return XXX; 即可
JS中所有函数都有返回值！若不写return，也会有默认的返回值：undefined
return 语句之后的代码不被执行。return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

代码示例

		function getStr(){return 'AAA';}function getUndefined(){}alert(getStr()); //AAAalert(getUndefined()); //undefined

arguments（JS特有知识点）

arguments的作用：存储所有传递过来的实参。
本质是一个对象。有点类似于Java的map
所有的JS函数都内置了这个对象，放心使用！

介绍

示例



Document

命名函数和匿名函数

介绍

命名函数：

匿名函数：

注意事项

对于命名函数，调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面；

对于匿名函数，函数调用的代码必须写到函数体后面
匿名函数声明 var XXX = function(){...}; 此时XXX存储的是一个函数

| 作用域

全局和局部、JS5没有块级作用域

JS的作用域和Java差不多，都是全局是全局作用域，函数内是局部作用域
但是JS有一种特殊情况：在函数内部声明的变量也是全局变量。如下
需要特别注意的是：JS5除了函数外，其它的都不是块级作用域！即：if、for中定义的变量，是全局变量！ JS6后，if、for里的变量才是局部变量。

就近原则：作用域链

说人话就是：有两个同名变量，函数中调用这个名字的变量的时候，到底用哪一个变量？ 就近原则

示例

| 预解析（重要）

导论：四种语句位置导致的现象

JS是一门解释型语言，即：逐行运行，逐行编译。因此，这对于代码顺序的要求有些严格。下面给出一些例子

上述现象的原理：JS编译的流程【重点！】

知识点【重点！】

四种语句位置现象的解释

第二种情况undefined的原因：JS预编译，把变量声明var nume提升到当前作用域最前面，但是赋值操作没有提升，所以相当于没有赋值，输出undefined

第三种情况：命名函数的调用在声明语句的前后都可以生效的原因：JS会把函数声明提升到当前作用域的最前面，然后调用语句都是在预编译之后的函数声明语句后面的位置，因此都可以调用~

第四种情况报错的原理：先声明了一个fun的变量，但是并没有赋值函数体，此时调用了fun()，但是JS认为此时JS是一个变量而不是一个函数，因此输出“这不是一个函数”的报错

预解析相关面试考核点

上面的代码预解析后为：

变量提升：声明提到最前面，但是不赋值；函数提升：函数声明提到最前面，但是不调用

var num;

function fun() {

var num;

console.log(num);

num = 20;

}

num = 10;

fun();

最终输出的是：undefined

var a=b=c=9; 相当于 var a=9 ; b=9 ; c=9; a是局部变量，b和c是全局变量

上面的代码预解析后为：

//函数提升

function f1() {

//变量提升

var a;

a=b=c=9;

console.log(a);

console.log(b);

console.log(c);

}

f1(); //9 9 9

console.log(c);// 9

console.log(b);// 9

console.log(a);// 局部变量，报错

| 自定义对象

创建对象

利用字面量创建对象

{ } 里面采取键值对的形式表示。var只需要在对象外面声明。对象内的属性使用键值对【冒号】链接。对象内的是匿名函数
注意对象名后面和花括号之间是 = 属性名和属性值之间是：属性值后面是，而不是；

利用 new Object 创建对象

Object是固定写法。注意O是大写

利用等号追加赋值，且后面是分号结尾
JS中的对象，可以往里面追加属性

        //new关键字定义对象var obj2 = new Object();obj2.name = 'Klee2';obj2.age = 10;obj2.f2 = function() {alert('Hi~ ');}obj2['name'];obj2.f2();

利用构造函数创建对象（常用）

构造函数不需要写return

        //构造函数定义对象function Person(name , age , sex) {this.name = name;this.age = age;this.sex = sex;this.f3 = function() {alert('name = '+name+';age = '+age+';sex = '+sex);}}obj3 = new Person('Klee3 , 12 , Women');console.log(obj3.name);obj3.f3();

使用对象的属性、方法

第一种方法调用方法一

对象名.属性名;

第二种方法调用属性

对象名['属性名'];

使用对象的函数

注意：匿名函数（方法）的调用，需要在属性名后面加上一个（）哦
定义在对象外的function被称为【函数】，定义在对象内的function被称为【方法】

对象名.函数名（）;

代码示例



Document

【辨析】变量、属性、函数、方法

变量：使用 var 关键字单独声明和赋值。如 var num = 10;

属性：在类中，无需关键字 var 声明，且使用键值对进行赋值。如 var obj = { num : 10; }

函数：单独声明和调用。调用的时候单独使用函数名( )；

方法：在对象里面声明，相当于匿名函数。调用的时候通过对象名.方法名( );

new 关键字执行的四个步骤

对象的遍历使用for...in...

总结

| 内置对象

官方API

授人以鱼不如授人以渔，以后可以来这里查找一些JS的内置对象

MDN: MDN Web Docs

数学对象Math

Math可以直接调用里面的方法。Math不需要构造函数创建对象

基本运算

随机函数

示例代码



Document

日期对象Date

日期对象Date需要通过构造函数创建对象，需要实例化后才能使用

创建日期对象

日期对象格式化

默认格式：很丑，我们需要学会格式化时间。
需要获取日期指定的部分，所以我们要手动的得到这种格式

获取日期总毫秒

Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数
我们经常利用总的毫秒数来计算时间，因为它更精确

上述三个知识点的代码示例



Document

数组对象 Array

判断是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

向数组增删元素