函数基础
1.1 函数创建
>> 函数声明(提升)
function 函数名() {
// 函数体
}
>> 函数表达式(没有提升,必须在调用前定义)
var/let/const 变量名 = function() {}
1.2 参数
>> 形参:定义函数时给定的一个未知数(变量)
>> 实参:调用函数时,给形参赋值
1.3 arguments:函数内部自带的对象,调用对象时,会保存实参
1.4 函数返回值
1.5 回调函数:当某一事件完成时,自动触发函数
dom.addEventListern(type, callback)
setTimeout(callback, time)
fs.readFile(src, callback)
1.6 构造函数
function 大驼峰函数名() {
this.属性 = 属性值
}
new 大驼峰函数名()
1.7 作用域
1.7.1 理解:
在一段程序中所用到的名字并不一定总是有效,这个名字可以使用的范围就是作用域。
简单理解就是变量或者函数可以发生作用的区域。
1.7.2 作用域划分:
>> 全局作用域
* 在最外层创建的变量或者函数;
* 在函数内没有声明变量而是直接赋值;
* 直接在 window 上定义属性或者方法;
>> 函数作用域:
在某个函数内部创建的变量或者函数。
>> 块级作用域({} 内)
* ES5 之前不存在这个概念;
* 在 ES6 之后,通过 let、const 声明的变量会形成一个块级作用域
1.7.3 执行环境
>> 理解:
程序在运行时,会根据自身的作用域创建相应的执行环境,所有的变量(函数)都存在于这个执行环境中,决定了变量和函数的生命周期,以及访问其他数据的权限。
>> 全局执行环境
是最外层的执行环境,对于 web 来讲,当我们打开浏览器或者网页时就会创建这个执行环境并将之推入环境栈中。
>> 函数执行环境
每个函数在被调用的时候,都会创建自己局部的执行环境并推入环境栈中。
>> 变量对象
每个执行环境都有一个与之关联的变量对象,环境中定义的所有的变量和函数都保存在这个对象中。
function fn(name) {
var text = '123';
}
// 变量对象是包含这些:fn、name、text
// 活动对象:text
>> 活动对象
进入函数执行环境时被创建的。
1.7.4 作用域链:
用途是保证对执行环境有权访问的所有变量和函数的有序访问。
层级越深,能访问的数据越多;
只能基于作用域链,一层一层向上访问,直到最顶层,但是原则上不能从外层访问内层.
1.8.4 递归函数
>> 理解:
在函数内部调用自己的场景。
注意:使用递归必须注意处理不当就会陷入死循环。
>> 如何使用递归
* 必须有入口;
* 必须设置出口;
>> 使用场景:
* 省市区
* 树状导航(菜单)
* 阶乘
1.9 IIFE(自运行的匿名函数)
>> 语法:
(function() {
// 函数体
})()
>> 特点
* 自动运行;
* 只能执行一次;
* 将所有的运算过程放在函数内,不会产生全局污染。
1.9 IIFE(闭包)
1.9.1 概念
闭包就是作用域的一个体现,能够读取其他函数内部的变量的函数。
1.9.2 写法
>> 直接将内部函数暴露到全局:
(function() {
var i = 0;
window.getI = function() {
return i;
};
})();
>> 将函数直接返回
var getI = (function() {
var i = 0;
return function() {
return i;
}
})();
1.9.3 结论
* 闭包就是外层函数访问了内层函数的局部变量;
* 由于内层函数的变量被引用了,导致该变量在函数执行结束后不会销毁,会常驻内存。
1.9.4 闭包的作用?
* 避免创建过多的全局变量;
* 保护变量;
1.9.5 闭包会产生什么问题?
一般函数运行完毕后,内部的变量就会被释放(垃圾回收机制处理),每次运行函数时都是最新的。
如果内存中的变量过多,就会导致内存泄漏。
// 如果不再使用该变量,可以手动销毁
变量 = null;
1.9.6 什么情况下会引起内存泄漏(IE)
>> 全局变量(不会被回收的);
>> 闭包引起的
>> 被遗忘的定时器
{
created() {
this.timer = setTimeout(fn, 6000)
},
destroyed() { // 组件销毁的时候要取消计时器或者事件监听或者请求
clearTimeout(this.timer)
}
}
>> 没有清理 DOM 引用
var dom = $('')
dom.on() // 添加事件
dom.off() // 取消
dom.remove() // 移除节点
dom = null; // 销毁变量
1.9.7 垃圾回收机制
JS 中最常用的垃圾回收机制就是 标记清除,当变量进入环境时,会将这个变量标记为 进入环境,离开环境时,会标记为 离开环境,带 离开环境的值就会被浏览器回收所占据的内存空间。
2.0 函数参数默认值
>> ES5 参数默认值
function sum(x, y) {
x = x || 0
y = y || 0
return x + y
}
>> ES6 参数默认值
function sum(x=0, y=0) {
return x + y;
}
2.1 函数 rest 参数
2.2 箭头函数
>> ES6 允许使用 => 来定义函数
const 变量名 = (v) => v; // 隐藏了 return
// 等同于
const 变量名 = function(v) {
return v;
}
>> 如果只有一个参数,参数可以使用括号也可以不使用括号
const 变量名 = (v) => v;
// or
const 变量名 = v => v;
>> 如果没有参数或者是多个参数,参数部分必须使用括号
const 变量名 = () => 5;
const 变量名 = (x, y) => x + y;
>> 如果箭头后有多行代码,需要带上 大括号,并且使用 return 关键字进行返回
const f = () => {
return 5;
}
>> 如果就是返回一个对象,那么必须在对象外使用小括号
const f = () => ({ // 返回对象
name: '
})
>> 箭头函数内部 this 指向函数定义时所在的作用域。
* 箭头函数没有 this 对象
* 构造函数不能用 箭头函数
* 箭头函数也不能用 arguments
2.3 继承
* 子类实例化的对象拥有父类的所有属性和方法;
* 子类实例化的对象也要属于父类。