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

本文共 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://ddkpa.baihongyu.com/

你可能感兴趣的文章
Android AccessibilityService机制源码解析
查看>>
Android基础知识
查看>>
寻找数组主元素(Majority Element))
查看>>
如何将ST05生成的trace导入HANA Studio里并以图形化方式显示出来
查看>>
TiDB 在西山居实时舆情监控系统中的应用
查看>>
说一说 JVM 对锁的优化
查看>>
图像处理库GPUImage简单使用
查看>>
基于Java语言构建区块链(五)—— 地址(钱包)
查看>>
Elastic Search 安装和配置
查看>>
手动实现 express
查看>>
Let's Encrypt免费ssl证书安装使用详解
查看>>
有个功能丰富的 react 脚手架,了解下?
查看>>
SnippetsLab - 像纳博科夫写小说一样写代码
查看>>
React-Redux 源码解析 二(middleware)
查看>>
JLRoutes 实现原理分析
查看>>
第二章 OC程序设计
查看>>
初识Python
查看>>
关于dispatch_once的坑及注意点
查看>>
TreeMap之元素插入
查看>>
Vue二次封装axios为插件使用
查看>>