js函数

函数是一个函数

定义一个函数

具名函数

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()的主线程执行完其他任务之后，回调函数和代码段才能被执行。出现这个结果的原因是，尽管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
}

先递进在回归

image.png

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

函数提升

1 函数提升
function fn(){}
不管具名函数声明在哪，都会提升到第一行

image.png

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

arguments（除了箭头函数）

this（除了箭头函数）

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

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

image.png

如何传递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

image.png

function fn(){
    'use strict'
    console.log(this)
}
fn.call(1)
fn.call(undefined)

不会自动转译为对象

image.png

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

image.png

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')
}()

image.png

防止创建全局变量，可以使用{}

• es5,为了得到局部变量，必须引入一个函数
• 这个函数必须是匿名函数
• 声明匿名函数，然后立即加个()执行它
• 但是js标准认为这种语法不合法
• 只要在匿名函数前加个运算符
• !、~、()、+、-都可以，推荐使用！