码迷,mamicode.com
首页 > 其他好文 > 详细

272 函数的理解和使用:回调函数,匿名函数自调用IIFE,**函数中的this**

时间:2020-01-29 17:54:09      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:func   为什么   instance   本质   onclick   不同   ceo   程序   事件   

  • 什么是函数?

    • 用来实现特定功能的, 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请求回调函数(后面讲解)
      • 生命周期回调函数(后面讲解)

函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>04_函数</title>
</head>

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

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

        fn1()
        fn2()

        var obj = {}

        function test2() {
            this.xxx = 'atguigu'
        }
        // obj.test2()  不能直接, 根本就没有
        test2.call(obj) // obj.test2()   // 可以让一个函数成为指定任意对象的方法进行调用
        console.log(obj.xxx)  /// atguigu
    </script>
</body>

</html>

回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05_回调函数</title>
</head>

<body>
    <button id="btn">测试点击事件</button>
    <!--
1. 什么函数才是回调函数?
  1). 你定义的
  2). 你没有调
  3). 但最终它执行了(在某个时刻或某个条件下)
2. 常见的回调函数?
  * dom事件回调函数 ==>发生事件的dom元素
  * 定时器回调函数 ===>window

  * ajax请求回调函数(后面讲)
  * 生命周期回调函数(后面讲)
-->
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() { // dom事件回调函数
            alert(this.innerHTML)
        }

        //定时器
        // 超时定时器
        // 循环定时器
        setTimeout(function() { // 定时器回调函数
            alert('到点了' + this)
        }, 2000)

        /*var a = 3
        alert(window.a)
        window.b = 4
        alert(b)*/
    </script>

</body>

</html>

自调用函数IIFE

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>06_IIFE</title>
</head>

<body>
    <!--
1. 理解
  * 全称: Immediately-Invoked Function Expression
2. 作用
  * 隐藏实现
  * 不会污染外部(全局)命名空间
  * 用它来编码js模块
-->
    <script type="text/javascript">
        (function() { //匿名函数自调用
            var a = 3;
            console.log(a + 3);
        })();
        var a = 4;
        console.log(a);

        ;
        (function() {
            var a = 1;

            function test() {
                console.log(++a);
            }

            window.$ = function() { // 向外暴露一个全局函数
                return {
                    test: test
                }
            }
        })();

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

</body>

</html>

函数中的this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>07_函数中的this</title>
</head>

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

    <script type="text/javascript">
        function Person(color) {
            this.color = color;
            console.log('此时的this是:', this);
            // console.log(this.color);

            this.getColor = function() {
                console.log(this)
                return this.color;
            };
            this.setColor = function(color) {
                console.log(this)
                this.color = color;
            };
        }

        Person("red"); //this是谁? window  【控制台输出 此时的this是: Window】

        new Person('pink'); // Person?{color: "pink"} 【因为new的最后会返回创建的新对象。】

        var p = new Person("yello"); // this是谁? p 【Person?{color: "yello"}】

        p.getColor(); //this是谁? p 【Person?{color: "yello", getColor: ?, setColor: ?}】

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

        // 【把p.setColor函数的内存地址复制给test,test指向p.setColor函数。】
        var test = p.setColor;
        test(); // this是谁? window

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

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

</html>

272 函数的理解和使用:回调函数,匿名函数自调用IIFE,**函数中的this**

标签:func   为什么   instance   本质   onclick   不同   ceo   程序   事件   

原文地址:https://www.cnblogs.com/jianjie/p/12240674.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!