JavaScript中this指向深度解析

this的核心判定原则

在JavaScript中，this并非在定义时确定，而是在函数执行时根据调用方式动态绑定。其本质是与面向对象编程紧密关联的关键字，但在函数式编程或非对象上下文中，它往往表现为函数调用的副作用或默认的全局引用。理解这一前提，是掌握后续各种复杂场景的基础。

第1步：构造函数中的this指向实例

目的：理解类与对象的创建过程中，属性如何挂载到当前实例。
操作：在构造函数内部使用this赋值，并将方法挂在原型上。
结果：this指向新生成的实例对象。

/**
 * 页签构造函数
 * @param {string} nav 页签标题的class
 * @param {string} content 页面内容的class
 */
function Tab(nav, content) {
  this.nav = nav;
  this.content = content;
}

Tab.prototype.getNav = function() {
  return this.nav;
};

Tab.prototype.setNav = function(nav) {
  this.nav = nav;
};

第2步：对象字面量方法中的this指向调用者

目的：展示非构造函数模式下，对象方法的this绑定。
操作：直接通过对象访问方法来修改自身属性。
完成状态：this指向拥有该方法的对象实体。

var tab = {
  nav: '',
  content: '',
  getNav: function() {
    return this.nav;
  },
  setNav: function(n) {
    this.nav = n;
  }
};

第3步：独立函数与全局环境下的this指向窗口

目的：识别非对象绑定调用时的默认行为及潜在风险。
警告：在全局环境中，非严格模式下this指向全局对象（浏览器中为window），且通过var声明的变量会自动成为全局对象的属性，极易造成命名污染。

操作验证：

// 1. 独立函数调用，this指向window
function showMsg() {
  alert(this.message); // undefined
}
showMsg();

// 2. 全局变量泄露测试
var andy = '刘德华';
alert(andy === window.andy); // true
alert(andy === this.andy);   // true

// 3. 经典的闭包/指针误解陷阱
var x = 10;
function func() {
  alert(this.x); // 10 (因为func未被对象绑定)
}
var obj = {
  x: 20,
  fn: function() {
    alert(this.x); // 20
  }
};
var fn = obj.fn;
fn(); // 10 (fn脱离obj独立调用，this回归window)
func(); // 10

结论：只要函数不是作为对象的方法被调用，其内部的this在非严格模式下均指向全局对象window。

第4步：DOM事件处理中的this指向触发元素

目的：利用W3C DOM标准中面向对象的特性，确定事件回调中的上下文。
原理：浏览器将HTML标签实现为特定的Element类（如HTMLDivElement）。当事件监听器执行时，this被自动绑定到接收事件的DOM节点实例上。

不同写法的一致性：

• 内联事件：<div onclick="alert(this.id)">，此处this指向div。
• 原生绑定：nav.onclick = function() { ... }，this指向#nav。
• JQuery绑定：$('#nav').on('click', function() { ... })，jQuery保持了标准行为，this指向原始DOM节点，而非jQuery包装集。如需jQuery对象，需手动包裹：$el = $(this)。

注意事项：若直接在onclick中调用独立函数（如onclick="getId()"），由于函数调用本身未绑定对象，this仍会指向window，导致获取不到DOM属性。

第5步：使用call/apply/bind强制改变this指向

目的：发挥JavaScript动态语言特性，实现方法复用或上下文修正。
操作：call和apply允许显式指定函数执行时的this值，区别仅在于参数传递方式。bind则返回一个新的绑定函数，适用于需要延迟执行或作为回调的场景（如定时器、事件监听）。

var context = { message: 'Hello Context' };

function greet(lang) {
  alert(this.message + ' in ' + lang);
}

// 执行时绑定
greet.call(context, 'en'); // 'Hello Context in en'

// ES5 bind 预绑定
var boundGreet = greet.bind(context);
boundGreet('cn');

此特性在UI库（如Backbone、jQuery）中广泛用于修复事件回调中的this丢失问题或实现继承机制。

第6步：ES6箭头函数中的词法this

目的：解决传统匿名函数中this指向混乱的问题。
规则变化：箭头函数不拥有自己的this绑定，它捕获其所在作用域（定义时）的this值，即“定义在哪里，this就指向哪里”。

var book = {
  author: 'John Resig',
  init: function() {
    // 传统写法 this 指向 document，而非 book
    // document.onclick = function(ev) {
    //   alert(this.author); 
    // };

    // 箭头写法：捕获 init 方法中的 this (即 book)
    document.onclick = () => {
      alert(this.author); // 正确输出 'John Resig'
    };
  }
};
book.init();

总结与最佳实践

JavaScript的this本质服务于面向对象模型。在传统函数中，遵循“看调用者”的原则；在箭头函数中，遵循“看定义处”的原则。在DOM操作中，习惯性地记住事件处理器内的this即为当前元素。为了避免混淆，建议在异步回调或嵌套函数中优先使用箭头函数以明确上下文，或在必要时通过bind显式锁定作用域。

以上就是JavaScript中this指向的详细解析，更多关于前端基础优化的资料请关注本站其它相关文章！