JavaScript中的“this”关键字的保姆级详解！纯干货

JavaScript的学习是我们在前端学习的道路上非常重要的部分，而作为JavaScript中经常会用到的“this”关键字对于很多人来说都是一个难点，然而，“this”关键字却也是很多前端人在面试时都是被问到的问题。

 

this关键字是一个非常重要的语法点，作为一个前端开发工程师，如果你不能理解它的含义，那么大部分的开发任务你可能都无法完成。

所以，今天我们就通过这篇文章为大家详细讲解一下JavaScript中的“this”关键字，保证看完这篇你就能明白“this”关键字到底是什么，应该怎么使用。

一、this关键字是什么？

this从字面上来看是这，这个(指较近的人或事物)，而JS中的this关键字则表示对当前对象的一个引用。this关键字在Javascript中代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如，：

•  function test(){

•  　　this.x = 1;

•   

•  }

根据函数使用场合的变化，this的值也会随之发生变化。但是，有一个不变的原则是this指的是调用函数的那个对象。

二、this关键字的指向

1、this关键字的指向

this并不是固定不变的，是可以根据上下文（执行时环境）的改变而改变的。this的指向在函数定义的时候是不能确定的，只有函数执行的时候才能确定this的指向。

(1) 如果单独使用，this 表示全局对象。

(2) 在方法中，this 表示该方法所属的对象。

(3) 在函数中，this 表示全局对象。

(4) 在函数中，在严格模式下，this 是未定义的(undefined)。

(5) 在构造函数中，this指向创造出来的实例

2、this关键字指向的基本要素

(1) this指向的永远只可能是对象；

(2) this指向谁，并不会取决于this写在哪，而是取决于函数在哪调用；

(3) this指向的对象称为函数上下文，也叫函数的调用者。

3、this关键字的四种指向情况

(1) 在普通的函数中，this指向全局对象window

• // 普通方法中

• function bar () {

•  console.log(this) // this指向的是window

•  }

•  bar()

(2) 在构造函数中，this指向创造出来的实例

•  // 构造函数中

•  function Animal() {

•   this.name = 'zzz',

•   this.sayName = function () {

•    console.log(this) // 指向的是a实例

•   }

•  }

•  var a = new Animal()

•  a.sayName()

（3）在方法中，this 表示该方法所属的对象。

•  // 对象方法

•  var obj = {

•   name: '张三',

•   fullName: function () {

•    console.log(this.name)

•   }

•  }

•  obj.fullName() // 这儿的this指向 obj这个对象

 （4）在函数中，在严格模式下，this 是未定义的(undefined)。

•  // 函数严格模式下

•  <script type="text/javascript">

•   'use strict'

•   function a () {

•    console.log(this)

•   }

•   a() // undefined

•  </script>

 

 三、怎么改变this关键字的指向？

改变this指向的方法有三个分别为：call、apply、bind。

1、call（无数个参数）

第一个参数改变this指向，第二个参数为实参，使用之后会自动执行该函数。

•  function fn(a,b,c){

•   

•       console.log(this,a+b+c); // this指向window

•   

•  }

•  fn();

•   

•  fn.call(document,1,2,3);//call改变之后this指向document  

•   

•  //输出 #document 6   1,2,3是实参 结果相加为6 

2、apply（两个参数）

第一个参数改变this指向，第二个参数为数组（里面为实参），使用时候会自动执行函数。

•  function fn(a,b,c){

•   

•       console.log(this,a+b+c);

•   

•  }

•   

•  fn();

•   

•  fn.apply(document,[1,2,3]);

3、bind（无数个参数）

第一个参数改变this指向,第二个参数之后为实参,返回值为一个新的函数,使用的时候需要手动调用下返回 的新函数（不会自动执行）。

•  function fn(a,b,c){

•   

•      console.log(this,a+b+c); //window

•  }

•   

•  let ff = fn.bind('小明',1,2,3); //手动调用一下

 共同点：

第一个参数都为改变this的指针。若第一参数为null/undefined，this默认指向window

 区别：

(1) call、apply可以自动执行，bind不会自动执行，需要手动调用；

(2) call、bind都有无数个参数，apply只有两个参数，而且第二个参数为数组。

四、This关键字的优先级

this 存在很多使用场景，当多个场景同时出现时，就要根据优先级来判断 this 的指向。优先级：「new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定」

了解完上面的内容，你对JS中的this关键字就已经有了一个比较全面的了解。我们在工作或者学习过程中可以尝试经常去运用this关键字，这样可以加深我们的记忆和理解，以便于之后更好的使用到这个工具，帮助我们提高工作效率。