<!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();
}
}
obj6.desc();
obj6.desc1();
</script>
</body>
</html>
上述运行结果:
1.箭头函数中的this是在函数定义的时候就确定下来的,而不是在函数调用的时候确定的;
2.箭头函数中的this指向父级作用域的执行上下文;(技巧:因为javascript中除了全局作用域,其他作用域都是由函数创建出来的,所以如果想确定this的指向,则找到离箭头函数最近的function,与该function平级的执行上下文中的this即是箭头函数中的this)
3.箭头函数无法使用apply、call和bind方法改变this指向,因为其this值在函数定义的时候就被确定下来。