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

本文共 1911 字,大约阅读时间需要 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的概念越加清晰。

参考:

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

转载于:https://juejin.im/post/5c6e74f2f265da2db30550b7

你可能感兴趣的文章
Sphinx的介绍和原理探索
查看>>
php中mysql数据库操作类 -李盛鹏 -博客园
查看>>
coreseek增量索引
查看>>
ubuntu更新源(2018最新)
查看>>
python使用小结——iloc与loc的使用
查看>>
linux crontab定时任务运行shell脚本(shell执行sql文件)
查看>>
Python用Pillow(PIL)进行简单的图像操作
查看>>
[51Nod 1584] 加权约数和
查看>>
微信小程序的同步操作
查看>>
Lua中的操作系统库
查看>>
环境变量path的值大于1024的解决办法
查看>>
webpack 通用环境快速搭建
查看>>
js获取url参数值
查看>>
Django 文件下载功能
查看>>
浅谈前端性能优化(PC版)
查看>>
modernizr的介绍和使用
查看>>
Java小实验之数据转换
查看>>
ASP.NET MVC之从控制器传递数据到视图方式
查看>>
IsPostBack原理详解
查看>>
华为交换机-SNMP配置
查看>>