乐趣区

关于javascript:this指向问题你真的彻底掌握了吗

jiezi

在前端的面试中，this 指向与面向对象是必考题，也是日常开发中绕不开的话题，很多前端老手总感觉 this 指向变化莫测，琢磨不透；也有很多前端老鸟时常在 this 指向这里掉坑，本文次要围绕 this 指向探讨一下，看看你是否真的彻底把握了。

全局作用域中

咱们能够间接在全局中向控制台打印 this，查看指向；

  1. 在浏览器中执行，会输入 
console.log(this)  // 输入 window
  1. 在 node 中执行，会输入 
console.log(this)  // 输入 {}

能够看出在 node 环境中输入了一个空对象，能够进一步测试 

console.log(this === module.exports)  // 输入 true

论断：全局作用域中，在浏览器执行 this 指向的是 window；在 node 中执行，this 指向的是 module.exports。

函数中的 this 指向

按函数不同的应用场景，演绎为以下几种状况，别离举例进行阐明。

1. 事件处理函数

设置一个简略的场景，有两个按钮，点击按钮，能够让按钮背景色变成红色，两个按钮互不影响 

...
<button id="btn1"> 按钮 1 </button>
<button id="btn2"> 按钮 2 </button>
....
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");

btn1.onclick = changeBgColor;
btn2.onclick = changeBgColor;

function changeBgColor() {this.style.backgroundColor = "red";}

论断：此时 this 指向的是调用它的 DOM 对象。

2. 全局作用域中的一般函数

  1. 在一般模式下间接调用 fn()，this 会指向 window；
function fn() {console.log(this);
}

fn();             // 输入 window
window.fn();      // 输入 window
  1. 在严格模式下调用，this 指向的是 undefined，如下：
'use strict'

function() {console.log(this);
}

fn();             // 输入 undefined
window.fn();      // 输入 window

论断：谁调用指向谁，严格模式下，函数没有被 window 显示调用，会指向 undefined。

3. 对象中的办法 

var obj = {
  a: 10,
  b: function() {console.log(this);
  }
}

obj.b();          // 输入 {a:10，b: f}, 即对象 obj
window.obj.b();   // 输入 {a:10，b: f}, 即对象 obj

var c = obj.b;
c();             // 输入 window
window.c();      // 输入 window

论断：如果函数被多层对象蕴含，当被最外层调用时，this 指向的仍是它上一层对象。

4. 构造函数 

function Fn(age) {
  this.age = age
  console.log(this);
}

var obj = new Fn(31);  // 输入 Fn {a:31}，即新创建的对象

# 有种非凡状况，当构造函数中存在 return 时 

function Fn(argu) {
  this.age = 10;
  return argu
}
// 返回个空字符传
 var obj1 = new Fn('');
 console.log(obj1.age); // 输入 10

// 返回个对象
var obj2 = new Fn({});
console.log(obj2.age); // 输入 undefined

// 返回 null
var obj3 = new Fn(null);
console.log(obj3.age); // 输入 10

论断：在构造函数中如果 return 一个对象，this 指向返回的的对象，return null 和 非对象 及没有显式 return 时，则 this 指向 new 新创建的对像。

5. 箭头函数 

var obj1 = {
  a: 10,
  b: function() {console.log('一般函数：', this)
  }
}

var obj2 = {
  a: 20,
  b: () => {console.log('箭头函数：', this)
  }
}

obj1.b();  // 输入 {a:10, b:f} 即 obj1 对象
obj2.b();  // 输入 window 对象

论断：箭头函数自身是没有 this 和 arguments 的，在箭头函数中援用 this 实际上调用的是定义上一层作用域的 this，这里强调一下是上一层作用域，因为对象是不能造成独立的作用域。

退出移动版