【JavaScript高级】4、基础总结深入（函数）

一、函数

1. 什么是函数?
* 实现特定功能的n条语句的封装体
* 只有函数是可以执行的，其他类型的数据不能执行
2. 为什么要用函数?
* 提高代码复用
* 便于阅读交流
3. 如何定义函数?
* 函数声明
* 表达式
4. 如何调用(执行)函数?
* test()：直接调用
* obj.test()：通过对象调用
* new test()：new调用
* test.call/apply(obj)：临时让test成为obj的方法进行调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_函数</title>
</head>
<body>

<script type="text/javascript">
  /*
  编写程序实现以下功能需求:
    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(20);
  showInfo(70);

  function fn1() {  // 函数声明
    console.log("fn1()");
  }
  var fn2 = function () {  // 表达式
    console.log("fn2()");
  };
  fn1();
  fn2();

  var obj ={};
  function test() {
    this.xxx = "hello";  // 这里this相当于obj
  }
  //obj.test();  不能直接调用test()函数, 根本就没有这个方法
  test.call(obj); // 理论上相当于obj.test()，但实际上不能用obj.test()   // 可以让一个函数成为指定任意对象的方法进行调用
  console.log(obj.xxx);

</script>
</body>
</html>

二、回调函数

1. 什么函数才是回调函数?
1). 你定义的
2). 你没有调
3). 但最终它执行了(在某个时刻或某个条件下)
2. 常见的回调函数?
* dom事件回调函数 ==>发生事件的dom元素
* 定时器回调函数 ===>window

* ajax请求回调函数(后面讲)
* 生命周期回调函数(后面讲)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05_回调函数</title>
</head>
<body>
<button id="btn">测试点击事件</button>

<script type="text/javascript">
  document.getElementById("btn").onclick = function () {  // DOM事件回调函数
    alert(this.innerHTML);
  }

  //定时器
    //延时定时器
    //循环定时器
    setTimeout(function () {  // 定时器回调函数
      alert("2秒"+this);
    },2000);
</script>

</body>
</html>

三、IIFE(立即执行函数表达式)（匿名函数自调用）

1. 理解
* 全称: Immediately-Invoked Function Expression
2. 作用
* 隐藏实现
* 不会污染外部(全局)命名空间
* 用它来编码js模块

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_IIFE</title>
</head>
<body>

<script type="text/javascript">
  (function () { // 别名：匿名函数自调用
    var a = 3
    console.log(a + 3)  // 6
  })()
  var a = 4
  console.log(a)  // 4

  ;(function () {
    var a = 1
    function test () {
      console.log(++a)  // 2
    }
    window.$ = function () { // 向外暴露一个全局函数
      return {
        test: test
      }
    }
  })()

  $().test() // 1. $是一个函数 2. $执行后返回的是一个对象

</script>

</body>
</html>

四、函数中的this

1. this是什么?
* 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
* 所有函数内部都有一个变量this
* 它的值是调用函数的当前对象
2. 如何确定this的值?
* test(): window
* p.test(): p
* new test(): 新创建的对象
* p.call(obj): obj

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>07_函数中的this</title>
</head>
<body>

<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是谁? window

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

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

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

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

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

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

【JavaScript高级】4、基础总结深入（函数）

一、函数

二、回调函数

三、IIFE(立即执行函数表达式)（匿名函数自调用）

四、函数中的this

猜你喜欢