美文网首页
前端乱弹99日之奇怪的this 上集

前端乱弹99日之奇怪的this 上集

作者: 业余马拉松选手 | 来源:发表于2018-06-03 20:57 被阅读18次

作为一个Java后端狗转来的人,对于this指针的理解,可能还是有点痛的,这次我就“涨着胆子”来说下这个问题吧
首先看这样一个方法

function a(){
  console.log(this);
}
a();

如果是在浏览器里执行,应该是返回window对象
这里其实有一个最基本的原则:
this的值通常是有所在函数的执行环境所决定,也就是看函数是如何调用的。
如果上面这段代码是在Node服务器里执行的,返回的就应该是一个global对象,而不是window对象。
这里,我们也可以称为全局对象。
那么接着我们看一个稍微复杂点的例子

var b = {
  name : "I'm b",
  say : function(){
    console.log(this);
    console.log(this.name);
  }
}
b.say();

这时在浏览器返回如下:

 {name: "I'm b", say: ƒ} name: "I'm b"say: ƒ ()__proto__: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

I'm b

上面一行显示的是我们创建的对象的情况,根据上面的原则,执行say这个方法的时候,是在b这个对象的执行环境下,所以this也就指向了这里。

那么接着我们再继续看下这个例子

var b = {
  name : "I'm b",
  say : function(){
    var updateName = function(newName){
     this.name = newName;
    }
    updateName("I'm Big B");
    console.log(this);
    console.log(this.name);
  }
}
b.say();

如果按照正常的理解,这时b的对象的名称应该改为了I'm Big B,但结果却有点出乎意料,就算是执行了updateName这个方法,但b对象的name的值并未改变,但如果你 console.log(window.name) 就会发现这个值是I'm Big B
是不是有点奇怪?
嗯,这里updateName这个值所指向的函数,其实与b这个对象并没有包含关系,如果要实现updateName这个方法可以修改b对象所指向的name值的话,可以这样做:

var b = {
  name : "I'm b",
  say : function(){
    var self = this;
    var updateName = function(newName){
     self.name = newName;
    }
    updateName("I'm Big B");
    console.log(self);
    console.log(self.name);
  }
}
b.say();

这样就能达到你的效果啦~
关于这个奇怪的this指针的效果,今天还只是初步聊了下,下节会详细分析~~

相关文章

  • 前端乱弹99日之奇怪的this 上集

    作为一个Java后端狗转来的人,对于this指针的理解,可能还是有点痛的,这次我就“涨着胆子”来说下这个问题吧首先...

  • 前端乱弹99日之奇怪的this 中集

    上次聊的this的问题,基本都还是在“术”的层面,没有更深入的解释,今天就试着继续深入的聊一聊先说一下之前提到过的...

  • 前端乱弹99日之"奇怪"的操作符们

    今天还是从一个奇怪的例子看起吧 上面这四段代码,你觉得会输出结果是多少? 嗯,给你2分钟,然后再看答案哈 嗯,结果...

  • 前端乱弹99日之undefined

    上一篇文章竟然已经是快3个月前写的了,这段时间也是发生了不少事情,自己的工作职责和项目也是变了又变,当然不变的还是...

  • 大妈乱弹之就是乱弹

    前天日蚀。 想起一部电影《Total Eclipse》(全蚀狂爱)。 灵魂与肉体,更爱谁?灵魂不灭,有的是时间去爱...

  • Audio Queue Services 解读之 Playing

    解读Play Audio下集,如果你没看上集,建议先去看看上集. Audio Queue Services 解读之...

  • 魔戒之-乱弹

    话说上次喵喵出门散步的时候,意外撞进那个牧羊人进过的山洞。深深的洞穴里有很多很多的奇珍异宝,还有一具高大的尸体。尸...

  • 乱弹之七

    1.什么也不想说,什么也不想做,多么想自我放松,自现放纵活在此刻,但总有无休止的愧疚,如影随行。今天脑海里是这些凌...

  • 乱弹之八

    1. 我决定离你远点,逃离你的脑海,蛮不讲理的纠缠令人烦,令人厌。做人要做一个正直的人,歪曲是非,颠倒黑白能蒙蔽众...

  • 乱弹之十

    1. 举棋好久了,不定之事仍是难定。因为过往的轻率或视野的狭獈影响了选择道路的方向,走了不少崎岖之路,所以现在凡事...

网友评论

      本文标题:前端乱弹99日之奇怪的this 上集

      本文链接:https://www.haomeiwen.com/subject/fohssftx.html