JS函数

雉堞
183 阅读7分钟

JS函数

如何定义一个函数

  • 具名函数
 function 函数名(形式参数1，形式参数2){
     语句
     return 返回值
 }
  • 匿名函数

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

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

也叫函数表达式

如果将匿名函数和具名函数合起来呢

 let a = function fn(x,y){
     return x+y
 }
 fn(1,2) //VM4647:1 Uncaught ReferenceError: fn is not defined 
 //fn并不能使用，它的作用域只停留在等号的右边
  • 箭头函数
 let f1 =x=>x*x    
 ​
 let f2 =(x,y)=>x*y  //使用两个参数的时候需要添加括号
 ​
 let f3 = (x,y) =>{
     console.log('hi')
     return x*y;
 } //当函数体有两句话的时候需要使用花括号并且在需要return的时候要自己添加关键字
 ​
 let f4=x=>({name:x}) //直接返回对象会出错，需要加个圆括号
  • 构造函数
 let f5 = new Function('x','y','return x+y')
 //基本没人使用，但是可以了解所有函数都是Funciton构造出来的
 //包括Object、Array、Funciton

函数名和函数调用

 let fn = ()=> console.log('hi');
 let fn2 = fn;
 fn2()

  • 结果

    • fn 保存了匿名函数的地址
    • 这个地址被复制到了fn2
    • fn2()调用了匿名函数
    • fn和fn2都是匿名函数的引用而已
    • 真正的函数既不是fn也不是fn2

函数的要素

调用时机

 //代码一
 let i = 0
 for(i = 0; i<6; i++){
 setTimeout(()=>{
 console.log(i)
 },0)
 }
 ​
 //不是0，1，2，3，4，5 而是6个6
 ​
 ​
 //几乎相同的代码，但是结果不同
 for(let i = 0; i<6; i++){
 setTimeout(()=>{
 console.log(i)
 },0)
 }
 ​
 //不是6个6而是0，1，2，3，4，5
 //因为JS在for和let一起用的时候会加东西，每次循环会多创建一个i

那么近乎相同的代码为什么会造成结果不同呢？

分析：当我们执行代码一时，执行到for循环，第一次进入此时 i =0 而setTimeout(()=>{ console.log(i)},0)的意思是执行完当前程序后马上执行，所以会继续执行完for循环，直到i=6

这时才执行setTimeout中的代码打印6，进入循环六次所以打印六次

而当let和for在一起的时候，JS会将i拷贝一份进行执行,所以代码正常执行

还可以通过创建一个函数（普通的函数也行），传入i的值，规避掉定时器的效果，而在函数内部引用外部变量也叫做闭包

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

作用域

全局变量VS局部变量

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

作用域规则

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

    • 那么查找a的声明时，就向上取最近的作用域
    • 简称【就近原则】
    • 查找a的过程与函数执行无关
    • 但a的值与函数执行有关

闭包

如果一个函数用到了外部的变量，那么这个函数加这个变量就叫做闭包

形式参数

  • 形式参数的意思就是非实际参数
 function fn(x,y){
     return x+y
 }
 //其中x和y就是形参，因为并不是实际参数
 fn(1,2)
 //调用fn（）时，1和2是实际参数，会被赋值给x,y
  • 形参可认为是变量声明，只是给参数取名字而已，并没有实际意义
 function add(){
     let x=arguments[0]
     let y=arguments[1]
     return x+y
 }

返回值

  • 每个函数都有返回值
  • 函数执行完了才有返回值
  • 只有函数有返回值

调用栈

什么是调用栈

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

压栈的过程也就是存储一个存档，方便之后能够从更加内层的计算中回来，弹栈就相当于存档已经使用结束，删除存档的过程

递归函数的调用栈很长
 //阶乘
 function f(n){
     return n!==1?n*f(n-1):1
 }
 //递归函数在递进的过程也就是压栈的过程，而函数在回归的过程也就是弹栈的过程
爆栈

如果调用栈中压入的栈太多了，程序就会崩溃，Chrome的调用栈大概是11000~12000个左右

