函数 

<!--
1. 什么是函数?
  * 具有特定功能的n条语句的封装体
  * 只有函数是可执行的, 其它类型的数据是不可执行的
  * 函数也是对象
2. 为什么要用函数?
  * 提高代码复用
  * 便于阅读和交流
3. 如何定义函数?
  * 函数声明
  * 表达式
4. 如何调用(执行)函数?
  * test()
  * new test()
  * obj.test()
  * test.call/apply(obj)
-->
<script type="text/javascript">

  function f1 () { // 函数声明
    console.log('f1()')
  }
  var f2 = function () { // 表达式
    console.log('f2()')
  }

  /*
  编写程序实现以下功能需求:
    1. 根据年龄输出对应的信息
    2. 如果小于18, 输出: 未成年, 再等等!
    3. 如果大于60, 输出: 算了吧!
    4. 其它, 输出: 刚好!
  */
  function showInfo (age) {
    if(age<18) {
      console.log('未成年, 再等等!')
    } else if(age>60) {
      console.log('算了吧!')
    } else {
      console.log('刚好!')
    }
  }
  //调用
  showInfo(17)
  showInfo(22)

  /*
   函数也是对象
   */
  function fn() {

  }
  console.log(fn instanceof Object) // 是Object类型的实例
  console.log(fn.prototype) // 内部有属性
  console.log(fn.call) // 内部有方法
  fn.t1 = 'atguigu' // 可以添加属性
  fn.t2 = function () { // 可以添加方法
    console.log('t2() '+this.t1)
  }
  fn.t2()
</script>

 回调函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_回调函数</title>
</head>
<body>
<button id="btn">测试点击事件</button>
<!--
1. 什么函数才是回调函数?
  * 你定义的
  * 你没有直接调用
  * 但最终它执行了(在特定条件或时刻)
2. 常见的回调函数?
  * DOM事件函数
  * 定时器函数

  * ajax回调函数(后面学)
  * 生命周期回调函数(后面学)
-->
<script type="text/javascript">

  //1. DOM事件函数
  var btn = document.getElementById('btn')
  btn.onclick = function () {
    alert(this.innerHTML)
  }

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

</body>
</html>

 IIEF

<!--
1. 理解
  * 全称: Immediately-Invoked Function Expression 立即调用函数表达式
  * 别名: 匿名函数自调用
2. 作用
  * 隐藏内部实现
  * 不污染外部命名空间
-->
<script type="text/javascript">
  (function (i) {
    var a = 4
    function fn() {
      console.log('fn ', i+a)
    }
    fn()
  })(3)
</script>

 函数中的this

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

<script type="text/javascript">
  function Person(color) {
    console.log(this)
    this.color = color;
    this.getColor = function () {
      console.log(this)
      return this.color;
    };
    this.setColor = function (color) {
      console.log(this)
      this.color = color;
    };
  }

  Person("red"); //this是谁?

  var p = new Person("yello"); //this是谁?

  p.getColor(); //this是谁?

  var obj = {};
  p.setColor.call(obj, "black"); //this是谁?

  var test = p.setColor;
  test(); //this是谁?

  function fun1() {
    function fun2() {
      console.log(this);
    }

    fun2(); //this是谁?
  }
  fun1();
</script>

 

posted @ 2018-06-08 23:53  EthanCheung  阅读(110)  评论(0)  编辑  收藏  举报