普通函数的this指向
一个普通函数的this指向,在函数调用时才能明确,如果,调用函数的是函数外层的对象,则this 指向对象,如函数没有外层的对象,则指向全局对象window
function arr(){
return this.name
}
console.log(arr())
let obj ={
name: 'yang',
age: 31,
getName(){
return this.name
}
}
console.log(obj.getName())
如果作为一个构造函数,则this指向构造函数的实例
function arr(){
this.name = 'yang'
}
var arr1 = new arr()
console.log(arr1.name)
如果有call,apply,bind 会改变this的指向
function arr(){
this.name = 'yang'
}
let obj = {}
arr.call(obj)
arr.apply(obj)
arr.bind(obj)()
console.log(obj.name)
箭头函数的this指向
箭头函数与普通函数不同,箭头函数没有原型,所以箭头函数本身没有this,箭头函数的this指向在定义的时候继承自外层第一个普通函数的this,如果没有外层的函数,则指向全局window对象,而且箭头函数的this指向不能被直接修改
箭头函数与普通函数的区别
1.箭头函数不能直接使用argument对象,但是如果箭头函数的外层还有普通函数,那么箭头函数的参数就等于外层第一个普通函数的参数
箭头函数可以使用扩展运算符来展开参数
var arguments
let a = ()=>{
console.log(arguments)
}
a(4,5,6,7)
let a = (...arguments)=>{
console.log(arguments)
}
a(4,5,6,7) //[4,5,6,7]
2. 箭头函数不能使用new操作符
箭头函数不支持new.target属性 确保用new 生成实例,返回使用new命令的构造函数 ,如果箭头函数的this指向普通函数,那么它的new.target属性就是指向该普通函数的引用
new bb();
function bb() {
let a = () => {
console.log(new.target); // 指向函数bb:function bb(){...}
};
a();
}
3.箭头函数不支持函参数的重命名
function arr(a,a){
console.log(a)
}
arr(1,2)
let a = (a,a)=>{
console.log(a)
}
a(4,5)
箭头函数的不适用场景
1.定义字面量方法,箭头函数的this指向全局
2.回调函数的动态this