目录
js补漏
箭头函数
一个函数表达式如下：
const fun = function() {
return 200;
}
以上的函数函数表达式用箭头函数可以写为：
const fun = () => {
return 200;
}
小括号里面的是参数，没有参数可以写成上面的形式。如果只有一个参数，可以写为：
const fun = x => {
return x;
}
箭头函数有一个语法：如果函数体中只有一行代码，那么这个return可以省略（json除外），为以下形式：
const fun = () => 200;
箭头函数和普通函数的区别： this指向
有一个对象：
let obj = {
name: "小明",
age: 2,
sayHello() {
console.log("我是" + this.name);
},
}
obj.sayHello();
上面的代码可以输出我是小明
但是如果我们加一个定时器：
let obj = {
name: "小明",
age: 2,
sayHello() {
setTimeout( function () {
console.log("我是" + this.name);
}, 500)
},
}
obj.sayHello();
以上代码并没有输出我们所期望的“我是小明”，这时候我们在定时器内打印this指向，会发现this指向windows:
let obj = {
name: "小明",
age: 2,
sayHello() {
setTimeout( function () {
console.log(this);
console.log("我是" + this.name);
}, 500)
},
}
obj.sayHello();
但是如果我们把对象内部的函数写成箭头函数:
let obj = {
name: "小明",
age: 2,
sayHello() {
setTimeout(() => {
console.log("我是" + this.name);
}, 500)
},
}
obj.sayHello();
会发现控制台打印出了“我是小明”。
这就是箭头函数和普通函数的区别：this指向不同：普通函数，谁调用这个函数this指向谁；箭头函数在哪里定义函数，this指向谁。
this指向
1、直接在script标签内部输出this,指向全局
<script>
// 直接输出this指向全局对象
console.log(this);
</script>
2、this放在方法中，this指向调用这个方法的对象：
这个sayName()方法是由cat这个对象调用，所以this指向cat
const cat = {
name: "喵喵",
sayName() {
console.log("我是" + this.name)
}
}
cat.sayName();
3、全局函数的this指向windows(全局对象)
这个函数的调用其实是window.fun();，也就是fun()这个方法有window这个对象调用，所以this指向window
const fun = function() {
console.log(this);
};
fun(); //fun() = window.fun()
4、事件中的this，指向触发这事件的DOM。
<body>
<button>点击</button>
</body>
<script>
let btn = document.querySelector("button");
btn.onclick = function() {
console.log(this);
}
</script>
上面代码的this指向触发点击事件的button
5、构造函数中的this，指向new创建的对象。
构造函数一般大写
构造函数：用来创建对象
new关键字做了什么：new会创建对象，将构造函数中的this指向创建出来的对象
function F() {
this.name = "小明";
console.log(this);
};
let f = new F();
console.log(f);
6、箭头函数的this。
箭头函数的this可以有三种理解方式：
1、普通函数，谁调用指向谁；箭头函数，在哪里定义指向谁。
2、箭头函数外指向谁就指向谁。
3、箭头函数没有this。
深拷贝和浅拷贝
浅拷贝：
最低0.47元/天 解锁文章
2765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
