调用方式 | 示例 | 函数中this指向 |
通过new调用 | new method | 新对象 |
直接调用 | method() | 全局对象 |
通过对象调用 | obj.method() | 调用的对象 |
call、apply、bind | method.call(ctx) | 第一个参数 |
代码举例:
1、通过new调用
function fn(){
console.log(this)
}
new fn() //返回的是{}新对象
2、直接调用
function fn(){
console.log(this)
}
fn() //返回的是window全局对象
3、通过对象调用
const car = {
name:'奔驰',
run() {
console.log(this);
}
}
car.run() //打印出来的是car这个调用run方法的对象
4、call和apply都是改变this指向为第一个参数,bind比较特殊
bind返回的是一个新函数。
function fn(){
console.log(this)
}
const newFn= fn.bind(1)
newFn() //打印的是1
new newFn() //打印的是{}新对象
// 因为bind的内部实现如下:
bind(ctx){
return function(){
if(当前函数是用new来调用的){ //这里的当前函数相当于上面的newFn
new 调用原始函数 //这里的原始函数相当于fn
}else{
调用原始函数.call(ctx)
}
}
}
5、箭头函数没有this
箭头函数基于闭包,闭包属于词法作用域,词法作用域是在编译时确定的,不是在运行时确定的。所以箭头函数中使用的this是定义时就确定的,是它的外层的执行上下文确定的。
const obj = {
name:'xx',
fn(){
console.log(this)
let a = ()=>{
console.log(this)
}
a()
}
}
obj.fn() //上面2处的this都是打印出来的是obj