ES6:ES6的箭头函数考点和this指向考点(五颗星)

1.箭头函数语法

普通函数声明式:

<script>
	function fn(a,b){
		return a+b
	}
	console.log(fn(1,2))  //3
</script>

函数表达式:

<script>
	var fn = function(a,b){
	  return a+b
	}
  	console.log(fn(1,2))  //3
</script>

立即执行函数:(函数)(参数)----第一个括号将函数变成表达式

<script>
	(function(a,b){
	console.log(a+b)
	})(1,2)  //3
</script>

箭头函数:(形参)=>{函数体}

<script>
	let fn=(a,b)=>{
	  return a+b
	}
	console.log(fn(1,2))//3
</script>

2.箭头简写和注意点

箭头函数 一般用在回调函数中,出现的目的也是为了简化回调函数 (函数作为另一个函数的参数使用)

箭头函数写法的注意点:

            1. 函数体只有一句话,可以省略{}不写

            2. 函数体只有一句话(并且要返回), {}和return都可以不写

            3. 函数只有一个参数,可以省略()不写

            4. 反之,多个参数,多行函数体----肯定不能简写

            5. 如果需要返回一个对象,不能简写(函数的{}和对象的{}打起来了)

            6. arguments在箭头函数中不能使用,但是可以使用rest参数

 <script>
        // 1. 无参无返
	  let fn1 = () => console.log("今天天气晴朗");
	  fn1();//今天天气晴朗

	  // 2. 无参有返
	  let fn2 = () => "今天天气晴朗";
	  console.log(fn2());//今天天气晴朗

	  // 3. 有一个参数的函数
	  let fn3 = a=>console.log(a);
	  fn3(3);//3

	  // 4. 多参数,多行函数体,还有返回
	  let fn4 = (x,y)=>{
		  let sum = x+y;
		  return sum;
	  }
	  console.log(fn4(1,2));//3

	  // 5. 返回一个对象
		/*
			预期的返回数据类型
			{
				x:1,
				y:2
			}
		*/
	  let fn5 = (a,b)=>{
		  return {x:a,y:b};
	  }
	  console.log(fn5(1,2));//{x:1,y:2}

	  // 6. rest参数的使用
		/* arguments参数不能使用在箭头函数中
			  let fn6 = ()=>{
				  console.log(arguments);
			  } 
			  console.log(fn6(1,2,2,3,"ss"))//报错:Uncaught ReferenceError: arguments is not defined
		*/
	  let fn6 = (...rest)=>rest
	  console.log(fn6(1,2,2,3,"ss"))//[1,2,2,3,"ss"]
 </script>
    

3.this指向

this指向---------this一般写在函数中

this默认指向window(假设全部指向window):

1.全局中使用------this指向window(全局对象)

<script>
        console.log(this)//window
        function fn(){
            console.log(this)//window
        }
        fn()
</script>

2.定时器中使用----this指向window(全局对象)

<script>
        // setTimeout是window下面的方法,所以setTimeout==window.setTimeout
        // window.setTimeout(function(){或如下
        setTimeout(function(){
            console.log(this)//window
        },1000)
</script>

改变了this指向:

3.事件中使用------this指向事件源

<button id="btn">按钮</button

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论
在3.5箭头函数中使用——this指向外层作用域中,let声明的name并不会挂载到window上,即name的值并没有赋值成功到window.name上。同时window本身存在name属性,只不过值为空,因此在调用obj.eat()时打印的this.name等价于window.name,最后值应该为空,而不是张三
点赞 回复 分享
发布于 2023-09-22 12:45 广东

相关推荐

点赞 评论 收藏
分享
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务