让前端飞

this指向浅析

2020-06-01  本文已影响0人  Miaoz0070

在开发过程中,使用this总会出现问题,时不时的会出现获取不到自己想要的对象和值,只要写js就必然要弄懂this指向问题。最近总结了下this指向问题,记录下来,方便之后巩固学习,也分享给大家希望能有所帮助。

function a(){
    var user = "xx";
    console.log(this.user); //undefined,window全局中没有定义user,所以是undefined
    console.log(this); //Window
}
a();

this最终指向的是调用它的对象,这里的函数a是,window调用。

场景2:

var a = {
    user:"xx",
    fn:function(){
        console.log(this.user);  //xx
    }
}
a.fn();

这里的fn是a在调用,所以fn中的this指向就是指向对象a。强调:this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁。

场景3:

var obj = {
    a:1,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

场景1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window。
场景2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
场景3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。

var obj = {
    a:1,
    b:{
        // a:12, 注释掉
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

我们对象b中没有属性a,但是this指向还是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。

场景4(特殊情况):

var obj = {
    a:1,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var s = obj.b.fn;
s();

这种情况this指向的是window,因为具体执行调用方法是在s()执行即window.s(),之前的var s = obj.b.fn;只是被引用,却没有执行调用。
this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的,场景4中虽然函数fn是被对象obj所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向是window,场景3是不一样的,场景3是直接执行了fn。

场景5(特殊情况):
如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

//1.1
function fn()  
{  
    this.user = 'xx';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined,this指向返回的对象。
//1.2
function fn()  
{  
    this.user = 'xx';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined,,this指向返回的对象。
//2.1
function fn()  
{  
    this.user = 'xx';  
    return 1;
}
var a = new fn;  
console.log(a.user); //xx,this指向实例a。
//2.2
function fn()  
{  
    this.user = 'xx';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //xx,this指向实例a。
//2.3
function fn()  
{  
    this.user = 'xx';  
    return undefined;
}
var a = new fn;  
console.log(a); //fn {user: "xxx"}
//2.4null比较特殊,虽然null也是对象,但是在这里this还是指向那个函数的实例。
function fn()  
{  
    this.user = 'xx';  
    return null;
}
var a = new fn;  
console.log(a.user); //xx

场景6构造函数this:

function Fn(){
    this.user = "xx";
}
var a = new Fn();
console.log(a.user); //xx

为什么this会指向a?首先new关键字会创建一个空的对象,然内部机制会将this指向这个空对象,函数内部的this就会被这个空的对象替代。

this指向有很多种情况,需要在实际开发中自己去理解。
上一篇 下一篇

猜你喜欢

热点阅读