一起扫荡javascript（五）——浅谈javascript的上下文

JavaScript中的上下文（Context）和this机制是理解该语言作用域和对象引用的关键。以下是对核心概念的清晰梳理：

1. 快速访问当前作用对象

   上下文（Context）是程序执行时当前作用域的焦点，通过this关键字动态指向不同对象。

   例如：在对象方法中，this指向调用该方法的对象，直接访问其属性（如this.a）。

2. 解决作用域链的局限性

   当闭包或嵌套函数需要访问外部变量时，传统方式需逐层传递引用（如var self = this），而this提供隐式绑定，简化代码。

• 规则：独立调用函数时，this指向全局对象（浏览器为window）。
• 示例：function foo() { console.log(this.a); }var a = 2;foo(); // 输出: 2（this指向window）

• 规则：通过对象调用方法时，this指向调用对象。
• 示例：var obj = { a: 1, foo: function() { console.log(this.a); } };obj.foo(); // 输出: 1（this指向obj）

• 规则：通过call、apply、bind强制指定this。
• 示例：function foo() { console.log(this.a); }var obj = { a: 3 };foo.call(obj); // 输出: 3（this被显式绑定到obj）

• 规则：构造函数调用时，this指向新创建的对象。
• 示例：function Foo(a) { this.a = a; }var bar = new Foo(4);console.log(bar.a); // 输出: 4（this指向实例bar）

• 规则：箭头函数无自己的this，继承外层作用域的this。
• 示例：var obj = { a: 5, foo: () => console.log(this.a) };obj.foo(); // 输出: undefined（外层this可能是window）

1. 嵌套函数中的this丢失

   问题：内部函数继承外层函数的this，但若外层this指向全局，则内部函数无法访问对象属性。

   解决：使用箭头函数或提前保存this（如var self = this）。

   var obj = { a: 6, foo: function() { var bar = () => console.log(this.a); // 箭头函数继承外层this bar(); // 输出: 6 }};

2. 回调函数中的this

   问题：回调函数可能由其他上下文调用（如事件监听器），导致this指向意外对象。

   解决：使用bind显式绑定或箭头函数。

   document.body.addEventListener('click', function() { console.log(this); // 指向触发事件的DOM元素}.bind(obj)); // 强制绑定到obj

3. 严格模式的影响

   严格模式下，独立调用的函数this为undefined，而非全局对象。

• 函数池机制：函数在声明时被创建并存储，调用时从池中取出执行，执行后返回池中。
• 动态上下文：this的指向由调用方式决定，而非定义位置。例如：function fn() { console.log(this.a); }var obj1 = { a: 7, fn: fn };var obj2 = { a: 8, fn: fn };obj1.fn(); // 输出: 7（this指向obj1）obj2.fn(); // 输出: 8（this指向obj2）

• this的本质：动态指向当前执行上下文的对象，由调用方式决定。
• 关键点：

  明确函数调用时的上下文对象。

  注意嵌套函数、回调函数中的this绑定问题。

  善用箭头函数和显式绑定（bind）控制this。

通过理解这些规则，可以避免常见的this陷阱，写出更可维护的代码。