这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
一、箭头函数与普通函数
箭头函数表达式语法比函数表达式更简洁，并且没有自己的
this，arguments，super或new.target等，也不能用作构造函数。箭头函数表达式更适用于那些本来需要匿名函数的地方。
普通函数，函数的名字叫shuai_ge
var x="shaui_ge"
function shuai_ge(){
console.log(${x="刘恺卿"});
}
箭头函数
var x="shuai_ge";
(() => x="刘恺卿")()
console.log(x);
二、箭头函数与匿名函数
匿名函数
function (){
console.log("刘恺卿");
}
运行匿名函数(单独运行时结尾加上括号)
(function (){
//此时会输出刘恺卿
console.log("刘恺卿");
})(//传入的值)
箭头函数相当于匿名函数，并且简化了函数定义
但实际上，箭头函数和匿名函数有个明显的区别：匿名函数的this指向执行时上下文（由于执行时的
全局性，this一般指向window）；箭头函数内部的this与父级元素this绑定
三、this
1：this永远指向一个对象；
2：this的指向完全取决于函数调用的位置；
3：this指向可以动态改变，只有在运行时才知道this指向
eg1.
var A = {
name: '张三',
f: function () {
console.log('姓名：' + this.name);
}
};
var B = {
name: '李四'
};
B.f = A.f;
B.f() // 姓名：李四
A.f() // 姓名：张三
eg2.
function foo() {
console.log(this.a);
}
var obj2 = {
a: 2,
fn: foo
};
var obj1 = {
a: 1,
o1: obj2
};
obj1.o1.fn(); // 2
this的事件绑定
function clickFun(){
this // 此函数的运行环境在全局window对象下，因此this指向window;
}
当事件触发时，属性值就会作为JS代码被执行，当前运行环境下没有clickFun函数，因此浏览器就需要跳出当前运行环境，在整个环境中寻找一个叫clickFun的函数并执行这个函数，所以函数内部的this就指向了全局对象window；如果不是一个函数调用，直接在当前节点对象环境下使用this，那么显然this就会指向当前节点对象；
四、匿名函数和箭头函数的this指向区别
eg1.匿名函数的全局性
function fun() {
(function () {
console.log(this);
})()
}
fun();
eg2.匿名函数在obj中this指向对象
var name = 'window'
var person = {
name :'Alan',
sayOne:function () {
console.log(this.name)
},
sayTwo:function () {
return function () {
console.log(this.name)
}
}
}
person.sayOne()
person.sayTwo()()
* 函数内部的this指向调用者
* sayOne调用者是person对象，所以this指向person；
- sayTwo的调用者虽然也是person对象，但是区别在于这次调用并没有打出this而是在全局返回了一个匿名函数
,而这个匿名函数不是作为某个对象的方法来调用执行，是在全局执行，最后的执行者就是window
eg3.匿名函数性质运用
var name = 'window'
var person = {
name :'one',
wrap: function(){
(function (){
console.log(this.name)// window
})()
function sum(){
console.log(this.name)// window
}
sum()，
good: function sum2() {
console.log(this.name)
}
}
}
person.wrap()
person.good()
- function是调用自身的匿名函数 ，this指向全局，sum被function调用，sum的this指向function，也是全局
- good被person直接调用，this指向person
eg4.箭头函数this
var name='window';
var obj = {
name:'obj',
nameprintf:()=>{
console.log(this.name)
}
}
obj.nameprintf()
- nameprintf是箭头函数，this与父级元素obj的this绑定，而obj的this指向window，因此nameprintf的this也指向window
eg5.匿名函数和箭头函数结合
var name="window"
var obj={
num:4,
name:obj,
fn:function(){
console.log(this.name);
(() => {
console.log(this.name);
})();
}
}
obj.fn();
var w = obj.fn;
w();
var obj1 = {name:'obj1', fn:obj.fn}
obj1.fn();
- 箭头函数中的this包含在匿名函数中，匿名函数被function调用，因此箭头函数的this指向与function中的相同
- obj调用fn，因此fn的this指向obj，输出为obj
- w()是新创建的定义在window下的变量，this指向window，输出为window
- obj1调用obj中的fn函数，因此调用对象为obj1，this指向obj1
