关于JavaScript中的this指向问题总结篇


Posted in Javascript onJuly 23, 2017

在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向。首先需要了解一下几个概念:

1:全局变量默认挂载在window对象下

2:一般情况下this指向它的调用者

3:es6的箭头函数中,this指向创建者,并非调用者

4:通过call、apply、bind可以改改变this的指向

下面我们具体分析一下

1:在函数调用时

(非严格模式)

const func = function () {
    console.log(this);
    const func2 = function () {
      console.log(this);
    };
    func2(); //Window
  };
  func(); //Window

 

(严格模式)

'use strict'
  const func = function () {
    console.log(this);
    const func2 = function () {
      console.log(this);
    };
    func2(); //undefined
  };
  func(); //undefined

 

结合第四和第一两条规则:func这个函数是全局的,默认挂载在window对象下,this指向它的调用者即window,所以输出window对象,但是在严格模式下,this不允许指向全局变量window,所以输出为undefined(func2在函数直接调用时默认指向了全局window,其实这属于javascript设计上的缺陷,正确的设计方式是内部函数的this 应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,聪明的 JavaScript 程序员想出了变量替代的方法,约定俗成,该变量一般被命名为 that。这种方式在接下来会讲到)。

2:作为对象方法

const user = {

    userName: '小张',
    age: 18,
    selfIntroduction: function () {
      const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
      console.log(str);

      const loop = function () {
        console.log('我的名字是:' + this.userName + ",年龄是:" + this.age);
      };

      loop();   //我的名字是:undefined,年龄是:undefined

    }
  };

  user.selfIntroduction();  //我的名字是:小张,年龄是:18

按照咱的第一条规则,this指向他的调用者,selfIntroduction()方法的调用者是user,所以在selfIntroduction()方法内部this指向了他的父对象即user,而loop方法输出的为undefined的原因就是我在上面所说的javascript的设计缺陷了,在这种情况下,我们通常选择在selfIntroduction()方法里将this缓存下来。

const user = {
    userName: '小张',
    age: 18,
    selfIntroduction: function () {
      const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;
      console.log(str);

      const that=this;

      const loop = function () {
        console.log('我的名字是:' + that.userName + ",年龄是:" + that.age);
      };

      loop();   //我的名字是:小张,年龄是:18

    }
  };

  user.selfIntroduction();  //我的名字是:小张,年龄是:18

此时loop的this指向就理想了。

const user={

    userName:'小张',
    age:18,
    selfIntroduction:function(){
      const str='我的名字是:'+this.userName+",年龄是:"+this.age;
      console.log(str); 
    }
  };

  const other =user.selfIntroduction;
  other(); //我的名字是:undefined,年龄是:undefined

  const data={
    userName:'小李',
    age:19,
  };
  data.selfIntroduction=user.selfIntroduction;
  data.selfIntroduction(); //我的名字是:小李,年龄是:19

在看这段代码,将selfIntroduction()赋值给了全局变量other,调用other()方法,other挂载在全局函数window对象下,window对象下没有userName 和 age 这两个属性,所以输出为undefined。第二段代码,申明了data对象,包含了username和age属性,记住我们的第二条规则一般情况下this指向它的调用者,大家就明白了,data是selfIntroduction()的函数的调用者,所以输出了data的userName和age。

3:在html里作为事件触发

<body>
  <div id="btn">点击我</div>
</body>
     const btn=document.getElementById('btn');
    btn.addEventListener('click',function () {
      console.log(this); //<div id="btn">点击我</div>
    })

在种情况其实也是遵循了第二条规则一般情况下this指向它的调用者,this指向了事件的事件源即event。

4:new关键字(构造函数)

const fun=function(userName){
    this.userName=userName;
  }
  const user=new fun('郭德纲');  
  console.log(user.userName); //郭德纲

 这个就不多赘述了,new关键字构造了一个对象实例,赋值给了user,所以userName就成为了user对象的属性。

5:es6(箭头函数)

const func1=()=>{
    console.log(this); 
  };
  func1(); //Window
const data={
    userName:'校长',
    selfIntroduction:function(){
      console.log(this); //Object {userName: "校长", selfIntroduction: function}
      const func2=()=>{
        console.log(this); //Object {userName: "校长", selfIntroduction: function}
      }

      func2();
    }
  }
  data.selfIntroduction();

大家在看看我开头说的第三条准则:es6的箭头函数中,this指向创建者,并非调用者,fun1 在全局函数下创建,所以this指向全局window,而fun2在对象data下创建,this指向data对象,所以在func2函数内部this指向data对象,个人认为es6的箭头函数的this指向是对我上面所说的javascript设计缺陷的改进,(个人认知)。

6:改变this的指向

call、apply、bind这三个函数是可以人为的改变函数的this指向的,在这里就不多说这三者的区别了,在往后的博客里我会详细解释这三者的区别的。现在先拿一个来举一个例子

const func=function(){
   console.log(this);
 }; 
 func(); //window
 func.apply({userName:"郭德纲"}); //Object {userName: "郭德纲"}

 

这三个方法都是可以人为的改变this的指向,区别是call、apply会将该方法绑定this之后立即执行,而bind方法会返回一个可执行的函数。

说这很多总结起来就是我开头说的4点

1:全局变量默认挂载在window对象下

2:一般情况下this指向它的调用者

3:es6的箭头函数中,this指向创建者,并非调用者

4:通过call、apply、bind可以改改变this的指向

说实话第一次写博客,确实挺忐忑的,会不会有人看我的博客?会不会写的不正确?……想好多了,总结了:不好的地方欢迎指正。

以上所述是小编给大家介绍的关于JavaScript中的this指向问题总结篇,希望对大家有所帮助,如果大家有任何问题,欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js获取系统的根路径实现介绍
Sep 08 Javascript
JavaScript中Function详解
Feb 27 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
png在IE6 下无法透明的解决方法汇总
May 21 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
小程序实现授权登陆的解决方案
Dec 02 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 #Javascript
js实现带进度条提示的多视频上传功能
Dec 13 #Javascript
基于javaScript的this指向总结
Jul 22 #Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
基于LayUI实现前端分页功能的方法
Jul 22 #Javascript
浅谈原型对象的常用开发模式
Jul 22 #Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
You might like
php画图实例
2014/11/05 PHP
PHP闭包函数详解
2016/02/13 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
2015/03/05 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
vue实现全选、反选功能
2020/11/17 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
jupyter安装小结
2016/03/13 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
纠风工作实施方案
2014/03/15 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
处罚决定书范文
2015/06/24 职场文书
导游词之襄阳古城
2019/09/27 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python