目录
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。
深拷贝和浅拷贝
浅拷贝: