函数是一个函数
定义一个函数
具名函数
function 函数名(参数1，参数2){
语句
return 返回值
}
匿名函数
- 上面的具名函数，去掉函数名就是匿名函数
- let a = function (x, y){return x+y}
-
也叫函数表达式
image.png
箭头函数
let f1 = x => x*x;
let f2 = (x, y) => x+y
let f3 = (x, y) => {return x+y}// 花括号不能省略
let f4 = (x, y) => ({name: x, age: y})//直接返回对象会出错，需要加圆括号
构造函数
let fn1 = new Function('x', 'y', 'console.log(x+y)')
函数自身
let fn = () => console.log('hi');
fn()
- 打印hi
- 有圆括号才是调用
let fn = () => console.log('hi')
let fn2 = fn
fn2()
结果
- fn保存了匿名函数的地址
- 将fn保存的匿名函数的地址赋值给fn2
- fn2()调用了匿名函数
- fn和fn2 都是匿名函数的引用
- 真正的函数既不是fn也不是fn2
函数的要素
每个函数都会有以下内容
1 调用时机
let a = 1;
function fn(){
console.log(a)
}
// 代码二
let a = 1
function fn(){
console.log(a)
}
a = 2
fn()
// 代码三
let a = 1
function fn(){
setTimeout(
() => {
console.log(a)
}, 0
)
}
fn()
a = 2
// 代码四
let i = 0;
for(i = 0; i < 6; i++){
setTimeout(
() => {
console.log(i)
}, 0
)
}
// 代码五
for(let i = 0; i < 6; i++){
setTimeout(
() => {
console.log(i)
}, 0
)
}
除了"最小延时"之外，定时器仍然有可能因为当前页面（或者操作系统/浏览器本身）被其他任务占用导致延时。 需要被强调是， 直到调用 setTimeout()的主线程执行完其他任务之后，回调函数和代码段才能被执行。出现这个结果的原因是，尽管setTimeout 以0ms的延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。
let i = 0;
for(i = 0; i < 6; i++){
setTimeout(
() => {
console.log(i)
}, 0
)
}
所以当循环结束后，才会执行setTimeout里面的console.log，最后打印出来的结果是同一个i。即打印6。
那么如果想要是最后打印出1~5的连续数字，又该怎么办呢？
1 使用其他值存储i
let i = 0;
for(i = 0; i < 6; i++){
let m = i;
setTimeout(
() => {
console.log(m)
}, 0
)
}
2 立即执行
let i = 0;
for(i = 0; i < 6; i++){
setTimeout(
((i) => {
console.log(i)
})(i), 0
)
}
2 作用域
function fn(){
let a = 1;
}
fn();
console.log(a)// a不存在
1 全局变量 局部变量
在顶级作用域声明的变量是全局变量
window的属性是全局变量
其他都是局部变量
2 函数嵌套
作用域嵌套
function fn1(){
let a = 1;
function f2(){
let a = 2;
console.log(a);
}
console.log(a)
a = 3
f2()
}
fn1()
如果多个作用域有同名变量a
那么查找a的声明时，就向上去最近的作用域
简称就近原则
查找a的过程与函数执行无关
但a的值与函数执行有关
3 闭包
function f1(){
let a = 1;
function f2(){
let a = 2;
function f3(){
console.log(a)
}
a = 22;
f3();
}
console.log(a)
a = 100;
f2()
}
f1()
如果一个函数用到了外部的变量
那么这个函数加这个变量
这叫做闭包
f3和a形成了闭包
4 形式参数
形式参数的意思就是非实际参数
function add(x, y){
return x + y;
}
// 其中x和y就是形参，因为并不是实际参数
// 调用add时，1和2就是实际参数，会被赋值给x y
形参可认为是变量声明
function add(){
var x = arguments[0];
var y = arguments[1];
return x+y
}
5 返回值
每个函数都有返回值
function hi(){
console.log('hi')
}
// 没写return所以返回值为undefined
function hi(){
return console.log('hi')
}
hi()
//
函数执行完了后才会返回
只有函数有返回值
6 调用栈
1 什么是调用栈
- js 引擎调用一个函数前
- 需要把函数所在的环境push到一个数组里面
- 这个数组叫做调用栈
- 等函数执行完了，就会把环境弹出来
- 然后return到之前的环境，继续执行后面的代码
console.log(1)
console.log('1+2的结果为'+add(1,2))
console.log(2)
递归函数
function f(n){
return n!==1?n*f(n-1) : 1
}
先递进在回归
如果调用栈中压入的帧过多，程序就会崩溃
函数提升
1 函数提升
function fn(){}
不管具名函数声明在哪，都会提升到第一行
2 函数不提升
let fn = function(){}
这是赋值，右边的匿名函数声明不会提升
arguments（除了箭头函数）
this（除了箭头函数）
每个函数都有，除了箭头函数
function fn(){
console.log(arguments);
console.log(this)
}
如何传递arguments
- 调用fn即可传arguments
- fn(1,2,3)那么arguments就是[1,2,3]伪数组
如何传this - 目前可以用fn.call(xxx, 1,2,3)传this和arguments
- 而且xxx会被自动转化为对象
如果不指定this，默认指向window
function fun(){
console.log(this);
}
fun.call('a')
fun.call(undefined)
如果传入的非对象，js会自动封装为对象；如果是undefined则会默认设置为window
function fn(){
'use strict'
console.log(this)
}
fn.call(1)
fn.call(undefined)
不会自动转译为对象
this
不用this
let person = {
name: 'frank',
sayHi(){
console.log(`你好，我叫`+person.name)
}
}
- 我们可以用直接保存了对象地址的变量获取'name'
- 将这种方法简称为引用
对象
let person = {
name: 'frank',
sayHi(p){
console.log(`你好，我叫`+p.name)
}
}
person.sayHi(person)
类
class Person{
constructor(name){
this.name = name
}
sayHi(p){
console.log(`你好，我叫`+p.name)
}
}
js在每个函数里加了this
let person = {
name: 'wt',
sayHi(){
console.log(`你好，我叫`+this.name)
}
}
person.sayHi()
相当于
person.sayHi(person)
然后person被传给了this
这样，每个函数就都能用this获取一个未知对象的引用了
person.sayHi()会隐式地把person作为this传给sayHi
- 让函数获取对象的引用
- 但是并不想通过变量名做到
- js通过额外的this做到了
两种调用方式
- person.sayHi()
-
person.sayHi.call({name: 1})
image.png
通过this实现array的forEach方法
Array.prototype.forEach2 = function (fn) {
for(let i = 0; i < this.length; i++){
fn(this[i], i)
}
}
this 的两种使用方法
- 隐式传递
fn(1,2)// 等价于fn.call(undefind, 1, 2)
obj.child.fn(1)//等价于 obj.child.fn.call(obj.child, 1) - 显示传递
fn.call(undefined, 1, 2)
fn.apply(undefined, [1,2])
绑定this
1 使用.bind可以让this不被改变
function f1(p1, p2){
console.log(this, p1, p2)
}
let f2 = f1.bind({name: 'wt'})
f2()// 等价于f1.call({name: 'wt'})
.bind 还可以绑定其他参数
let f3 = f1.bind({name: 'wt'}, 'hi')
f3()//等价于f1.call({name: 'wt'}, 'hi')
箭头函数
没有arguments和this
里面的this就是外面的this
- console.log(this)
- let fn = () => console.log(this)
- fn()// window
加上call - fn.call({name: 'frank'})// window
立即执行函数
+function(){//前面使用操作符 如 -, !等
console.log('do is it, now')
}()
防止创建全局变量，可以使用{}
- es5,为了得到局部变量，必须引入一个函数
- 这个函数必须是匿名函数
- 声明匿名函数，然后立即加个()执行它
- 但是js标准认为这种语法不合法
- 只要在匿名函数前加个运算符
- !、~、()、+、-都可以，推荐使用！
