基于javaScript的this指向总结


Posted in Javascript onJuly 22, 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 相关文章推荐
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
vue.js表格分页示例
Oct 18 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
基于LayUI实现前端分页功能的方法
Jul 22 #Javascript
浅谈原型对象的常用开发模式
Jul 22 #Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JS实现微信摇一摇原理解析
Jul 22 #Javascript
一个简易的js图片轮播效果
Jul 22 #Javascript
基于JS脚本语言的基础语法详解
Jul 22 #Javascript
You might like
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
一秒学会微信小程序制作table表格
2019/02/14 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
python线程池threadpool实现篇
2018/04/27 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python实现大学人员管理系统
2019/10/25 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Django如何实现防止XSS攻击
2020/10/13 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
幼儿园大班毕业教师寄语
2014/04/03 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
2014年食堂工作总结
2014/11/20 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
导游词之青城山景区
2019/09/27 职场文书
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js