1 Function函数的定义
方式1 函数声明方式 function 关键字 (命名函数)
function fn(){}
方式2 函数表达式(匿名函数)
var fn = function(){}
方式3 new Function()
var f = new Function('a', 'b', 'console.log(a + b)'); f(1, 2); var fn = new Function('参数1','参数2'..., '函数体')
Function 里面参数都必须是字符串格式第三种方式执行效率低，也不方便书写，因此较少使用所有函数都是 Function 的实例(对象) 函数也属于对象
<!-- 函数定义的方式 --> <script> // 方式1 函数声明方式 function 关键字 (命名函数) function fn(){ console.log("fn") // 方式2 函数表达式(匿名函数) let fn2=function(){ console.log("fn2") // 方式3 new Function() // Function 里面参数都必须是字符串格式 // 第三种方式执行效率低，也不方便书写，因此较少使用 // 所有函数都是 Function 的实例(对象) // 函数也属于对象 // var fn3=new Function('a','b','console.log(a + b)') fn3(3,4) } fn2() } fn() </script>
2 Function函数的调用
<script> /* 1. 普通函数 */ function fn() { console.log('出道即是顶峰'); console.log(this) } fn(); /* 2. 对象的方法 */ var o = { sayHi: function() { console.log('路漫漫其修远兮,吾将上下而求索'); console.log(this) } } o.sayHi(); /* 3. 构造函数*/ function Star() { console.log("构造函数") console.log(this) }; new Star(); /* 4. 绑定事件函数*/ var btn =document.querySelectorAll("btton") btn.onclick = function() {}; // 点击了按钮就可以调用这个函数 /* 5. 定时器函数*/ setInterval(function() { console.log(this) }, 1000); // 这个函数是定时器自动1秒钟调用一次 /* 6. 立即执行函数(自调用函数)*/ (function() { console.log('人生的巅峰'); console.log(this) })(); </script>
3 Function改变this指向
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Function改变this指向</title> </head> <body> <!-- call()方法调用一个对象。简单理解为调用函数的方式，但是它可以改变函数的 this 指向 应用场景: 经常做继承. --> <script> const o={ name:"我叫张三" } function fn(a,b){ console.log((this)) console.log(a+b) } fn(1,2)// 此时的this指向的是window 运行结果为3 fn.call(o,2,3) 此时的this指向的是对象o,参数使用逗号隔开,运行结果为3 </script> <!-- apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向。 应用场景: 经常跟数组有关系 --> </body> </html>
4 functionApply
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> const o = { name: 'andy' } function fn(a, b) { console.log(this); console.log(a+b) }; fn(1,2)// 此时的this指向的是window 运行结果为3 fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3 </script> </body> </html>
5 FunctionBind
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var o = { name: 'andy' }; function fn(a, b) { console.log(this); console.log(a + b); }; var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数 f();//调用新函数 this指向的是对象o 参数使用逗号隔开 </script> </body> </html>
6 闭包
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 变量根据作用域的不同分为两种：全局变量和局部变量。 1. 函数内部可以使用全局变量。 2. 函数外部不可以使用局部变量。 3. 当函数执行完毕，本作用域内的局部变量会销毁 --> <!-- 闭包（closure）指有权访问另一个函数作用域中变量的函数。简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。 --> <script> function all(){ var num=1; function all2(){ console.log(num); var age=22; function all3(){ console.log(age) } all3() } all2() } all() </script> </body> </html>
