前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我对JavaScript中this的一些理解

我对JavaScript中this的一些理解

作者头像
九旬
发布2020-10-23 15:55:24
4040
发布2020-10-23 15:55:24
举报
文章被收录于专栏:九旬大爷九旬大爷

因为日常工作中经常使用到this,而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。 这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验,为了能让自己更好的理解this,进而总结一篇文章。

#this 是什么

this是 JavaScript 语言的一个关键字。它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体内部使用。 实际是在函数被调用时才发生的绑定,也就是说this具体指向什么,取决于你是怎么调用的函数。

#this 指向的四种情况

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

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

代码语言:javascript
复制
var a = 1;
function fn() {
   console.log(this.a);
}
fn();  // 1

这种 情况下的this其实就是window对象,这个很好理解。 但是还有一种情况,就是匿名函数的this也会指向window

代码语言:javascript
复制
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。 如果对此有疑惑,可以看知乎上的答案:知乎 - 匿名函数的this指向为什么是window?

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

代码语言:javascript
复制
var a ='window'
var obj={
  a: 'object',
  fn: function(){
    console.log(this.a);
  }
}

obj.fn(); // object

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

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

代码语言:javascript
复制
function fn() {
 this.x = 1;
}
var obj = new fn();
console.log(obj.x) // 1

构造函数中的this,在通过new之后会生成一个新对象,this就指这个新对象。 对new有疑问的话,可以看 冴羽的博客 JavaScript深入之new的模拟实现

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

代码语言:javascript
复制
var obj1={
  a: 'boj1'
}
var obj2={
  a: 'obj2'
}
var obj3={
  a: 'obj3'
}
function fn(){
  console.log(this.a);
}
// apply
fn.apply(obj1);// 'obj1'
// call
fn.call(obj2);// 'obj2'
// bind
var fnBind= fn.bind(obj3);
fnBind();// 'obj3'

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

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

代码语言:javascript
复制
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指向也是面试时最容易遇到的问题,比如下面这道我曾遇到的一个面试题:

代码语言:javascript
复制
var length = 10;
function fn(){
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn){
    fn();//10
    arguments[0]();//2 这里的this指向的arguments,所以获取的是arguments.length
  }
};
obj.method(fn, 1);

在这道题里,不仅考察了对this熟悉程度,还考察了函数的传参形式、作用域、以及arguments这种特殊的数组的理解。 只有真正理解了这些才能正确的判断this究竟指向了谁。 所以,只有对JavaScript中的各项知识点深入理解,才会对this的概念越加清晰。

参考:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • #this 是什么
  • #this 指向的四种情况
    • #1. 全局的函数调用,this指向window
      • #2. 作为对象方法的调用,this指向该对象
        • #3. 作为构造函数调用,this指向实例
          • #4. 使用call/apply/bind调用, this指向第一个参数
          • #深入理解
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档