博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
我对JavaScript中this的一些理解
阅读量:6676 次
发布时间:2019-06-25

本文共 1847 字,大约阅读时间需要 6 分钟。

因为日常工作中经常使用到this,而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。

这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验,为了能让自己更好的理解this,进而总结一篇文章。

this 是什么

this是 JavaScript 语言的一个关键字。它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。

实际是在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数。

this 指向的四种情况

这四种情况基本涵盖了JavaScript中常见的this指向问题

1. 全局的函数调用,this指向window

var a = 1;function fn() {   console.log(this.a);}fn();  // 1

这种 情况下的this其实就是window对象,这个很好理解。

但是还有一种情况,就是匿名函数的this也会指向window

var a= 'window';var obj={a: 'object'}obj.fn=function(){    console.log(this.a);//Object    +function(){        console.log(this.a)//window    }()}obj.fn()

匿名函数的执行环境具有全局性,因此它的this对象通常指向windows。

如果对此有疑惑,可以看知乎上的答案:

2. 作为对象方法的调用,this指向该对象

var a ='window'var obj={  a: 'object',  fn: function(){    console.log(this.a);  }}obj.fn(); // object

当函数作为某个对象的方法调用时,this就指这个函数所在的对象。

3. 作为构造函数调用,this指向实例

function fn() { this.x = 1;}var obj = new fn();console.log(obj.x) // 1

构造函数中的this,在通过new之后会生成一个新对象,this就指这个新对象。

new有疑问的话,可以看

4. 使用call/apply/bind调用, this指向第一个参数

var obj1={  a: 'boj1'}var obj2={  a: 'obj2'}var obj3={  a: 'obj3'}function fn(){  console.log(this.a);}// applyfn.apply(obj1);// 'obj1'// callfn.call(obj2);// 'obj2'// bindvar fnBind= fn.bind(obj3);fnBind();// 'obj3'

call/ apply / bind 都有一个共同的特点,就是改变this的指向,使用这种方法可以把别人的方法拿过来用到自己身上。

第一个参数为 null 的时候,视为指向 window.

var a='window'var obj={  a: 'boj',  fn: function (){    console.log(this.a);  }}obj.fn.call(null);// 'window'

在这里如果是obj.fn()调用的fn()方法,this应该指向obj没错。

但是因为call(null)的存在,改变了指向,所以this指向了window

深入理解

正因为比较难理解,所以this指向也是面试时最容易遇到的问题,比如下面这道我曾遇到的一个面试题:

var length = 10;function fn(){  console.log(this.length);}var obj = {  length: 5,  method: function(fn){    fn();    arguments[0]();  }};obj.method(fn, 1);

在这道题里,不仅考察了对this熟悉程度,还考察了函数的传参形式、作用域、以及arguments这种特殊的数组的理解。

只有真正理解了这些才能正确的判断this究竟指向了谁。
所以,只有对JavaScript中的各项知识点深入理解,才会对this的概念越加清晰。

参考:

文章仅日常学习工作所得,欢迎大家访问我的。

转载地址:http://olgxo.baihongyu.com/

你可能感兴趣的文章
【数据结构第三周】树知识点整理(上)
查看>>
python 2.7 升级到 3.5
查看>>
script加defer="defer" 的意义
查看>>
3、偶像密室杀人事件
查看>>
2018-2019-2 网络对抗技术 20165335 Exp3 免杀原理与实践
查看>>
div高度自适应
查看>>
JS 实现百度搜索功能
查看>>
图像出增强之锐化---拉普拉斯锐化
查看>>
python PIL相关操作
查看>>
常用数据结构及复杂度
查看>>
poj3278 Catch That Cow
查看>>
IDEA调试方法总结及各种Step的区别
查看>>
简易图片轮播效果
查看>>
Spring Boot 数据库连接池 Druid
查看>>
Android学习笔记(十)——ListView的使用(上)
查看>>
NodeList对象的特点
查看>>
【转载】【原创】生命中,要有自己的一方晴天
查看>>
JQuery操作CheckBox和Radio
查看>>
快速求幂
查看>>
CSS中filter滤镜的学习笔记
查看>>