【总结】JavaScript - 函数进阶

1. 函数三种调用模式

this的指向 : 谁调用我我就指向谁

普通函数 : 函数名() this指向window

对象方法 : 对象名.方法名() this指向对象

构造函数: new函数名() this指向new创建的实例对象

    function fn () {
        console.log(this)
      }
      //1.普通函数调用
      fn()//this指向window

      //2.对象方法
      let obj = {
          name:'ikun',
          age:32,
          eat : fn
      }
      obj.eat()//this指向对象

      //3.构造函数
      new fn()//this指向new创建的实例对象

函数三种调用模式注意点：
(1) this指向无法被修改的
(2) 定时器的this默认一定是window

2. 函数的上下文调用

函数上下文调用模式 : 修改this指向

* 三种语法都是修改this，不同点是传参方式不同
       1. 函数名.call(修改后的this,实参1,实参2………………)
          * 场景： 适用于一个形参
       2. 函数名.apply(修改后的this,数组/伪数组)
          * 场景： 适用于多个形参
       3. 函数名.bind(修改后的this,实参1,实参2………………)
          * bind() 不会立即执行函数，而是得到一个修改this之后的新函数
          * 场景： 适用于不需要立即执行的函数 （ 定时器函数,事件处理函数 ）

函数上下文三种调用方式区别

       1. 传参方式不同： call用于单个参数，apply用于多个参数
       2. 执行机制不同： call与apply会立即执行， bind不会立即执行   

注意 : 上下文模式：this指向只能是引用类型
如果你传的不是引用类型， 编译器会自动帮你转成对应的引用类型

3. 借用函数

原理 : 利用要使用方法的原型调用这个方法,再用call改变方法的this指向 (指向真正要使用这个方法的对象)

  /* 借用函数原理 */

      //构造函数
      function Person (name, age) {
        this.name = name
        this.age = age
      }

      //原型对象
      Person.prototype.eat = function () {
        console.log(this)

        console.log(`${this.name}要吃饭`)
      }

      //实例对象
      let p1 = new Person('张三', 20)

      /* 调用eat方法 */
      p1.eat() //this 指向p1
      Person.prototype.eat() //this 指向原型

      /* ******************* */

      function Student (name, age) {
        this.name = name
        this.age = age
      }

      // 原型对象
      Student.prototype.learn = function () {
        console.log('我要敲代码')
      }

      //实例对象
      let s1 = new Student('班长', 38)

      console.log(s1)

      s1.learn()
      /* s1不能调用eat，因为eat是Person原型中的方法
      借用Person原型中的eat，然后把this改成s1. 相当于s1调用eat  
      */
      Person.prototype.eat.call(s1)

4. 数据检测

常规 : typeof 数据

  数组和null的类型检测不出来是Object

万能检测

语法 :Object.prototype.toString.call ( 数据 ) 得到的是一个特殊的字符串 可以检测所有数据的类型

      let num = 10
      let str = 'abc'
      let bol = true
      let und = undefined
      let nul = null
      let arr = [10, 20, 30]
      let fn = function () {}
      let obj = { name: '张三' }

      console.log( Object.prototype.toString.call(num) )//['object Number']
      console.log( Object.prototype.toString.call(str) )//['object String']
      console.log( Object.prototype.toString.call(bol) )//['object Boolean']
      console.log( Object.prototype.toString.call(und) )//['object Undefined']
      console.log( Object.prototype.toString.call(nul) )//['object Null']
      console.log( Object.prototype.toString.call(arr) )//['object Array']
      console.log( Object.prototype.toString.call(fn) )//['object Function']
      console.log( Object.prototype.toString.call(obj) )//['object Object']

    //   console.log(typeof  num)//'number'
    //   console.log(typeof  str)//'string'
    //   console.log(typeof  bol)//'boolean'
    //   console.log(typeof  und)//'undefined'
    //   console.log(typeof  nul)//'object'
    //   console.log(typeof  arr)//'object'
    //   console.log(typeof  fn)//'function'
    //   console.log(typeof  obj)//'object'

5. 递归函数

1.递归函数 ： 在函数内部调用自己

2.递归函数特点： 与循环类似

• 一般开发中能用循环实现的，也可以用递归实现。只是写法不同
• 使用递归也要有结束条件，否则会导致死循环

 //单函数递归： 自己调用自己  
      function fn () {
        console.log(111)
        //递归调用
        // fn()
      }

      fn()

 //双函数递归 ： 两个函数互相调用
      function fn1(){
        console.log(6666)
        // fn2()
      }

      function fn2(){
        console.log(8888)
        // fn1()
      }

      fn1()