<!-- 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>