JS(第九课)深刻的去理解函数._星辰镜的博客-CSDN博客
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>
