函数基础与高级用法-CSDN博客

本文链接：https://blog.csdn.net/qq_45568705/article/details/102095761

函数

什么是函数
- 实现特定功能的n条语句的封装体
- 只有函数是可以执行的，其他类型的数据不能执行
为什么要用函数
- 提高代码复用
- 便于阅读和交流
如何定义函数
- 函数声明
- 表达式

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

如何调用（执行）函数
- test():直接调用
- obj.test():通过对象调用
- new test():new 调用
- test.call/apply(obj):临时让test成为obj的方法进行调用 （自己还不太明白）
-

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

简单地例子

/*
编写程序实现以下功能需求
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(90);

回调函数

什么函数是回调函数
- 你定义的
- 你没有调用
- 最终它执行了
常见的回调函数
- dom事件回调函数
- 定时器回调函数
- ajax请求回调函数（后面学习）
- 生命周期回调函数

<body>
		<button id="btn">测试点击事件</button >
    	<script type="text/javascript">
			var btn=document.getElementById("btn");
			btn.onclick=function(){//dom事件回调函数
				alert(this.HTML);
			};
			
			/*定时器
			 * 超时定时器
			 * 循环定时器
			 */
			setTimeout(function(){//定时器回调函数
				alert("到点了");
				
			},2000);
		</script>	
</body>

IIFE

理解
- 全称：Immediately - Invoked Function Expression
- 立即执行函数表达式
作用
- 隐藏实现
- 不会影响外部（全局）命名空间

(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()//$是一个函数，$执行后返回的是一个对象

此处代码还有很多困惑，需要多加理解

函数中的this

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

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("yellow");//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();