函数提升

  • 什么是函数提升
 fn()
 function fn(){}

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

  • 什么不是函数提升
 fn() //报错
 let fn = function(){}

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

arguments和this

 function fn(){
     console.log(arguments)
 }
 //arguments是一个伪数组
 ​
 function fn2(){
     console.log(this)
 }//如果不给任何条件，this默认指向window
 ​
 fn2.call(1)

  • 如何传arguments

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

  • 如何传this

    • 目前可以用fn2.call(1,2,3)传this和arguments 而且1会被自动转换为对象，后面的会组成arguments伪数组

假设没有this

 let person = {
   name:'wilson'
   sayHi(){
     console.log('你好，我叫'+person.name)
   }
 }
 //因为函数还没有执行，可以用直接保存了对象地址的变量来获取'name'也就是引用

问题一：

但是暴露出了一些问题，如果需要先声明函数，并不能知道person变量的名字

 let sayHi =function（）{
     console.log('你好，我叫'+person.name) 
 }
 ​
 let person={
     name:'wilson',
     'sayHi':sayHi
 }

  • 分析

    person如果改名，sayHi函数就挂了，sayHi函数甚至有可能出现在另一个文件，需要跨文件引用变量，所以我们不希望sayHi函数里出现person引用

问题二：

 class Person{
   constructor(name){
     this.name=name //这里的this是new强制指定的
   }
   sayHi(){
     console.log(???)
   }
 }

  • 分析

    这里只有类，还没有创建对象，就不无法获取到对象的引用，当写函数的时候又怎么拿到对象的name属性呢？

一种土办法，使用参数

 //对象
 let person = {
  name:'wilson',
  sayHi(p){
     console.log('你好，我叫'+p.name)
  }
 }
 ​
 //类
 class Perosn{
     constructor(name){this.name=name}
     sayHi(p){
         console.log(`你好，我叫`+p.name)
     }
 }

python就使用了这种方式

Python代码
 class Person:
 def __init__(self, name): #   //self是python创建的一个对象
 self.name = name
 ​
 def sayHi(self):
 print('Hi, I am ' + self.name)
 ​
 person = Person('frank')
 person.sayHi()
 ​

  • 特点

    每个函数都接受一个额外的self，这个self就是传进来的对象，只不过python会偷偷帮你传对象

    person.sayHi() 等价于 person.sayHi(person)

    person就被传给self了

JS没有模仿Python的思路，走了另一条路

用this获取了那个对象

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

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

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

这样，每个函数都能用this获取一个位置对象的引用

总结一下目前的知识

  • 我们想让函数获取对象的引用
  • 但是并不想通过变量名做到
  • Python通过额外的self参数做到
  • JS通过额外的this做到

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

但是这就引出了另一个问题
  • 到底哪个对
 person.sayHi()
 person.sayHi(person)
 //省略形式反而是对的？完整形式反而是错的呢

  • JS怎么解决这种不和谐

    提供了两种调用法

两种调用法

  • 小白调用法

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

  • 大师调用法

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

this的两种使用方法

  • 隐式传递

    fn(1,2)

    obj.child.fn(1)

  • 显示传递

fn.call(undefined,1,2)

obj.child.fn.call(obj.child,1)

绑定this

  • 使用.bind可以让this不被改变
 function f1(p1,p2){
   console.log(this,p1,p2)
   return p1+p2;
 }
 let f2 = f1.bind({name:'wilson'})
 //那么f2就是f1绑定了this之后的新函数
 f2()

箭头函数

  • 里面的this就是外面的this

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

  • 就算你加call都没有

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

立即执行函数

在ES5时代，为了得到一个局部变量，必须引入一个函数，但是这个函数如果是一个全局函数得不偿失，于是这个函数必须是匿名函数，并且在声明这个匿名函数之后立刻加()执行它，但是JS认为这种语法不合法，所以JS程序员寻找各种方法，最终发现，只要在匿名函数前面加上一个运算符即可，但是有些运算符会往上走，所以推荐使用！来解决

 ! function (){
   var a=1
   console.log(a)
 }()
avatar
文章
阅读
粉丝