关灯
开启左侧

油腻大叔带你看破this迷雾(一)

[复制链接]
油腻大叔 发表于 2018-7-23 16:15:38 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 油腻大叔 于 2018-7-23 16:13 编辑

大家好,最近有小伙伴对我说javascript的this怎么这么恼火,而且好多面试题看的头的大了。
今天就给大家讲解一下this的相关东西,文章分为三篇:



       第一篇是非箭头函数中this情况的总结;
       第二篇是非箭头函数中this面试题讲解;
       第三篇是箭头函数中this的讲解及面试题


只要大家认真阅读,理解记忆,你会发现this坑还是很好爬出去的,相关的this面试题再绕也没问题。

第一篇是非箭头函数中this情况的总结


众所周知this是javascript中的一个小坑,这根语言最初的设计有很大的关系。
各种的this指向经常让大家痛不欲生,下面我会把非箭头函数中this的所有指向分类给大家讲解。

1、this在全局使用

    这种this的使用频率不高,实际应用的范围不多,在这种情况下this指向window  
  1. console.log(this);//window
  2. console.log(this===window); //true
复制代码

2、this在函数内部使用,这个时候this的指向需要看函数调用时候的上下文。


     什么是上下文,初学者会很懵,其实上下文大家可以理解为函数调用时函数属于谁,属于谁this就是谁,情况有以下几种:

      a)  单纯函数调用

             这里分两种情况,严格模式和非严格模式,严格模式下是undefined,非严格模式下是window
  1. function show() {
  2.     console.log(this); //window
  3. }
  4. show();
复制代码
  1. 'use strict';
  2. function show() {
  3.     console.log(this); //undefined
  4. }
  5. show();
复制代码
           那么大家应该怎么理解记忆呢,我说过this是什么要看函数执行的前面,看这个函数属于谁。show调用前面什么都没有啊,它属于谁呢???
            在非严格模式中谁都不属于他就属于window,在严格模式下谁都不属于,那个就是undefined。

      b )  对象上的方法调用this指向这个对象
  1. function show(){
  2.    console.log(this); //{}  [1,2,3]
  3. }

  4. var json={};
  5. json.show=show;
  6. json.show();

  7. var arr=[1,2,3];
  8. arr.show=show;
  9. arr.show();
复制代码
        怎么帮助大家理解呢,json.show()调用,show前面是json,说明show属于json,this就指向json,同样的arr.show();show前面是arr,this就指向arr

     C )  元素上触发事件执行的事件函数,this指向这个元素对象
  1. function show(){
  2.    console.log(this); //document
  3. }

  4. document.onclick=show;
复制代码
         怎么帮助大家理解呢,这个事件函数是属于这个元素对象的所有this指向这个元素对象

      D ) 定时器中的this,指向window
  1. function show(){
  2.    console.log(this); //window
  3. }

  4. setTimeout(show,1000);
复制代码
          怎么帮助大家理解呢,定时器是window下的方法,只不过window下的方法平时可以把window省略。所以this指向window

     E) 构造函数中的this 指向实例对象
  1. function Show(){
  2.    console.log(this); //内部创建的空白实例对象
  3. }

  4. new Show();
复制代码

          怎么帮助大家理解呢,这里this的指向其实是new这个关键字发挥的作用。
          如果学过面向对象的朋友应该会知道,new在这里有三个功能1、在函数中创建一个空白的对象2、将this指向这个对象,3、返回这对象
        (如果不了解的可以私信我,或者自行查看JavaScript高级程序设计(第3版)这本书)

3、使用call,apply,bind来改变this指向
  1. function show(){
  2.     console.log(this); //111
  3. }

  4. show.call(111);
  5. show.apply(111);
  6. var fn=show.bind(111);
  7. fn();
复制代码

         怎么帮助大家理解呢,这三个方法目的都是改变this的指向,所有改成什么this就指向什么

        但是这三个方法在使用的时候还有特殊的情况就是不传或者传null、undefined,而且在严格模式和非严格模式下又有了变化。
        也好理解,在非严格模式下,不传系统就不知道this指向谁,不知道的情况下还是window
        在严格模式下,不传就是undefined,null就是null,undefined就是undefined。
  1. function show(){
  2.     console.log(this); //window
  3. }

  4. show.call();
  5. show.call(null);
  6. show.bind(undefined);
复制代码
  1. function show(){
  2.     console.log(this); //undefined null undefined
  3. }

  4. show.call();
  5. show.call(null);
  6. show.call(undefined);
复制代码


看了这么多种情况,可能还有好多小朋友有点晕,没事。继续看下一篇文章,我带大家做一些练习,做完以后就一点问题都没了。

这篇文章就到这里,感觉学到了朋友,点击关注,点赞,评论谢谢。详细了解可以加qq群:622730703。




















参与人数 1安仔币 +5 收起 理由
杰哥 + 5 神马都是浮云

查看全部评分总评分 : 安仔币 +5

 

精彩评论3

正序浏览
驹帅 发表于 2018-7-25 16:37:14 | 显示全部楼层
此帖仅作者可见
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  安仔IT技术交流论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )