基于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 相关文章推荐
Textarea根据内容自适应高度
Oct 28 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
jquery实现抽奖功能
Oct 22 jQuery
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使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python抽象类的新写法
2015/06/18 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
python Canny边缘检测算法的实现
2020/04/24 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
销售行政专员职责
2014/01/03 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
暑期培训班招生方案
2014/08/26 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python