基于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 相关文章推荐
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
js实现下拉框二级联动
Dec 04 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
一个查看session内容的函数
2006/10/09 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Django中处理出错页面的方法
2015/07/15 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
详解Python3注释知识点
2019/02/19 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
谢师宴答谢词
2015/01/05 职场文书
高中数学教学反思范文
2016/02/18 职场文书