JS函数

流莉呀
160 阅读7分钟

函数是对象

定义是一个函数

具名函数

function 函数名(形式参数1, 形式参数2){
  语句
  return 返回值
}

匿名函数

  • 上面的具名函数，去掉函数名就是匿名函数

  • let a = function(x, y){ return x+y }

  • 注意：表达式的左边是声明一个变量，并给它赋值为 a ，表达式的右边才是函数表达式。 如果声明一个函数是在等号右边，那么 fn 的作用域只有在右边，其它地方只能用 a ；没有等于号就是一个全局作用域。

  • 上面的代码也叫函数表达式

箭头函数

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 fn = new Function('x', 'y', 'return x+y')

  • 基本没人用，但是能让你知道函数是谁构造的

  • 所有函数都是 Function 构造出来的

  • 包括 Object、Array、Function 也是

函数自身 V.S. 函数调用

  • fn V.S. fn()

函数自身

  • 代码
let fn = () => console.log('hi')
fn
  • 结果：不会有任何结果，因为 fn 没有执行

函数调用

  • 代码
let fn = () => console.log('hi')
fn()

  • 结果：打印出 hi，有圆括号才是调用

  • 再进一步：代码

let fn = () => console.log('hi')
let fn2 = fn
fn2()
  • 结果：fn 保存了匿名函数的地址，这个地址被复制给了 fn2，fn2() 调用了匿名函数，fn 和 fn2 都是匿名函数的引用而已，真正的函数既不是 fn 也不是 fn2

函数的要素

每个函数都有这些东西

  • 调用时机

  • 作用域

  • 闭包

  • 形式参数

  • 返回值

  • 调用栈

  • 函数提升

  • arguments（除了箭头函数）

  • this（除了箭头函数）

调用时机

代码1

let a = 1
function fn(){
  console.log(a)
}

  • 问：打印出多少

  • 答：不知，因为没有调用代码

代码2

let a = 1
function fn(){
  console.log(a)
}
fn()

  • 问：打印出多少

  • 答： 1

代码3

let a = 1
function fn(){
  console.log(a)
}

a = 2
fn()

  • 问：打印出多少

  • 答：2

代码4

let a = 1
function fn(){
  console.log(a)
}
fn()
a = 2

  • 问：打印出多少

  • 答：1

代码5

let a = 1
function fn(){
  setTimeout(()=>{
    console.log(a)
  },0)
}
fn()
a = 2

  • 问：打印出多少

  • 答：2

代码6(重点)

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

  • 问：打印出多少

  • 答：打印出6个6，而不是0,1,2,3,4,5

  • 注意：setTimeout是指设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码，因为 i 先被赋值，for循环先执行完i = 6 ，执行完i=6后，再打印出6个i ,所以是 6个6。

代码7（重点）

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

  • 问：打印出多少

  • 答：打印出0,1,2,3,4,5

  • 注意：因为 JS 在 for 和 let 一起用的时候会加东西, 每次循环会多创建一个 i

用其他的方式打印出0,1,2,3,4,5,

let i = 0
for(i=0; i<6; i++){
  (function(i){
  setTimeout(()=>{
    console.log(i)
  },0)
  })(i)
}

作用域

  • 每个函数都会默认创建一个作用域
function fn(){
  let a = 1
}
console.log(a) // a 不存在
  • 注意：let a 的作用域在{}里，除了这个空间，其他地方都不存在。

全局变量 V.S. 局部变量

  • 在顶级作用域声明的变量是全局变量，window 的属性是全局变量，其他都是局部变量

作用域规则

  • 如果多个作用域有同名变量 a

  • 那么查找 a 的声明时，就向上取最近的作用域

  • 简称「就近原则」

  • 查找 a 的过程与函数执行无关

  • 但 a 的值与函数执行有关

注意：作用域的确定与函数的执行无关，叫做静态作用域，又叫词法作用域。反之就是动态作用域。

闭包

1.png

形式参数

形式参数的意思就是非实际参数

function add(x, y){
  return x+y
}// 其中 x 和 y 就是形参，因为并不是实际的参数
add(1,2)// 调用 add 时，1 和 2 是实际参数，会被赋值给 x y

形参可认为是变量声明

// 上面代码近似等价于下面代码

function add(){
  var x = arguments[0]
  var y = arguments[1]
  return x+y
}
  • 形参可多可少,只是给参数取名字

返回值

每个函数都有返回值

function hi(){ console.log('hi') }
hi()
  • 没写 return，所以返回值是 undefined
function hi(){ return console.log('hi') }
hi()
  • 返回值为 console.log('hi') 的值，即 undefined

函数执行完了后才会返回

只有函数有返回值

  • 1+2 值为 3

调用栈

什么是调用栈

  • JS 引擎在调用一个函数前

  • 需要把函数所在的环境 push 到一个数组里

  • 这个数组叫做调用栈（调用栈的长度是有限的）

  • 等函数执行完了，就会把环境弹(pop)出来

  • 然后 return 到之前的环境，继续执行后续代码

