前端基础进阶(五):全方位解读this

作者: 这波能反杀 | 来源:发表于2017-02-15 03:19 被阅读18570次

    由于某些原因,文章已经删除,打算迁移到别处,目前正在寻找更合适的平台。

    请大家关注我的新公众号ar_indus,随后我会在公众号里推送新的博客地址。

    后续计划的《react进阶系列》文章也会在新公众号中推送。

    公众号二维码

    ar_indus

    相关文章

      网友评论

      • DbEiTw:也是今天专门注个册来给波老师点个赞呀,然后看见好东西留下印记,也方便以后再来(PS: 这个波老师的名号老让我想歪,有木有更正式一点的。。哈哈)
      • 烟雨剑心客:大神,你可以开课写书出版了
      • b85aeca17401:巩固了多知识,谢谢前辈
      • 团子Secret:波哥,你又回来啦:heart:
        这波能反杀:@团子Secret 嗯
      • XimingWang:指向构造函数的代码,为这个对象添加属性,方法等;
        ----------->
        执行构造函数的代码,为这个对象添加属性,方法等;
      • 5ff3ade2ad0e:不知不觉已成了波哥的粉丝
      • a2d7b36d630e:这个对this的理解确实非常到位了。
      • 路某人_lu:给波老师点赞,写的真的太好了!
      • Keriy:“**如果调用者函数,被某一个对象所拥有,**那么该函数在调用时,内部的this指向该对象。”,老哥,你这个断句厉害了啊。
      • 2aa405c6cb40:我开始怀疑我是一个假前端了
      • f1482cbfb158:博主这篇this讲得真好,我以前就经常被this搞得晕头转向,不明白this的指向,给博主点赞:+1:
      • 梦星魂_42b6:专门注册上来给你点个赞~ 文章写的不错
        看了前四篇感觉挺有收获的
        这波能反杀:@梦星魂_42b6 感谢 !
      • LeoMelody:波哥,看了你写的这一系列文章。我自己在写了代码的同时也做了一些总结。我在自己总结的后面可以加入你的这个系列的链接吗,方便我以后看自己总结有不懂的时候再来看你的。
        LeoMelody: @这波能反杀 多谢
        这波能反杀:@LeoMelody 嗯
      • f41ea63a57f1:这几天连着读了波老师的四五篇文章。对闭包,对this,作用域链,执行上下文都有了一个全新的认知。感谢波哥
        这波能反杀:@王一衡 那就多点几个赞呀:smile:
      • ecfbc46a9e18:非常感谢博主的分享,从您的前端基础系列文章中真的受益很多。但是本文中您将类数组对象转化为数组对象,个人感觉您是否可以考虑采用concat方法来代替slice,这样子才是真正的做到完全不影响arguments?个人粗浅建议,请各位大神轻喷
      • 芝士君:关注了好久,第一次认真得看这个系列,哇,不要太棒。
        波同学有放github上么,我要给你star。:scream:
        芝士君:@波同学 我觉得可以放,会收获很多star的。已follow:smile:
        这波能反杀:@芝士君 这些文章没有,以后会放一些项目,目前正在用vue模拟的QQMusic你可以关注一下
      • demo11: var arg = [].slice.call(arguments);
        这句,可以解释下吗?不明白怎么就把arguments变成了数组并赋值给了arg?
        一个空数组,为什么要执行slice()方法,我知道的是把空数组的this指向了arguments这个对象,不是应该还是空数组吗?为什么数组里有值了?
        demo11:@波同学 已经看懂了
        这波能反杀:@似水流年_43f8 call的语法
        8e185a291aaf:我也想问这个 @波同学
      • 35022f466dc5:总结的好细啊,棒
      • 代码驴:如下面的例子中,我们期待的是getA被obj调用时,this指向obj,但是由于匿名函数的存在导致了this指向的丢失,在这个匿名函数中this指向了全局
        var obj = {
        a: 20,
        getA: function() {
        setTimeout(function() {
        console.log(this.a)
        }, 1000)
        }
        }

        obj.getA();
        这里为什么一到匿名函数中this就指向window了呢?我曾经在看《JavaScript高级程序设计》的时候也不明白,还希望波老师指点一下,不然这根筋通不了
        3dcc8a0588a3:@代码驴 我的理解匿名函数中的this不等同于getA这个函数中的this,匿名函数最终是独立调用的,所以指向了window
        代码驴:@波同学 恕我愚拙,波老师是哪句话说的啊:joy:
        这波能反杀:@代码驴 文中说得很清楚的呀
      • 代码驴:“当obj在全局声明时,无论obj.c在什么地方调用,这里的this都指向全局对象”
        波老师,这句话要死记硬背么?该怎么用理论去解释它呢?
      • 64d816ca3e5c:嘻嘻。🍀
      • 浩风起兮:我想当然以为都指向了Person。。。怎么破
        这波能反杀:@浩风起兮 ...
      • 10c60ff28a52:看了你好几篇文章,受益匪浅。但是一直有两个字特别纠结:显示。我觉得改成:显式 更好理解。大神可能受输入法干扰了!!
        这波能反杀:@阳冬 感谢指正
      • 112e46402701:JavaScript内部提供了一种机制,让我们可以自行手动设置this的指向。它们就是call与apply。所有的函数都具有着两个方法。
        最后一句:应该是这两个方法,不是着两个方法吧...
        感谢博主分享,很不错的文章
      • 646d09b1e4e6:确实,我一直认为谁调用他就指向谁
      • 4b4d42e9a1bb:每看完你的一篇文章都想给你留下一个赞,这种学习方式很好,很值得我们学习,谢谢作者
      • lastnigtic:·将类数组对象转换为数组
        第一个例子,typeof arg 和 typeof arguments我打印出来都是object,
        b7bfb8ee19a4:可以用Array.isArray(arg)来看是否是数组
      • 95e23102d1e9:谢谢博主这么用心的写这么多文,真的学到了很多。
      • 41d4e5c3e748:从继承往下看的时候,已经开始懵了....
      • 98cd1592cbbc::+1: 看了好几篇,发现都是你写的,特别棒,有帮助
      • lastnigtic:支持:+1:
      • 22d41e3eba93::+1: 强。看了你写的几篇又有了新的理解,比其他网上乱七八糟的解释好多了,一针见血,持续关注。
      • chenpipy:理解了,谢谢大神!:scream:
      • geekWeb:“三.使用call,apply显示指定this”下面“将类数组对象转为数组对象”中代码注释的部分,出现细节性的问题。通过getElementsBy取到的是HTMLCollection,而通过querySelectorAll取到的才是nodeList 两者是有区别的:
        HTMLCollection 是元素集合而 NodeList 是节点集合(即可以包含元素,文本节点,以及注释等等)
      • 洲行:老师,你自己封装bind的这个方法,执行bind函数的时候,第一次只return了一个函数体,并没有让此函数执行啊,可最后怎么还是执行了
      • 98267c0eec2b:感谢博主,写的系列文章都很简单易懂。
        这波能反杀:@kn2o 有用就好
      • 53c8c52fa468:感觉还是没太懂,以下这个例子为什么输出12.
        var m = 12;
        var a = {
        m : 123,
        f1: {
        m : 23,
        test: function(){
        var t = function() {console.log(this.m);}
        t();
        }
        }

        }
        a.f1.test(); // 12
        2e8ff5db7742:function t() {
        console.log(this.m);
        }

        var m = 12;
        var a = {
        m : 123,
        f1: {
        m : 23,
        test: function(){
        console.log(this);//this 指向f1对象
        t();
        }
        }
        }
        a.f1.test(); // 12
        })
        改写一下,是否直观点呢?
        3dcc8a0588a3: @波同学 这个this是t中的this,而不是test中的this,虽然test调用的时候指定了a.f1,但t是独立调用的,所以this指向window,不知道这样理解对不对
        这波能反杀:@叶子_Gogo 利用第六章里的方法调试,查看this指向
      • aaf1ea4801c1:波同学,有一个地方我不太理解。《借助闭包与apply方法,封装一个bind方法》处。
        getA和setTimeout都是闭包吧,为什么seTimeout中bind函数里的this是getA中的this?
      • 陈枫C:通俗易懂,受益匪浅 :+1: :+1: :+1: 波同学
        这波能反杀:有帮助就好
      • 玖零儛:匿名函数是相当于直接独立调用的函数么
        这波能反杀:可以这样理解
      • 69a7b6c3b4c7:波同学 请问封装bind函数能不能这样写:

        function bind(fn,obj){
        return fn.apply(fn, arguments);
        }

        如果不能,这样写会造成什么问题呢?
        这波能反杀:@PARADISELIN 我之后写一篇文章专门解释一下吧。一句两句也说不清楚
        69a7b6c3b4c7:@波同学 我还是不太理解也
        这波能反杀:肯定不能的呀。你这种写法,就是想换一种方式传递参数嘛。但是有问题。

        function bind(fn, obj) {
        return fn.apply(obj, [].slice.call(arguments, 2));
        }

        你这样试试,我没测试过,不保证一定没错。
      • 玖零儛:经常有一些坑爹文章,先来段代码,然后运行结果,再来个经验之谈:joy:
      • 年轻小子:博主总结的很好,比之前看的清晰明了很多很多,博主用心了
        年轻小子:@波同学 啥时候写本书啊? 你总结的要比好多人更能让人快速的读懂,读懂你的再看到别的和你一样的东西就非常轻松了
      • 我就不信这个昵称也不合法:var obj = {
        a: 20,
        getA: function() {
        setTimeout(function() {
        console.log(this.a)
        }, 1000)
        }
        }

        obj.getA();
        如果在全局中加入var a=30;返回结果是30.。如果不加,返回结果20,即使没有var self=this;也是在谷歌中调试的,加了'use strict'
        11e161efb5c5:咦,我也一样
        这波能反杀:不知道你为什么会得出这个结果,没有全局变量肯定返回undefined呀
        3f01f2cb549d:我也发现了这个问题,请问是为什么呢?
      • 我就不信这个昵称也不合法:'use strict';
        var a = 20;
        function foo () {
        var a = 1;
        var obj = {
        a: 10,
        c: this.a + 20,
        fn: function () {
        return this.a;
        }
        }
        return obj.c;

        }
        console.log(foo()); // 运行会报错
        谷歌浏览器中调试不会报错,会返回40。。是我打开的方式不对么?
        这波能反杀:@一曲折扇清 不可能吧
        一曲折扇清:@波同学 在chrome跟safari调试都是返回40,要么就是你例子写错了,要么就是你理解错了
        这波能反杀:你肯定是哪里搞错了呀
      • cc9e5fefd5fe:咦?是这篇this太简单了么,怎么都没有人讨论问题?还是太迷糊了都没有问题可讨论?
      • e798341a1339:因此,当new操作符调用构造函数时,this其实指向的是这个新创建的对象,最后又将新的对方返回出来,被实例对象p1接收。因此,我们可以说,这个时候,构造函数的this,指向了新的实例对象,p1。

        这段里面有个错字,感觉博主对原型中this只是蜻蜓点水!
        这波能反杀:感谢指正
      • ricosmall:波同学,文章写得真好!但是我有些问题想问你:请问你经常因为一口气写完文章而熬至深夜,不会影响第二天的工作吗?对于坚持作息规律可能导致任务不能完成和坚持一次完成任务可能导致作息不规律甚至第二天的工作状态不佳,你是怎样看待的?又是如何平衡的?
        这波能反杀:前提肯定是不影响工作啊,一篇文章写好几天呢
      • 越夜鸣:我在不断的给朋友推荐你,加油!
        这波能反杀:@越夜鸣 :kissing_heart::kissing_heart::kissing_heart:
      • 晒太阳的Mozzie:感谢博主带我出this坑。另外,最后提到的构造函数,是可以这么理解吧:

        function Foo() {
        this.name = "my name";
        this.age = 101;
        }

        var fakeObj = (function () {
        var obj = {};
        Foo.call(obj);
        obj.__proto__ = Foo.prototype;
        return obj;
        })();
      • da0a9eef962d:这是我目前看过讲解this最好的文章。
        这波能反杀:可持续关注
      • 丿迷茫的小孩:嗯呢,说的挺好,当作学习的对象吧😃😃😃
        这波能反杀:@丿迷茫的小孩 :smile:
      • Miamin:点赞
      • 1ba420ac9be6:文中的图用什么工具画的?
        这波能反杀:@favers ProcessOn
      • 5ae4564475ff:new 关键字其实就干了这些

        var instance = {};
        instance.__proto__ = Constructor.prototype;
        Constructor.apply(instance);

        最后返回 instance
      • 槐花开:波同学:+1::+1::+1:
        这波能反杀:@槐花开 :smile:
      • 2b758ae86509:把箭头函数什么的加上就更好了
      • b1d6f908164d:看博主文章如醍醐灌顶啊,下期是不是可以讲讲apply、call、面向对象或者设计模式?
        这波能反杀:apply,call这篇文章已经总结的很全面了,后面也会说到面向对象和设计模式,得等我慢慢怼,一篇文章要写好几天呢
      • 坤少卡卡:终于等到更新了,看到博主吐槽度娘搜索,这更坚定了我自备梯子用google了
        这波能反杀:@有梦想的咸鱼_5207 下班的时候空了,心情不错,并且不想玩游戏了,就会写点东西
        f242b658719a:@这波能反杀 波波同学你的日常工作是程序猿还是作家啊,写作的时间是什么时候
        这波能反杀:@坤少西西 肯定google的
      • 为什么一定要起昵称:var a = {__proto__:{a:2}};
        a.a = a.a;
        a.a = 3;
        delete a.a
        为什么一定要起昵称:@波同学 你可以把这个换成[this]试试
        这波能反杀:@uiooo 这是原型链的知识
        8c1194654d85:var a = {__proto__:{a:2}};
        a.a = a.a;
        console.log(a.a);//2
        a.a = 3;
        console.log(a.a);//3
        delete a.a;
        console.log(a.a);//2
        和这篇文章无关啊
      • 庸者的救赎:闭包里面的应该也讲解一下的,也能提升一下整体的水准
        这波能反杀:闭包里的this,也是遵循我文章说到的函数this的规则,仍然根据调用者与是否独立调用来判断
      • kerush:博主真是用心,这么晚了还发文
        kerush:@波同学 慢工出细活,说不定就出书了呢
        这波能反杀:@kerush :joy:主要是想一口气先写完

      本文标题:前端基础进阶(五):全方位解读this

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