JavaScript中的this指向?箭头函数与普通函数区别?
匿名函数,定时器,自执行函数中this指向window
普通函数直接调用this指向window
事件函数中this指向触发事件的元素
对象中方法中this谁调用的方法this指向谁
构造函数中this指向这个实例
call,apply,bind方法中this指向第一个参数值
严格模式下全局作用域中函数中this 指向的是undefined
箭头函数中this由其外部的作用域中的this决定
box.onclick = function(){
let fun = () => {
console.log(this) // this 指向 box,外部的函数作用域中this指向box
}
console.log(this) // this 指向 box
fun()
}
// 普通匿名函数
box.onclick = function(){
let fun = function () {
console.log(this) // this 指向window,匿名函数
}
console.log(this) // this 指向 box
fun()
}
简单的说,箭头函数就是对匿名函数的简化
1.箭头函数形式上做了改变,简化了函数体。
一般的箭头函数这样写:
() => {
return
}
单参数,单语句
(x) => x+1 //return可以省略
x => x+1 //括号也可以省略
// 普通匿名函数写法
function (x) {
return x+1
}
没有参数时,必须要有个括号
() => 100
// 普通匿名函数
function () {
return 100
}
2.普通函数支持通过arguments 获取未知个数的实参,而箭头函数不支持arguments用法。
箭头函数中可变参数是利用rest取参数值
可以利用… 对个数不明参数的参数进行囊括。函数内,可以通过数组的方式。对rest取值,即可拿到实参。
(x, y, ...rest) =>{
let i,sum = x+y
for (i=0; i < rest.length; i++){
sum += rest[i]
}
return sum
}
3.箭头函数在es6标准下可使用,普通函数则没有这个限制。
4.this指向的修改。箭头函数的this指向外部,常在对类的方法进行构造时使用,使函数体内的this始终指向这个类。如果需要this指向当前源,则可使用普通函数。
5.箭头函数是匿名函数,不能作为构造函数,不能使用new
6.箭头函数没有原型属性
7.箭头函数不能当做Generator函数,不能使用yield关键字
8.箭头函数this指向无法改变