函数、回调函数、IIFE、语句分号、this

最新推荐文章于 2022-07-04 13:55:44 发布

原创最新推荐文章于 2022-07-04 13:55:44 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

js基础总结专栏收录该内容

4 篇文章

订阅专栏

本文详细阐述了函数的概念，包括其定义、调用方式及作用，重点介绍了回调函数的特性和应用场景，如DOM事件、定时器及AJAX请求中的使用，并探讨了IIFE和this关键字在JavaScript中的应用。

函数
1什么是函数？
实现特定功能的n条语句的封装体
只有函数是可以执行的，其他类型的数据不能执行
2为什么要使用函数？
提高代码复用
便于阅读交流
3如何定义函数？
函数声明
函数表达式
4如何调用函数？
函数名（）：直接调用
obj.函数名（）：对象调用
new 函数名（）：new调用
函数名.call/apply(obj) ：临时让函数成为obj的方法进行调用
回调函数
1什么函数才是回调函数？
你定义的
你没有调用
最终它执行了
2常见的回调函数？
dom事件回调函数
定时器回调函数
-
ajax请求回调函数
生命周期回调函数
-
（前端开发： 1.画界面（主要是css） 2.交互（用户交互前后台交互））
IIFE
1.理解 IIFE
全称 Immediately-Invoked Function Expression(立即执行函数)
2.作用
隐藏实现（）
不会污染全局命名空间
用它编写js模块
this
1.this是什么
（任何函数本质上都是通过某个对象调用的，如果没有直接指定就是window）
所有函数内部都有一个变量this
他的值是调用函数的当前对象
2如何确定this的值
单独的函数中，this是 window 。严格模式下是undefined
构造函数创建新对象时，this是那个对象
作为方法被调用时，this是那个调用的对象
事件中，this是接收事件的元素
call和apply的方法中，this是括号中的第一个参数对象。若apply中第一个参数为null，js严格模式下是调用apply方法的对象，非严格模式下成为全局对象
js分号问题
js一条语句结束后面可以不加分号。没有应不应该，只有喜不喜欢
在下面两种情况不加分号会有问题
小括号开头前一条语句
中括号开头前一条语句
解决办法：在行首加分号
例子：vue.js库
知乎热议：http://www.zhihu.com/question/20298345

	-->
</head>
<body>
	<button type="button" id="btn">测试点击</button>
	<script type="text/javascript">
		/**函数**/
		var obj={}
		function f(){
			this.xxx = "liu"
		}
		f.call(obj); //obj.f()  //可以让一个函数成为指定任意对象的方法进行调用
		console.log(obj.xxx);  //liu 
			 
			 
	    /*******回调函数**/
		
		//1.dom事件的回调函数
		document.getElementById("btn").onclick = function(){
			alert(this.innerHTML)
		}
		 //2.定时器回调函数
		   //超时定时器
		   //循环定时器
		   
		   setTimeout(function(){
			   alert("到点了")
		   },2000)
		   
		/*立即执行函数*/
		   //匿名函数自调用
	   ;(function(){    //加分号,与前面隔开,否则报错
		   var a=43;
		   console.log(a)
		   function test(){
			   console.log(++a)
		   }
		   window.$ = function(){  //向外暴露一个全局函数
			   return {
				   test: test
			   }
		   }
	   })() //43
	   
	   $().test()  //44
	   
	   
	   
	   
	   /*函数的this*/
	   function Person(name,age){
		   this.name = name;
		   this.age = age;
		   console.log(this)
		   this.getAge = function(age){
			   console.log(this)
		   }
		   this.setAge = function(age){
			   console.log(this)
			   this.age=age
			
		   }
	   }
	   Person('tom',12)  //this是 window
	   var p = new Person("bob",15)  //this是p
	   p.getAge()// this是p
	   var obj={age:9}
	   p.setAge.call(obj) //this是obj
	   
	   
	   //不加分号理解成 p.setAge.call(obj)[1,2,3].for........报错
	   ;[1,2,3].forEach(function(value){
		   console.log(value)
	   })




	</script>
</body>