03-JavaScript-函数
函数就是将特定功能的代码封装起来，当需要实现特定功能时，直接调用函数实现即可。
一、函数定义和使用
1.1 定义函数
- 语句式命名函数
function sum(a,b) {
return a + b;
}
- 变量函数表达式
是一个匿名函数，它没有函数名
let sum = function(a,b) {
return a + b;
};
1.2 调用函数
按顺序传入参数
console.log(sum(1,3))
function sum(a,b) {
return a + b;
}
let sum2 = function(a,b) {
return a + b;
};
console.log(sum2(1,3))
函数声明提升:
语句式命名函数存在函数声明提升，函数表达式声明函数函数时，不可以把函数调用写在函数声明前面，因为变量赋值不存在提升。
1.3 arguments
- 在函数内部起作用，指向当前函数的调用者传入的所有参数，它是一个类似数组的对象
let sum2 = function(a,b) {
console.log(arguments) //[1, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
console.log(arguments[2]) //4
return a + b;
};
sum2(1,3,4,5)
- arguments…length 获取调用函数实参个数
- callee 属性，指向拥有这个arguments对象的函数
1.4 rest参数
剩余参数，遵循传入顺序后的，所有参数。rest参数只能写在最后，前面用…标识
let sum = function(a,b,...rest) {
console.log(rest) //[4, 5]
return a + b;
};
sum2(1,3,4,5)
二、变量作用域与解构赋值
2.1 变量提升
JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部
2.2 全局作用域
函数之外声明的变量，会成为全局变量，就具有全局作用域
2.3 局部作用域
函数中声明的变量，会成为函数的局部变量，在函数外部不能访问
2.4 作用域链
当前作用域没有定义的变量，会顺着作用域向父作用域找，如果父级也没有找到，再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链 。
2.5 名字空间
用于解决相同的全局变量、相同名字的函数，造成命名冲突。
var NAME_SPACE = {}
NAME_SPACE.name = ''
NAME_SPACE.sum = function() {}
2.6 常量
let、var声明的是变量，要声明一个常量，使用ES6的const声明，通常用全部大写的变量来表示“这是一个常量，不要修改它的值”，谷歌浏览器下，赋值会报错。
const PI = 3.14
PI = 3 // index.html:53 Uncaught TypeError: Assignment to constant variable.
console.log(PI)
2.7 解构赋值
可以同时对一组变量进行赋值
- 数组解构（注意嵌套层次和位置要保持一致）
let arr = ['诸葛亮', ['刘备', '关羽'], '张飞'];
let [o, [p,q], r] = arr;
console.log(o,p,q,r) //诸葛亮 刘备 关羽 张飞
- 对象进行解构赋值
正常解构
let obj = {
name: '张飞',
age: 37,
country: '蜀国'
}
let {name, age, country} = obj
console.log(name,age,country) //张飞 37 蜀国
嵌套的对象属性进行赋值:
address不是变量，而是为了让country、province、city获得嵌套的address对象的属性
let obj = {
name: '张飞',
age: 37,
address: {
country: '蜀国',
province: '四川',
city: '成都'
}
}
let {name, age, address:{country,province,city}} = obj
console.log(name,country,province,city) //张飞 蜀国 四川 成都
console.log(address) //Uncaught ReferenceError: address is not defined
当解构赋值，对应属性不存在时，会赋值undefined
let obj = {
key: '004',
name: '张飞',
age: 37,
address: {
country: '蜀国',
province: '四川',
city: '成都'
}
}
// key不是变量，而是为了让变量code获得key属性
let {name,id,key:code} = obj
console.log(name) //张飞
console.log(id) // undefined
console.log(code) // 004
解构赋值还可以使用默认值
let obj = {
key: '004',
name: '张飞',
age: 37,
address: {
country: '蜀国',
province: '四川',
city: '成都'
}
}
let {name,id='001'} = obj
console.log(name) //张飞
console.log(id) // 001
- 使用场景
1、直接获取某对象里面的属性值，不需要通过.来获取和连续声明变量
let {x,y,z} = {}
2、函数接收一个对象作为参数，可以直接用解构把对象属性赋值给变量
sum({x,y,z=0}){
return x+y+z
}
3、变量值替换，减少中间变量
let x=1, y=2;
[x,y] = [y,x]
console.log(x,y) //2 1
三、方法
一个对象中绑定函数，这个函数称为这个对象的方法。
let obj = {
name: '张飞',
birth: 1993,
age: function() {
let y = new Date().getFullYear()
return y - this.birth
}
}
console.log(obj.age()) //30
3.1 this指向
this是执行环境上下文对象 ，它指向谁取决于它什么时候被调用、被谁调用。
- 在方法中，this表示该方法所属的对象
也就是说，谁执行这个方法，this就指向谁
let person = {
name: '张飞',
birth: 1993,
say: function() {
console.log(this)
console.log(this.name)
}
}
// person对象调用了方法，this指向person
person.say()
let person = {
name: '张飞',
birth: 1993,
say: function() {
console.log(this)
console.log(this.name)
}
}
// 全局对象调用say方法，因此this指向window
let say = person.say
say()
- 单独使用，this 表示全局对象，浏览器中指向向window
- 函数中使用this，表示全局对象，浏览器中指向向window
- 事件中的this，指向了接收事件的 HTML 元素
- 显示函数绑定
js中函数也是对象，对象中则有方法，apply 和 call 就是函数对象的方法，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。
let personBase = {
name: '张飞',
birth: 1993,
say: function() {
console.log(this)
console.log(this.name)
}
}
let person = {
name: '刘备',
}
let say = personBase.say
say.call(person) //指向person
say.apply(personBase) //personBase
1.2 调用函数扩展
- 函数名(实参列表)：say(a,b)
- 函数名.call(执行环境对象,实参列表)：say.call(person,a,b,c…)
call 方法用来改变 this 的指向，第一个参数表示 this 的指向，后面的参数表示传递的实参，可以零个、一个或多个 - 函数名.apply(执行环境对象,实参列表数组)：say.apply(person,[a,b,c])
apply 方法和 call 方法基本相同，也是用来改变 this 的指向，不同点在于，apply 传递实参时，采用数组的形式。 - 函数名.bind(执行环境对象)(实参列表)：say.bind(person).(a,b,c)
bind 也是用来改变 this 的指向的，但是 bind(执行环境对象) 返回的是函数，还没有被执行，需要再使用（）执行函数。 - 回调函数
主函数的事先做完，回头再调用传进来的那个函数
四、立即执行函数
声明函数的同时立即调用这个函数，立即执行函数是一个匿名函数
4.1 作用
1、页面加载完成后只执行一次的设置函数。
2、将设置函数中的变量包裹在局部作用域中，不会泄露成全局变量
4.2 书写方式
// a b 形参
(function(a,b){
//函数体内容
console.log(a,b)
}(1,2));//形参 立即执行函数结束要加分号
(function(a,b){
console.log(a,b)
})(3,4)
4.3 用例
由于log调用前，循环执行结束，所以输出5
for(let i=0; i<6; i++) {
function log() {
console.log(i)
}
}
log() //5
使用立即执行函数
for(let i=0; i<6; i++) {
(function(j) {
console.log(i) //0,1,2,3,4,5
})(i)
}
五、闭包
闭包是指有权访问另一个函数中的变量的函数。（定义一个在函数内部的函数，内部函数可以访问外包函数的局部变量）
5.1 闭包形成条件
- 函数嵌套
- 内部函数使用到了外部函数内容（变量、函数等）
- 参数和变量不会被回收
function fun () {
var x = 0, y = 1;
function sum() {
console.log(x + y)
return x + y
}
return sum
}
let f = fun()
f()
5.2 闭包的作用
- 可以读取函数内部的变量
- 让这些变量的值始终保持在内存中
function fun () {
var n = 0;
function sum() {
n += 1
console.log(n)
}
return sum
}
var f = fun()
f() //1
f() //2
fun执行两次， n分别输出1 和 2，说明fun中的局部变量n一直存在内存中，没有在fun调用后，自动清除。
未清除的原因：sum函数是fun的子函数，fun执行后，把sum函数赋值给了全局变量f，全局变量f一直存在，所以sum函数一直存在，而sum又依赖于fun函数，所以fun一直存在内存中，未在调用结束后被垃圾回收机制回收。
5.3 闭包的注意事项
- 由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题
- 闭包会在父函数外部改变父函数内部变量的值。所以，如果你把父函数当作对象使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。多个子函数都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响
六、箭头函数
箭头函数相当于匿名函数，简化了函数定义
6.1 定义方式
// 省略简写方式
let fun1 = (x,y)=> x+y;
// 多条语句
let fun2 = (x,y)=> {
console.log(x)
return x+y
}
fun1(1,2)
fun2(2,3)
6.2 this问题
箭头函数内部的this是词法作用域，由上下文确定。
箭头函数的外层如果有普通函数，那么箭头函数的this就是这个外层的普通函数的this，箭头函数的外层如果没有普通函数，那么箭头函数的this就是全局变量。
- 箭头函数是匿名函数，不能作为构造函数，不可以使用new命令，否则后抛出错误
箭头函数没有原型对象prototype这个属性 - 箭头函数不绑定arguments，取而代之用rest参数解决，同时没有super和new.target
- 箭头函数可以通过拓展运算符获取传入的参数。
let fun2 = (...args)=> {
console.log(args)
return args[0]+args[1]
}
fun2(2,3)
- 使用call,apply,bind并不会改变箭头函数中的this指向
当对箭头函数使用call或apply方法时，只会传入参数并调用函数，并不会改变箭头函数中this的指向。
当对箭头函数使用bind方法时，只会返回一个预设参数的新函数，并不会改变这个新函数的this指向。