JS 函数（对象）

Hello_Tang
178 阅读6分钟

请接受这个结论：函数是一种对象

定义一个函数

具名函数

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

1.png

匿名函数

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

let a = function(x, y){ return x+y }
  ↑                   ↑    
声明变量        这部分叫函数表达式
并赋值
（变量a容纳了函数的地址）

也叫函数表达式

2.png

具名函数可以和匿名函数结合

例：

3.png

把具名函数fn的地址存在a里，结合后fn的作用域只在等号右边

箭头函数

  • let f1 = x => x*x

4.png

  • let f2 = (x,y) => x*y // 圆括号不能省

6.png

  • let f3 = (x,y) => {return x+y} // 花括号不能省 ，内容超过一行加花括号和return 6.png
  • let f4 = (x,y) => ({name:x, age: y}) //如果直接要返回一个对象，要两边加上圆括号 7.png
  • 直接返回对象会出错，需要加个圆括号（头疼）

用构造函数

  • let f = 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

函数的要素

每个函数都有这些东西

  1. 调用时机
  2. 作用域
  3. 闭包
  4. 形式参数
  5. 返回值
  6. 调用栈
  7. 函数提升
  8. arguments（除了箭头函数）
  9. this（除了箭头函数）

1.调用时机

时机不同，结果不同

例1

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

a = 2
fn()

问打印出多少
答:2

例2

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

fn()
a = 2

问打印出多少
答:1

例3

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

fn()
a = 2

问打印出多少
答:2

例4

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

问打印出多少
答:
不是 0、1、2、3、4、5
而是 6 个 6

例5

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

问打印出多少
答:
是 0、1、2、3、4、5
因为 JS 在 for 和 let 一起用的时候会加东西
每次循环会多创建一个 i（我服了 JS）

2.作用域

每个函数都会默认创建一个作用域

例

function fn(){
  let a = 1
}
console.log(a) // a 不存在

问:是不是因为 fn 没执行导致
答:就算 fn 执行了，也访问不到作用域里面的 a

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

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

函数可嵌套,作用域也可嵌套

例

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

  console.log(a)
  a = 3
  f2()
}
f1()
答：

作用域规则

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

  • 那么查找 a 的声明时，就向上取最近的作用域
  • 简称「就近原则」
  • 查找 a 的过程与函数执行无关
  • 但 a 的值与函数执行有关
  • 跟函数没有关系的叫静态作用域，反之叫动态作用域

闭包

  • 如果一个函数用到了外部的变量
  • 那么这个函数加这个变量
  • 就叫做闭包
  • 左边的 a 和 f3 组成了闭包
  • 闭包的用途以后讲
  • 你也可以先搜一下

形式参数

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

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 (错)
  • 1+2 值为 3 （对）

调用栈

记录进入到函数之后，回到哪里

什么是调用栈

  • JS 引擎在调用一个函数前
  • 需要把函数所在的环境 push 到一个数组里
  • 这个数组叫做调用栈
  • 等函数执行完了，就会把环境弹(pop)出来
  • 然后 return 到之前的环境，继续执行后续代码

举例

  • console.log(1)
  • console.log('1+2的结果为' + add(1,2))
  • console.log(2)

8.png

递归函数

阶乘

function f(n){
  return n !== 1 ? n* f(n-1) : 1
}
理解递归
f(4)
= 4 * f(3)
= 4 * (3 * f(2))
= 4 * (3 * (2 * f(1)))
= 4 * (3 * (2 * (1)))
= 4 * (3 * (2))
= 4 * (6)
24
先递进，再回归

9.png 爆栈 —— 如果调用栈中压入的帧过多，程序就会崩溃

函数提升

什么是函数提升

  • function fn(){}
  • 不管你把具名函数声明在哪里，它都会跑到第一行

什么不是函数提升

  • let fn = function(){}
  • 这是赋值，右边的匿名函数声明不会提升

arguments 和 this --(每个函数都有，除了箭头函数)

arguments

  • arguments是个长度为0的空对象
  • 同时也是包含了所有参数的伪数组
  • 它没有数组的共有属性
  • 可以用Array.from转换为数组
function fn(){
  console.log(arguments)
  console.log(this)
}

this

function fn(){
   console.log(this)
   }
fn() // 返回window
  • 如果不给任何条件，this默认指向window

如何传 arguments

  • arguments是个伪数组
  • 调用 fn 即可传 arguments
  • fn(1,2,3) 那么 arguments 就是 [1,2,3] 伪数组

如何传 this

  • 目前可以用 fn.call(xxx, 1,2,3) 传 this 和 arguments
  • 而且 xxx 会被自动转化成对象（JS 的糟粕）

结论：

  • this 是隐藏参数
  • arguments 是普通参数

假设没有 this

let person = {
  name: 'frank',
  sayHi(){
    console.log(`你好，我叫` + person.name)
  }
}

分析 :

  • 我们可以用直接保存了对象地址的变量获取 'name'
  • 我们把这种办法简称为引用

如何获取对象的 name 属性

  • 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

  • 方便 sayHi 获取 person 对应的对象

  • person.sayHi() 会把 person 自动传给 sayHi, sayHi 可以通过 this 引用 person

  • 注意 person.sayHi 和 person.sayHi() 的区别

  • 注意 person.sayHi() 的断句 (person.sayHi) ( )

这就引出另一个问题

到底哪个对

let person = {
  name: 'frank',
  sayHi(this){
    console.log(`你好，我叫` + this.name)
  }
}
person.sayHi()
person.sayHi(person)
省略形式反而对了，完整形式反而是错的？

怎么解决这种不和谐? JS提供两种调用形式

小白调用法

person.sayHi()
会自动把 person 传到函数里，作为 this

大师调用法

person.sayHi.call(person)
需要自己手动把 person 传到函数里，作为 this

应该学习哪种？

  • 学习大师调用法，因为小白调用法你早就会了
  • 默认用大师调用法 例1：
function add(x,y){
  return x+y
}
没有用到 this
add.call(undefined, 1,2) // 3
为什么要多写一个 undefined
因为第一个参数要作为 this
但是代码里没有用 this
所以只能用 undefined 占位
其实用 null 也可以

例2：

Array.prototype.forEach2 = function(fn){
  for(let i=0;i<this.length;i++){
    fn(this[i], i, this)
  }
}
this 是什么
由于大家使用 forEach2 的时候总是会用 arr.forEach2
所以 arr 就被自动传给 forEach2 了
this 一定是数组吗
不一定，比如
Array.prototype.forEach2.call({0:'a',1:'b'})

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])

箭头函数(补)

没有 arguments 和 this

里面的 this 就是外面的 this

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

就算你加 call 都没有

fn.call({name:'frank'}) // window
avatar
文章
阅读
粉丝