<!DOCTYPE html>
<html>
<head>
<title>箭头函数与普通函数的区别 箭头函数的6个注意事项</title>
</head>
<body>
<script type="text/javascript">
//1.使用typeof判断箭头函数，结果为function
var f1 = a=>a;
console.log(typeof f1);//'function'
//2.使用instanceof判断箭头函数是否为Function，结果为true 。即：箭头函数也是Function构造函数的实例
var f1 = a=>a;
console.log(f1 instanceof Function);//true
//3.箭头函数中的this指向
//箭头函数 不改变this指向（不绑定this）
//对象方法中嵌套函数时，this指向调用者，而普通函数始终指向window
//对象方法如果是普通函数，单层函数的this指向为obj
var obj = {
say:function(){
console.log(this);//this就是obj
}
};
obj.say();
//对象方法如果是普通函数，如果嵌套函数，那么函数内的this指向变为window
var obj = {
say:function(){
console.log(this);//this就是obj
var f1 = function(){
console.log(this);//window
};
f1();
}
};
obj.say();
//对象方法如果是普通函数，如果想在多层嵌套函数中使用obj，就需要在外层用一个变量接收obj
var obj = {
say:function(){
console.log(this);//this就是obj
var _this = this;
var f1 = function(){
console.log(_this);//obj
console.log(this);//window
};
f1();
}
};
obj.say();
//箭头函数无论如何嵌套，函数内部的this永远指向obj
var obj = {
say:function(){
console.log(this);//this就是obj
//箭头函数
var f2 = ()=>{
console.log(this);//this还是obj
};
f2();
}
};
obj.say();
// 4.箭头函数不能做构造函数，不能用new实例化，也没有prototype属性
// var Person = ()=>{};
// console.log(Person.prototype);//undefined
// var p = new Person();//报错
// 5.箭头函数内部没有arguments
// var f1 = ()=>{
// console.log(arguments);
// };
// f1(); //报错
//
// 6.箭头函数也支持默认参数、剩余参数、和解构语法
var f2 = (...x)=>{
console.log(x); //[3,4]
};
f2(3,4);
var f3 = ([x,y]=[])=>{
console.log(x, y); //3 4
};
f3([3,4]);
</script>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-1-29 18:12:37
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-23 00:09:25
