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

函数的理解和使用

• 什么是函数?

  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还没有确定, 只有在执行时才动态确定(绑定)的

2. 如何确定this的值?

• test()
• obj.test()
• new test()
• test.call(obj) 前置知识:
• 本质上任何函数在执行时都是通过某个对象调用的,没有指定的话就是window