递归函数

  • 阶乘

2.jpg

  • 理解递归：先递进，再回归

  • 递归函数一般会出现自己调用自己的现象

  • 递归函数一般有一个递归出口，比如 n = 1 的时候，不再调用自己

  • 进栈

  • 压栈

  • 弹栈

  • 爆栈：如果调用栈中压入的帧过多，程序就会崩溃

函数提升

什么是函数提升

  • function fn(){}

  • 不管你把具名函数声明在哪里，它都会跑到第一行

什么是函数提升

  • let fn = function(){}

  • 这是赋值，右边的匿名函数声明不会提升

arguments和this

  • 每个函数都有，除了箭头函数

代码

function fn(){
  console.log(arguments)
  console.log(this)
}

如何传arguments

  • 调用 fn 即可传 arguments

  • fn(1,2,3) 那么 arguments 就是 [1,2,3] 伪数组

注意

  • 每次调用函数时，都会对应产生一个 arguments

  • arguments 是一个包含所有普通参数的伪数组

  • 我们应该尽量不对 arguments 内的元素进行修改，修改 arguments 会让代码变得令人疑惑

如何传this

  • 目前可以用 fn.call(xxx, 1,2,3) 传 this 和 arguments

  • 而且 xxx 会被自动转化成对象（JS 的糟粕）

  • 结论：this 是隐藏参数，arguments 是普通参数

JS 在每个函数里加了 this

  • 用 this 获取那个对象
let person = {
  name: 'frank',
  sayHi(this){
    console.log(`你好，我叫` + this.name)
  }
}

  • person.sayHi()相当于person.sayHi(person)

  • 然后 person 被传给 this 了（person 是个地址）

  • 这样，每个函数都能用 this 获取一个未知对象的引用了

  • 结论：person.sayHi() 会隐式地把 person 作为 this 传给 sayHi

两种调用法

小白调用法

  • person.sayHi()

  • 会自动把 person 传到函数里，作为 this

大师调用法（推荐）

  • person.sayHi.call(person)

  • 需要自己手动把 person 传到函数里，作为 this

代码

function add(x,y){
  return x+y
}

没有用到 this

  • add.call(undefined, 1,2) // 3

为什么要多写一个 undefined

  • 因为第一个参数要作为 this

  • 但是代码里没有用 this

  • 所以只能用 undefined 占位

  • 其实用 null 也可以

this 的两种使用方法

隐式传递

  • fn(1,2) // 等价于 fn.call(undefined, 1, 2)

  • obj.child.fn(1) // 等价于 obj.child.fn.call(obj.child, 1)

显示传递

  • fn.call(undefined, 1,2)

  • fn.apply(undefined, [1,2])

绑定this

使用 .bind 可以让 this 不被改变

function f1(p1, p2){
  console.log(this, p1, p2)
}
let f2 = f1.bind({name:'frank'})
// 那么 f2 就是 f1 绑定了 this 之后的新函数
f2() // 等价于 f1.call({name:'frank'})

.bind 还可以绑定其他参数

let f3 = f1.bind({name:'frank'}, 'hi')
f3() // 等价于 f1.call({name:'frank'}, hi)

箭头函数

里面的 this 就是外面的 this

console.log(this) // window
let fn = () => console.log(this) 
fn() // window

就算你加 call 都没有

fn.call({name:'frank'}) // window

关于 this，正确的有（多选，假设 fn 是一个普通函数, arrow 是一个箭头函数）

  • 在 new fn() 调用中，fn 里的 this 指向新生成的对象，这是 new 决定的

  • 在 fn() 调用中， this 默认指向 window，这是浏览器决定的

  • 在 obj.fn() 调用中， this 默认指向 obj，这是 JS 的隐式传 this

  • 在 fn.call(xxx) 调用中，this 就是 xxx，这是开发者通过 call 显式指定的 this

  • 在 arrow() 调用中，arrow 里面的 this 就是 arrow 外面的 this，因为箭头函数里面没有自己的 this

  • 在 arrow.call(xxx) 调用中，arrow 里面的 this 还是 arrow 外面的 this，因为箭头函数里面没有自己的 this

立即执行函数

原理

  • ES 5 时代，为了得到局部变量，必须引入一个函数

  • 但是这个函数如果有名字，就得不偿失

  • 于是这个函数必须是匿名函数

  • 声明匿名函数，然后立即加个 () 执行它

  • 但是 JS 标准认为这种语法不合法

  • 所以 JS 程序员寻求各种办法

  • 最终发现，只要在匿名函数前面加个运算符即可

  • !、~、()、+、- 都可以

  • 但是这里面有些运算符会往上走

  • 所以方方推荐永远用 ! 来解决

avatar
文章
阅读
粉丝