如何去正确理解Javascript的[函数]

如何去正确理解Javascript的[函数]

Scroll Down

函数的理解和使用

  • 什么是函数?
    function f1 () { // 函数声明
      console.log('f1()')
    }
    var f2 = function () { // 表达式
      console.log('f2()')
    }
    
    • 用来实现特定功能的, n条语句的封装体
    • 只有函数类型的数据是可以执行的, 其它的都不可以
  • 为什么要用函数?
    • 提高复用性
    • 便于阅读交流
  • 函数也是对象
    • instanceof Object===true
    • 函数有属性: prototype
    • 函数有方法: call()/apply(),(可以让一个函数成为指定任意对象的方法进行调用)
    • 可以添加新的属性/方法
  • 函数的3种不同角色
    • 一般函数 : 直接调用
    • 构造函数 : 通过new调用
    • 对象 : 通过.调用内部的属性/方法
  • 函数中的this
    • 显式指定谁: obj.xxx()
    • 通过call/apply指定谁调用: xxx.call(obj)
    • 不指定谁调用: xxx() : window
    • 回调函数: 看背后是通过谁来调用的: window/其它
  • 匿名函数自调用:
    (function(w, obj){
      //实现代码
    })(window, obj)
    
    • 专业术语为: IIFE (Immediately Invoked Function Expression) 立即调用函数表达式
    • 隐藏内部实现
    • 不污染外部命名空间
  • 回调函数的理解
    • 什么函数才是回调函数?
      • 你定义的
      • 你没有调用
      • 但它最终执行了(在一定条件下或某个时刻)
    • 常用的回调函数
      • dom事件回调函数
      • 定时器回调函数
      • ajax请求回调函数(后面讲解)
      • 生命周期回调函数(后面讲解)
  //1. DOM事件函数
  var btn = document.getElementById('btn')
  btn.onclick = function () {
    alert(this.innerHTML)
  }

  //2. 定时器函数
  setInterval(function () {
    alert('到点啦!')
  }, 2000)

什么是this

  1. this是什么?
  • 一个关键字, 一个内置的引用变量
  • 在函数中都可以直接使用this
  • this代表调用函数的当前对象
  • 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的
  1. 如何确定this的值?
  • test()
  • obj.test()
  • new test()
  • test.call(obj) 前置知识:
  • 本质上任何函数在执行时都是通过某个对象调用的,没有指定的话就是window