我对JavaScript中this的一些理解

focusj 发布于2019-08-23 15:23 / 1975人阅读

摘要：匿名函数的执行环境具有全局性，因此它的对象通常指向。如果对此有疑惑，可以看知乎上的答案知乎匿名函数的指向为什么是作为对象方法的调用，指向该对象当函数作为某个对象的方法调用时，就指这个函数所在的对象。

因为日常工作中经常使用到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。
如果对此有疑惑，可以看知乎上的答案：知乎 - 匿名函数的this指向为什么是window?

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有疑问的话，可以看冴羽的博客 JavaScript深入之new的模拟实现

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

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.

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的概念越加清晰。

参考：
阮一峰 - Javascript 的 this 用法
前端开发博客 - 深入理解JavaScript this

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

服务器托管云服务器 javascript中this详解 javascript的this vps日常维护中的一些要点总结 javaScript中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101969.html

我对JavaScript对象的理解

摘要：通过这种操作，就有了构造函数的原型对象里的方法。你也看到了，就是一个普通对象，所以这种寄生式继承适合于根据已有对象创建一个加强版的对象，在主要考虑通过已有对象来继承而不是构造函数的情况下，这种方式的确很方便。原文地址在我的博客, 转载请注明出处，谢谢！标签： [es5对象、原型, 原型链, 继承] 注意（这篇文章特别长）这篇文章仅仅是我个人对于JavaScript对象的理解，并不是...

roadtogeek 2019-08-21 16:59 评论0 收藏0
对Javascript 类、原型链、继承的理解

摘要：因为我们用这个函数来构造对象，所以我们也把称作构造函数。所以通过定义构造函数，就相当于定义了一个类，通过关键字，即可生成一个实例化的对象。一、序言和其他面向对象的语言（如Java）不同，Javascript语言对类的实现和继承的实现没有标准的定义，而是将这些交给了程序员，让程序员更加灵活地（当然刚开始也更加头疼）去定义类，实现继承。（以下不讨论ES6中利用class、exten...

sevi_stuo 2019-08-22 17:36 评论0 收藏0
用函数式编程对JavaScript进行断舍离

摘要：函数式编程一开始我并不理解。渐渐地，我熟练掌握了使用函数式的方法去编程。但是自从学习了函数式编程，我将循环都改成了使用和来实现。只有数据和函数，而且因为函数没有和对象绑定，更加容易复用。在函数式的中，这些问题不复存在。译者按: 当从业20的JavaScript老司机学会函数式编程时，他扔掉了90%的特性，也不用面向对象了，最后发现了真爱啊！！！原文: How I rediscov...

dkzwm 2019-08-21 16:48 评论0 收藏0
JavaScript中的this浅谈

摘要：在函数中调用时指向调用函数的对象，调用函数的在不同情况下有直接调用，此时函数内部的指向全局对象作为对象的方法，此时指向该对象构造函数，此时指向构造的实例对象改变指向是语言的一个关键字。但是有一个总的原则，那就是指的是，调用函数的那个对象。 this在全局中调用时指向的是全局对象。this在函数中调用时指向调用函数的对象，调用函数的在不同情况下有 1.直接调用，此时函数内部的this指向...

YJNldm 2019-08-21 17:52 评论0 收藏0
ES6部分方法点评（一）

一直以来，我对ES6都不甚感兴趣，一是因为在生产环境中使用ES5已是处处碰壁，其次则是只当这ES6是语法糖不曾重视。只是最近学习react生态，用起babel来转换jsx之余，也不免碰到诸多用上ES6的教程、案例，因此便稍作学习。这一学习，便觉得这语法糖实在是甜，忍不住尝鲜，于是记录部分自觉对自己有用的方法在此。箭头函数(Arrow Functions) 箭头函数是一个典型的语法糖，即创造了一种...

weakish 2019-08-19 18:14 评论0 收藏0