09(function)箭头函数

最新推荐文章于 2024-06-03 09:20:03 发布

七色的天空

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量334

点赞数 8

分类专栏： 09_ES6 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/q506174602/article/details/136485782

版权

09_ES6 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>箭头函数</title>
</head>
<body>
	<script type="text/javascript">
		function func() {
			return '普通函数-命名函数';
		}

		// func();

		var func1 = function() {
			return '匿名函数-函数表达式'
		}

		// func1();


		/**
		 * 箭头函数:  () => {},  => 一体的
		 * 1.一个参数的时候: 可以省略小括号 x => {},
		 *   如果多于一个,必须使用小括号包裹, 看func4
		 * 2.如果执行程序只有一句代码, 可以省略花括号 , 看 func5
		 * 3.箭头函数中没有arguments对象（类数组对象）
		 * (4.this的指向问题, 在哪里定义函数 this指向谁)
		 * 4.不能通过 call  apply  bind  改变 this 的指向
		 * 
		 **/ 
		 var func3 = (x) => {
		 	// ... 执行程序
		 	// this
		 	// console.dir(arguments);会报错
		 	return '我是箭头函数--3:' + x;
		 }
		 console.dir(func3);
		 console.log(func3(3));

		 var func4 = x => {
		 	// ... 执行程序
		 	return '我是箭头函数--4:' + x;
		 }
		 console.log(func4(4));

		 var func5 = x => '我是箭头函数--5:' + x;
		 console.log(func5(5));

		 var obj6 = {
		 	name: "张三",
		 	age: 18,
		 	desc: () => {
		 		console.log('张三的描述');
		 		/** 箭头函数,在哪里定义函数,this指向谁,或者说它不改变this的指向
					箭头函数中this指向定义时所在的对象,而不是调用时所在的对象.
					
					这里的箭头函数,也就是 desc ,所在的作用域 是 最外层的js环境,因为:没有其他函数包裹;
					然后最外侧的js环境指向的对象是window对象,所以,这里的this指向的是window对象.

					定义时候绑定, 就是this是继承自父级的执行上下文环境中的this
					比如这里的箭头函数中的this,箭头函数本身与desc平级以key: value的形式出现,
					也就是箭头函数本身所在的对象为 obj6,而obj6的父执行上下文是window,因此这里的this
					实际上就是表示的是window

					(this只有在函数被调用或者通过构造函数 new Object()的形式出现时才会有this)
					箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,而是因为箭头函数
					根本没有自己的this,导致内部的this就是外层代码块的this,正因为他没有this,所有也就不能
					用作构造函数
				*/
		 		console.log(this); // window
		 	},
		 	desc1: function() {
		 		console.log('二次描述', arguments);
		 		console.log(this); // obj6
		 		var func7 = () => {
		 			console.log('func7-----------:', this);
		 		}
		 		func7();
		 		return 'func7';
		 	},
		 	desc2: () => {
		 		var func8 = () => {
		 			console.log('func8-----------:', this);
		 		}
		 		func8();
		 	}
		 }
		 console.log(obj6.desc1());
	</script>
</body>
</html>

上述运行结果：