1.函数预解析
含义
-
预解析 其实就是聊聊
js
代码的编译和执行 -
js
是一个解释型语言,就是在代码执行之前,先对代码进行通读和解释,然后在执行代码 -
也就是说,我们的
js
代码在运行的时候,会经历两个环节 解释代码 和 执行代码
过程
-
var 声明的变量名; 仅仅是对var 声明的变量提前声明 暂时不赋值
-
声明式的函数 对函数名字提前声明 并且直接给这个函数名赋值了 一个函数 赋值式的函数按照 var 变量的规则进行 解释
注意点
-
打开浏览器 只会解析全局代码
-
不对函数内的代码进行预解析
-
函数内的代码 仅仅会在函数调用的时候才会 预解析
例子
1 . console.log(num); 2. var num = 100; 3. console.log(num); 预解析 1 .不需要 2. 需要预解析 // 告诉浏览器 定义了一个叫做num的变量 但是不赋值 3. 不需要 代码执行 1. console.log(num); // 因为预解析的时候仅仅是 声明 但是没有赋值 // 所以结果是undefined 2. num = 100 3 打印num 的值输出到控制台 等价于下面代码 var num; console.log(num); num = 100; console.log(num);
2.作用域
含义
-
什么是作用域,就是一个变量可以生效的范围
-
变量不是在所有地方都可以使用的,而这个变量的使用范围就是作用域
全局作用域
-
全局作用域是最大的作用域
-
在全局作用域中定义的变量可以在任何地方使用
-
页面打开的时候,浏览器会自动给我们生成一个全局作用域
window
-
这个作用域会一直存在,直到页面关闭就销毁了
// 下面两个变量都是存在在全局作用域下面的,都是可以在任意地方使用的 var num = 100 var num2 = 200
局部作用域
-
局部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域
-
在局部作用域中定义的变量只能在这个局部作用域内部使用
-
在 JS 中只有函数能生成一个局部作用域,别的都不行
-
每一个函数,都是一个局部作用域
// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用 var num = 100 function fn() { // 下面这个变量就是一个 fn 局部作用域内部的变量 // 只能在 fn 函数内部使用 var num2 = 200 } fn()
3.变量使用规则
-
定义在哪个作用域下 这个变量就是哪个作用域的私有变量
-
只能在这个作用域下或者这个作用域的子级作用域内使用
-
不能在父级作用域使用
-
有了作用域以后,变量就有了使用范围,也就有了使用规则
-
变量使用规则分为两种,访问规则 和 赋值规则
访问规则
-
当我想获取一个变量的值的时候,我们管这个行为叫做 访问
-
获取变量的规则:
-
首先,在自己的作用域内部查找,如果有,就直接拿来使用
-
如果没有,就去上一级作用域查找,如果有,就拿来使用
-
如果没有,就继续去上一级作用域查找,依次类推
-
如果一直到全局作用域都没有这个变量,那么就会直接报错(该变量 is not defined)
var num = 100 function fn() { var num2 = 200 function fun() { var num3 = 300 console.log(num3) // 自己作用域内有,拿过来用 console.log(num2) // 自己作用域内没有,就去上一级,就是 fn 的作用域里面找,发现有,拿过来用 console.log(num) // 自己这没有,去上一级 fn 那里也没有,再上一级到全局作用域,发现有,直接用 console.log(a) // 自己没有,一级一级找上去到全局都没有,就会报错 } fun() } fn()
-
-
变量的访问规则 也叫做 作用域的查找机制
-
作用域的查找机制只能是向上找,不能向下找
function fn() { var num = 100 } fn() console.log(num) // 发现自己作用域没有,自己就是全局作用域,没有再上一级了,直接报错
赋值规则
-
当你想给一个变量赋值的时候,那么就先要找到这个变量,在给他赋值
-
变量赋值规则:
-
先在自己作用域内部查找,有就直接赋值
-
没有就去上一级作用域内部查找,有就直接赋值
-
还没有再去上一级作用域查找,有就直接赋值
-
如果一直找到全局作用域都没有,那么就把这个变量定义为全局变量,再给他赋值
function fn() { num = 100 } fn() // fn 调用以后,要给 num 赋值 // 查看自己的作用域内部没有 num 变量 // 就会向上一级查找 // 上一级就是全局作用域,发现依旧没有 // 那么就会把 num 定义为全局的变量,并为其赋值 // 所以 fn() 以后,全局就有了一个变量叫做 num 并且值是 100 console.log(num) // 100
-
4.递归函数
-
什么是递归函数
-
在编程世界里面,递归就是一个自己调用自己的手段
-
递归函数: 一个函数内部,调用了自己,循环往复
// 下面这个代码就是一个最简单的递归函数 // 在函数内部调用了自己,函数一执行,就调用自己一次,在调用再执行,循环往复,没有止尽 function fn() { fn() } fn()
-
其实递归函数和循环很类似
-
需要有初始化,自增,执行代码,条件判断的,不然就是一个没有尽头的递归函数,我们叫做 死递归
简单实现一个递归 (例子)
-
我们先在用递归函数简单实现一个效果
-
需求: 求 1 至 5 的和
-
先算 1 + 2 得 3
-
再算 3 + 3 得 6
-
再算 6 + 4 得 10
-
再算 10 + 5 得 15
-
结束
-
-
开始书写,写递归函数先要写结束条件(为了避免出现 “死递归”)
function add(n) { // 传递进来的是 1 // 当 n === 5 的时候要结束 if (n === 5) { return 5 } } add(1)
-
再写不满足条件的时候我们的递归处理
function add(n) { // 传递进来的是 1 // 当 n === 5 的时候要结束 if (n === 5) { return 5 } else { // 不满足条件的时候,就是当前数字 + 比自己大 1 的数字 return n + add(n + 1) } } add(1)
5.对象
-
对象是一个复杂数据类型
-
其实说是复杂,但是没有很复杂,只不过是存储了一些基本数据类型的一个集合
var obj = { num: 100, str: 'hello world', boo: true }
-
这里的
{}
和函数中的{}
不一样 -
函数里面的是写代码的,而对象里面是写一些数据的
-
对象就是一个键值对的集合 键和值之间: 键值对之间逗号隔开
-
无序的数值集合 可以是任意类型
-
{}
里面的每一个键都是一个成员 -
也就是说,我们可以把一些数据放在一个对象里面,那么他们就互不干扰了
-
其实就是我们准备一个房子,把我们想要的数据放进去,然后把房子的地址给到变量名,当我们需要某一个数据的时候,就可以根据变量名里面存储的地址找到对应的房子,然后去房子里面找到对应的数据
例子
// 创建对象 // 两种方式 // 第一种 var wangzhen = { 'username': 'wangzhen', 'age': 18, goodman: true, singing: function () { console.log('窗外的麻雀在电线杆上撒粮'); }, love: function () { console.log('过了这个村我在下个村等你') } } // 第二种 // alert(typeof wangzhen) // object alert(wangzhen.username) // 查看静态属性不用加() wangzhen.love() // 调用动态方法 需要加() // 使用内置的工具来创建对象 var yinghao = new Object(); yinghao.name = 'ahao'; yinghao.age = 1; yinghao.eating = function () { console.log('正在吃') } //建议使用第一种来创建对象 // 键的名字按照变量的命名规则 规范 // 不要有重复 后边 会覆盖前面 // 可以使用纯数字 作为键名 自动把数字排到最前面 // 也可以使用特殊符号作为键名 // 键的 可加单引号 可不加单引号 但是如果用特殊符号作为键名 必须加单引号 // 建议使用字符串作为键名
对对象的操作(增删改查)
var jianzeng = { name:'jiangjiang', age:18, ball:function(){ return '啦啦啦啦' } } // 增 // 增加一个并不存在的属性 // jianzeng.height = '181cm'; // alert(jianzeng.height) // 删 delete // alert(jianzeng.age); // delete jianzeng.age; // alert(jianzeng.age); // 改 // 重新赋值就是改的过程 // alert(jianzeng.name); // jianzeng,name = 'xiaojiang'; // alert(jianzeng.name); // 查 // alert(jianzeng.age) // 查看静态属性 // alert(jianzeng.ball()) // 调用动态方法 // 另一种写法 // 增 对象名['键名'] = 值 // 删 delete 对象名['键名'] = 值 // 改 对象名['键名'] = 值 // 查 对象名['键名'] var pengpeng = { name:'rock', age:18, 1:666, 2:888, 'aaa^bbb':999, 'ccc-ddd':777 } // alert(pengpeng.1);报错 // alert(pengpeng['1']) // alert(pengpeng.aaa^bbb) // alert(pengpeng['aaa^bbb']) // 当对象的键名字中有 纯数字 特殊符号 // 这个时候 增删改查 要使用 中括号的方式巧用