关于this的指向问题（总结）

javascript中this的指向一直是前端同事有时会不理解的知识点，也会出现在面试题中，今天我们将来总结下this的指向问题：

注释：
1.全局变量默认挂载在window对象下,一般情况下this指向它的调用者
2.es6的箭头函数中，this指向创建者，并非调用者

举个例子：

一.函数调用时：

非严格模式：默认挂载在window对象下，this指向它的调用者即window，所以输出window对象

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

严格模式：this不允许指向全局变量window，所以输出为undefined（func2在函数直接调用时默认指向了全局window

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

解决方法：正确的设计方式是内部函数的this 应该绑定到其外层函数对应的对象上，为了规避这种缺陷，js出了变量替代的方法，该变量一般被命名为
that。

**
二.作为对象方法：

const user = {userName: '小花',age: 18,myselfIntroduction: function () {const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;console.log(str);const loop = function () {console.log('我的名字是:' + this.userName + ",年龄是:" + this.age);};loop();   //我的名字是:undefined,年龄是:undefined}};user.myselfIntroduction();  //我的名字是:小花,年龄是:18

this指向他的调用者，myselfIntroduction（）方法的调用者是user，所以在myselfIntroduction（）方法内部this指向了他的父对象即user，而loop方法输出的为undefined的原因就是我在上面所说的设计缺陷了，在这种情况下，我们通常选择在myselfIntroduction（）方法里将this缓存下来。

const user = {userName: '小花',age: 18,myselfIntroduction: function () {const str = '我的名字是:' + this.userName + ",年龄是:" + this.age;console.log(str);const that=this;const loop = function () {console.log('我的名字是:' + this.userName + ",年龄是:" + this.age);};loop();   //我的名字是:undefined,年龄是:undefined}};user.myselfIntroduction();  //我的名字是:小花,年龄是:18

==const that=this;==此时loop的this指向就理想了。

const user={userName:'小花',age:18,myselfIntroduction:function(){const str='我的名字是:'+this.userName+",年龄是:"+this.age;console.log(str); }};const other =user.myselfIntroduction;other(); //我的名字是:undefined,年龄是:undefinedconst data={userName:'小李',age:19,};data.myselfIntroduction=user.selfIntroduction;data.myselfIntroduction(); //我的名字是:小李,年龄是:19

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

三.在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。

四.new关键字（构造函数）

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

es6的箭头函数中，this指向创建者，并非调用者，fun1 在全局函数下创建，所以this指向全局window，而fun2在对象data下创建，this指向data对象，所以在func2函数内部this指向data对象

五.改变this的指向

const func=function(){console.log(this);}; func(); //windowfunc.apply({userName:"李现"}); //Object {userName: "李现"}

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

call()的第一个参数是this要指向的对象，后面传入的是参数列表，参数可以是任意类型，当第一个参数为null、undefined的时候，默认指向window；
apply()：第一个参数是this要指向的对象，第二个参数是数组
bind()改过this后，不执行函数，会返回一个绑定新this的函数

关于this的指向问题（总结）相关推荐

idea中设置指向源代码Scala
1.到官网下载scala源代码点击如下链接下载源码:http://www.scala-lang.org/download/all.html 选择需要的版本点击进行下载,我选择的是2.11.8版本,如 ...
父类引用指向子类对象
父类引用指向子类对象,如何访问子类的属性? 1.第一种办法最简单,强制类型转化为子类. 2.父类引用指向子类对象,由于当前引用为父类,只能访问父类的字段和方法,但是根据多态性可以访问子类的方法,在这个 ...
Go 学习笔记（13）— 指针定义、指针特点、空指针、指针数组、指向指针的指针、指针作为函数入参
1. 复合数据类型 Go 语言基本的复合数据类型有指针.数组.切片.字典.通道.结构和接口等.格式如下: * pointerType // 指针类型, [n]elementType // 数组类型, ...
vs2003复制一个web窗体,没有更改指向同一个cs 文件，引发大问题
今天我在原来的考试系统的出题模块中,input模块,因为增加的一个web窗体编译有问题,于是就复制了原来的启动项页面input,再改了名字为set1,然后在set1页面上删除了控件和代码,再把set1 ...
释放变量所指向的内存_C++动态内存分配（学习笔记：第6章 15）
动态内存分配[1] 动态申请内存操作符 new new 类型名T(初始化参数列表) 功能: 在程序执行期间,申请用于存放T类型对象的内存空间,并依初值列表赋以初值. 结果值: 成功:T类型的指针,指向 ...
java的对象是什么意思_Java中对象和对象引用的区别，引用、指向是什么意思
Java的变量分为两大类:基本数据类型和引用数据类型. 其中基本类型变量有四类8种:byte short int long float double char boolean,除了8种基本数据类型变量 ...
C++：将char*指针强制转换成一个指向结构体的指针
在使用Socket与雷达进行通信采集数据时,会遇到"打包与解包"的问题,在打包和解包过程中,会涉及到结构体指针与字符指针间的强制转换.如下: 打包就是将包头与信息封装成一定大小的包 ...
C指针8：二级指针（意思就是指向指针的指针）
指针可以指向一份普通类型的数据,例如 int.double.char 等,以下简称一级指针: 也可以指向一份指针类型的数据,例如 int *.double *.char * 等.以下简称二级指针:即如 ...
C指针5：字符串指针（指向字符串的指针）
在C语言中没有特定的字符串类型,我们通常是将字符串放在一个字符数组中,字符数组实际上是一系列字符的集合,也就是字符串(String).在C语言中,没有专门的字符串变量,没有string类型,通常就用一 ...
C指针4：数组指针（指向数组的指针）
先明确两个概念:(1和2是两个完全不一样的东西) 1.数组指针:如果一个指针指向了数组(该数组就是普通定义的数组),我们就称它为数组指针(Array Pointer).(1强调的是指针) 2.指针数组 ...

关于this的指向问题（总结）

关于this的指向问题（总结）相关推荐

最新文章

热门文章