JavaScript中this指向以及改变this指向

关于this指向

  • 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉)

例子1

   function name(){
        var a="A";
        console.log(this.a);//undefined
        console.log(this);//Window
    };
    name(); 
  • 按照上面所说的this始终指向的是调用它的对象,这里的函数name实际上是被Window对象所调出来的。所以this.a=undefined;
    function name(){
        var a="A";
        alert(this.a);//undefined
        alert(this);//Window
    };
    name(); 
  • 和上面代码一样,alert 也是Window一个属性,也是Window调出来的。

例子2

 var n={
        name:"LonJin",
        fn:function(){
            console.log(this.name)//LonJin
        }
    };
    n.fn();
  • 这里的this指向的是对象n,因为你调用这个fn是通过n.fn()执行的,那自然指向就是对象n,这里再次强调一点,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁,一定要搞清楚这个。

  • 其实例子1和例子2说的并不够准确,下面这个例子就可以推翻上面的理论。

例子3

 var n={
        name:"LonJin",
        fn:function(){
            console.log(this.name)//LonJin
        }
    };
    window.n.fn();
  • 这段代码和上面的那段代码几乎是一样的,但是这里的this为什么不是指向window,如果按照上面的理论,最终this指向的是调用它的对象,这里先说个而外话,window是js中的全局对象,我们创建的变量实际上是给window添加属性,所以这里可以用window.n.fn()

  • 再来看一段代码

    var n={
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a)//12
            }
        }
    };
    n.b.fn();
  • 这里同样也是对象n点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的那些不就都是错误的吗?其实也不是,只是一开始说的不准确,接下来我将补充一句话,我相信你就可以彻底的理解this的指向的问题。

彻底理解this指向

  • 情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

  • 情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

  • 情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,例子3可以证明,如果不相信,那么接下来我们继续看几个例子。

    var n={
        a:10,
        b:{
            // a:12,
            fn:function(){
                console.log(this.a)//undefined
            }
        }
    };
    n.b.fn();
  • 尽管对象b中没有属性a,这个this指向的也是对象b,因为this只会指向它的上一级对象,不管这个对象中有没有this要的东西。还有一种特殊的情况,请看例子4。

例子4

    var n={
        a:10,
        b:{
            a:12,
            fn:function(){
                console.log(this.a)//undefined
                console.log(this);//window
            }
        }
    };
    var j=n.b.fn;
    j();
  • 在这里this指向window,这里就又不明白了,其实还是不理解this永远指向最后调用它的对象,也就是看它执行的时候是谁调用的它,例子4中虽然函数fn是被对象b所引用,但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window,这里和例子3是不一样的,例子3是直接执行了fn

当this遇到retrun时候

 function fn(){
       this.user="LonJin";
       return {}
   };
   var a=new fn;
   console.log(a.user);//underfind
  • 再看一个
  function fn(){
       this.user="LonJin";
       return function(){
           
       }
   };
   var a=new fn;
   console.log(a.user);//undefined
  • 继续看
   function fn(){
       this.user="LonJin";
       return 1
   };
   var a=new fn;
   console.log(a.user);//LonJin
   function fn(){
       this.user="LonJin";
       return undefined
   };
   var a=new fn;
   console.log(a.user);//LonJin
  • 如果返回值是一个对象,那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

  • 还有一点就是虽然null也是对象,但是在这里this还是指向那个函数的实例,因为null比较特殊。

   function fn(){
       this.user="LonJin";
       return null
   };
   var a=new fn;
   console.log(a.user);//LonJin

补充

  • 在严格版中的默认的this不再是window,而是undefined。

结尾

  • 如果对你有帮助,就赞赏一下吧!
    WeChat:ljsw8686
    一起学习,一起进步!
图片描述
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 223,507评论 6 521
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,626评论 3 401
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 170,466评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,456评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,473评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,016评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,409评论 3 426
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,370评论 0 278
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,909评论 1 322
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,960评论 3 343
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,102评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,754评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,428评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,917评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,036评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,582评论 3 380
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,126评论 2 362

推荐阅读更多精彩内容