Vue.js

Appearance

On this page

this 绑定：执行上下文中的接收者 ​

this可能是JavaScript中最令人困惑的概念之一。你是否遇到过这样的情况：在回调函数中访问this，却发现它指向了window或undefined？为什么有时候this指向调用对象，有时候却不是？箭头函数的this又为什么"无法改变"？

这些问题的答案都藏在V8引擎对this绑定的实现机制中。本章将深入探讨V8如何在不同的调用场景下确定this的值，以及这背后的设计原理。

this绑定的本质 ​

在ECMAScript规范中，this是执行上下文的一个组成部分，称为ThisBinding。每当函数被调用时，V8都会根据调用方式为新创建的执行上下文设置this值。与作用域链不同，this不是在函数定义时确定的，而是在函数调用时动态绑定的。

让我们从一个简单的例子开始理解：

javascript
const obj = {
  name: 'MyObject',
  getName: function() {
    return this.name;
  }
};

// 不同的调用方式，this指向不同
console.log(obj.getName());           // 'MyObject' - this指向obj

const getName = obj.getName;
console.log(getName());               // undefined - this指向全局对象

console.log(getName.call(obj));       // 'MyObject' - 显式绑定this为obj

这个例子展示了this的核心特性：它的值取决于函数如何被调用，而非函数在哪里定义。

V8中的this绑定规则 ​

V8在确定this值时遵循一套明确的规则。我们可以通过实现一个简化版本来理解这些规则：

javascript
// V8 this绑定的简化实现
class ThisBinding {
  // 规则1：默认绑定（独立函数调用）
  static defaultBinding(strictMode) {
    if (strictMode) {
      return undefined;
    }
    return globalThis;  // 非严格模式下指向全局对象
  }
  
  // 规则2：隐式绑定（作为对象方法调用）
  static implicitBinding(obj, func) {
    // 方法调用：obj.method()
    // this绑定到调用对象
    return obj;
  }
  
  // 规则3：显式绑定（call/apply/bind）
  static explicitBinding(thisArg) {
    // call/apply/bind指定的this值
    if (thisArg === null || thisArg === undefined) {
      // 非严格模式下，null/undefined转换为全局对象
      return globalThis;
    }
    // 原始类型会被包装成对象
    return Object(thisArg);
  }
  
  // 规则4：new绑定（构造函数调用）
  static newBinding() {
    // new操作符创建新对象并绑定到this
    return Object.create(null);
  }
  
  // 规则5：箭头函数（词法this）
  static arrowFunctionBinding(lexicalThis) {
    // 箭头函数捕获定义时的this值
    return lexicalThis;
  }
}

这个实现展示了V8确定this值的五种主要规则，它们的优先级从低到高依次是：默认绑定 < 隐式绑定 < 显式绑定 < new绑定，箭头函数则完全不同，使用词法this。

默认绑定：独立函数调用 ​

当函数作为独立函数调用时（不作为对象的方法），使用默认绑定规则：

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

// 非严格模式
showThis();  // 全局对象（浏览器中是window，Node.js中是global）

// 严格模式
'use strict';
function showThisStrict() {
  console.log(this);
}
showThisStrict();  // undefined

V8在字节码层面对这两种情况有不同的处理：

javascript
// 模拟V8的默认绑定实现
class V8DefaultBinding {
  static resolveThis(context) {
    // 检查函数的严格模式标志
    if (context.function.isStrict) {
      return undefined;
    }
    
    // 非严格模式：返回全局对象
    // V8内部有一个专门的全局对象指针
    return context.globalObject;
  }
}

// V8字节码（简化表示）
// 非严格模式：
//   LdaGlobal <name>  // 加载全局对象
// 严格模式：
//   LdaUndefined       // 加载undefined

这种设计让V8能够在编译时就确定this的处理方式，避免运行时检查。

隐式绑定：对象方法调用 ​

当函数作为对象的方法被调用时，this绑定到调用该方法的对象：

javascript
const user = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  },
  nested: {
    name: 'Bob',
    greet: function() {
      console.log(`Hello, ${this.name}`);
    }
  }
};

user.greet();          // Hello, Alice - this指向user
user.nested.greet();   // Hello, Bob - this指向nested

// 注意：只有最后一层对象才是this的绑定目标

V8在处理属性访问和方法调用时，会同时返回属性值和接收者对象：

javascript
// 模拟V8的隐式绑定机制
class V8ImplicitBinding {
  // 属性访问返回{value, receiver}
  static getProperty(obj, key) {
    const value = obj[key];
    const receiver = obj;  // 接收者就是访问的对象
    return { value, receiver };
  }
  
  // 方法调用时使用receiver作为this
  static callMethod(obj, methodName, args) {
    const { value: method, receiver } = this.getProperty(obj, methodName);
    
    if (typeof method === 'function') {
      // 调用函数，传入receiver作为this
      return method.apply(receiver, args);
    }
    
    throw new TypeError(`${methodName} is not a function`);
  }
}

// 使用示例
const testObj = {
  value: 42,
  getValue: function() { return this.value; }
};

const result = V8ImplicitBinding.callMethod(testObj, 'getValue', []);
console.log(result);  // 42

这种机制确保了方法调用时this总是指向正确的对象。

隐式绑定的丢失 ​

隐式绑定有一个常见的陷阱：当方法被赋值给变量或作为参数传递时，绑定会丢失：

javascript
const obj = {
  name: 'Object',
  getName: function() {
    return this.name;
  }
};

// 情况1：赋值给变量
const getName = obj.getName;
console.log(getName());  // undefined - this指向全局对象

// 情况2：作为回调传递
function executeCallback(callback) {
  callback();  // 独立函数调用，丢失this绑定
}
executeCallback(obj.getName);  // undefined

// 情况3：setTimeout等异步场景
setTimeout(obj.getName, 100);  // undefined

这是因为函数引用被传递后，已经脱离了原始对象的上下文。V8看到的只是一个独立的函数调用，而不是方法调用。解决方案有多种：

javascript
// 解决方案1：使用bind创建绑定函数
const boundGetName = obj.getName.bind(obj);
setTimeout(boundGetName, 100);  // 正确

// 解决方案2：使用箭头函数包装
setTimeout(() => obj.getName(), 100);  // 正确

// 解决方案3：使用闭包保存this
const self = obj;
setTimeout(function() {
  console.log(self.name);
}, 100);  // 正确

显式绑定：call、apply和bind ​

call、apply和bind方法允许我们显式指定函数的this值：

javascript
function greet(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}

const user = { name: 'Alice' };

// call：逐个传递参数
console.log(greet.call(user, 'Hello', '!'));
// Hello, Alice!

// apply：参数作为数组传递
console.log(greet.apply(user, ['Hi', '.']));
// Hi, Alice.

// bind：创建新函数，永久绑定this
const boundGreet = greet.bind(user, 'Hey');
console.log(boundGreet('?'));
// Hey, Alice?

V8对这三个方法有专门的内建实现。让我们模拟其核心逻辑：

javascript
// 模拟V8的call/apply/bind实现
class V8ExplicitBinding {
  // Function.prototype.call的简化实现
  static call(func, thisArg, ...args) {
    // 1. 处理thisArg
    const context = this.normalizeThis(thisArg);
    
    // 2. 创建新的执行上下文
    const executionContext = {
      thisBinding: context,
      lexicalEnvironment: func.environment,
      variableEnvironment: func.environment
    };
    
    // 3. 执行函数
    return func.execute(executionContext, args);
  }
  
  // Function.prototype.apply的简化实现
  static apply(func, thisArg, argsArray) {
    const args = Array.isArray(argsArray) ? argsArray : [];
    return this.call(func, thisArg, ...args);
  }
  
  // Function.prototype.bind的简化实现
  static bind(func, thisArg, ...boundArgs) {
    // 返回一个新函数
    const boundFunction = function(...args) {
      // 合并绑定时的参数和调用时的参数
      const finalArgs = [...boundArgs, ...args];
      
      // 检查是否通过new调用
      if (new.target) {
        // new调用：忽略绑定的this，使用new创建的对象
        return func.apply(this, finalArgs);
      }
      
      // 普通调用：使用绑定的this
      return func.apply(thisArg, finalArgs);
    };
    
    // 保存原函数的length属性
    Object.defineProperty(boundFunction, 'length', {
      value: Math.max(0, func.length - boundArgs.length)
    });
    
    return boundFunction;
  }
  
  // 规范化this值
  static normalizeThis(thisArg) {
    // 严格模式下不转换，非严格模式下需要处理
    if (thisArg === null || thisArg === undefined) {
      return globalThis;
    }
    return Object(thisArg);  // 原始值转换为对象
  }
}

这个实现展示了几个关键点：

  1. call和apply的区别只在于参数传递方式
  2. bind创建的函数会永久绑定this值
  3. new操作符的优先级高于bind，会覆盖绑定的this

new绑定：构造函数调用 ​

使用new操作符调用函数时，会创建一个新对象并绑定到this：

javascript
function Person(name) {
  this.name = name;
  this.greet = function() {
    return `Hello, ${this.name}`;
  };
}

const alice = new Person('Alice');
console.log(alice.greet());  // Hello, Alice
console.log(alice.name);     // Alice

V8对new操作符的处理包含多个步骤：

javascript
// 模拟V8的new操作符实现
class V8NewOperator {
  static construct(constructor, args) {
    // 1. 创建新对象，原型指向constructor.prototype
    const instance = Object.create(constructor.prototype);
    
    // 2. 执行构造函数，this绑定到新对象
    const result = constructor.apply(instance, args);
    
    // 3. 如果构造函数返回对象，使用返回值；否则返回新对象
    if (result !== null && typeof result === 'object') {
      return result;
    }
    
    return instance;
  }
}

// 测试
function Test(value) {
  this.value = value;
  // 返回对象会覆盖默认行为
  // return { custom: 'object' };
}

const instance = V8NewOperator.construct(Test, [42]);
console.log(instance.value);  // 42

这个实现揭示了new绑定的特殊性：它不仅绑定this，还涉及对象的创建和原型链的建立。

箭头函数的词法this ​

箭头函数不遵循上述任何规则，而是在定义时捕获外层作用域的this值：

javascript
const obj = {
  name: 'Object',
  
  // 普通函数：this取决于调用方式
  regularMethod: function() {
    console.log('Regular:', this.name);
    
    // 内部函数的this会丢失
    function inner() {
      console.log('Inner:', this.name);
    }
    inner();  // undefined
  },
  
  // 箭头函数：捕获外层的this
  arrowMethod: function() {
    console.log('Arrow outer:', this.name);
    
    // 箭头函数继承外层this
    const inner = () => {
      console.log('Arrow inner:', this.name);
    };
    inner();  // Object
  }
};

obj.regularMethod();
obj.arrowMethod();

在V8内部，箭头函数的this作为闭包变量被捕获到Context对象中：

javascript
// 模拟箭头函数的this捕获
class V8ArrowFunction {
  // 箭头函数创建时捕获this
  static createArrowFunction(code, lexicalThis, lexicalEnv) {
    return {
      code: code,
      // 箭头函数的[[ThisMode]]为'lexical'
      thisMode: 'lexical',
      // 保存定义时的this值
      lexicalThis: lexicalThis,
      environment: lexicalEnv,
      
      // 调用时使用捕获的this
      call: function(thisArg, ...args) {
        // 忽略传入的thisArg，使用lexicalThis
        const context = {
          thisBinding: this.lexicalThis,  // 使用捕获的this
          lexicalEnvironment: this.environment
        };
        return this.code.execute(context, args);
      }
    };
  }
}

// 示例：模拟箭头函数的创建
function demonstrateArrowThis() {
  const outerThis = { name: 'Outer' };
  
  // 在某个this上下文中创建箭头函数
  const arrowFunc = V8ArrowFunction.createArrowFunction(
    { execute: (ctx) => ctx.thisBinding.name },
    outerThis,  // 捕获当前的this
    null
  );
  
  // 无论如何调用，this都不变
  console.log(arrowFunc.call({ name: 'Different' }));  // Outer
  console.log(arrowFunc.call(null));  // Outer
}

demonstrateArrowThis();

这种机制让箭头函数的this完全不受调用方式影响，解决了很多传统函数的this丢失问题。

this绑定的优先级 ​

当多个规则同时适用时，V8按照以下优先级决定this的值：

javascript
function showPriority() {
  console.log(this.name);
}

const obj1 = { name: 'Object 1' };
const obj2 = { name: 'Object 2' };

// 优先级测试
// 1. new vs 隐式绑定
obj1.fn = showPriority;
const instance = new obj1.fn();  // new优先
// this指向新创建的对象，而非obj1

// 2. new vs 显式绑定（bind）
const boundFn = showPriority.bind(obj1);
const instance2 = new boundFn();  // new仍然优先
// this指向新对象，忽略bind的绑定

// 3. 显式绑定 vs 隐式绑定
obj2.fn = showPriority;
obj2.fn.call(obj1);  // Object 1 - call优先于隐式绑定

// 4. 箭头函数无视所有规则
const arrowFn = () => console.log(this.name);
const obj3 = { name: 'Object 3', fn: arrowFn };
obj3.fn();  // 仍然使用定义时的this
obj3.fn.call(obj1);  // 无法改变
new obj3.fn();  // TypeError: arrowFn is not a constructor

优先级总结：

箭头函数（词法this）> new绑定 > 显式绑定（call/apply/bind）> 隐式绑定 > 默认绑定

this绑定的性能影响 ​

不同的this绑定方式对性能有不同的影响：

javascript
// 性能测试
function performanceTest() {
  const obj = { value: 42 };
  const iterations = 10000000;
  
  // 测试1：默认绑定
  function defaultBinding() {
    return this;
  }
  console.time('default binding');
  for (let i = 0; i < iterations; i++) {
    defaultBinding();
  }
  console.timeEnd('default binding');
  
  // 测试2：隐式绑定
  obj.method = function() {
    return this.value;
  };
  console.time('implicit binding');
  for (let i = 0; i < iterations; i++) {
    obj.method();
  }
  console.timeEnd('implicit binding');
  
  // 测试3：call调用
  function explicitBinding() {
    return this.value;
  }
  console.time('call binding');
  for (let i = 0; i < iterations; i++) {
    explicitBinding.call(obj);
  }
  console.timeEnd('call binding');
  
  // 测试4：bind调用
  const boundFunc = explicitBinding.bind(obj);
  console.time('bind binding');
  for (let i = 0; i < iterations; i++) {
    boundFunc();
  }
  console.timeEnd('bind binding');
  
  // 测试5：箭头函数
  const arrowFunc = () => obj.value;
  console.time('arrow function');
  for (let i = 0; i < iterations; i++) {
    arrowFunc();
  }
  console.timeEnd('arrow function');
}

performanceTest();
// 典型结果：
// default binding: ~10ms
// implicit binding: ~15ms
// call binding: ~80ms (较慢)
// bind binding: ~20ms
// arrow function: ~10ms (最快，因为没有this解析)

this绑定的最佳实践 ​

基于对this绑定机制的理解，我们可以总结出以下最佳实践：

1. 箭头函数用于回调 ​

javascript
// 不推荐：bind创建新函数
class Timer {
  constructor() {
    this.seconds = 0;
    setInterval(this.tick.bind(this), 1000);
  }
  
  tick() {
    this.seconds++;
    console.log(this.seconds);
  }
}

// 推荐：箭头函数自动捕获this
class TimerBetter {
  constructor() {
    this.seconds = 0;
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
}

2. 谨慎使用call/apply ​

javascript
// 不推荐：频繁使用call/apply
function processArray(arr) {
  return arr.map(function(item) {
    return this.process(item);
  }.bind(this));
}

// 推荐：使用箭头函数或提取this
function processArrayBetter(arr) {
  const processor = this;
  return arr.map(item => processor.process(item));
}

3. 构造函数使用大写命名 ​

javascript
// 明确标识构造函数
function Person(name) {
  this.name = name;
}

// 避免意外调用
const person = new Person('Alice');  // 正确

// 如果忘记new，严格模式会报错
'use strict';
function StrictPerson(name) {
  this.name = name;  // TypeError: Cannot set property
}

4. 避免动态this的复杂逻辑 ​

javascript
// 不推荐：难以追踪的this
const module = {
  getThis: function() {
    return function() {
      return this;
    };
  }
};

// 推荐：明确的this传递
const moduleBetter = {
  getThis: function() {
    const self = this;
    return function() {
      return self;
    };
  }
};

本章小结 ​

本章深入探讨了JavaScript中this绑定的底层机制。我们学习了以下核心内容：

  1. this绑定规则：V8根据五种规则确定this值，包括默认绑定、隐式绑定、显式绑定、new绑定和箭头函数的词法this。

  2. 绑定优先级：当多个规则冲突时，按照"箭头函数 > new > 显式 > 隐式 > 默认"的优先级决定this值。

  3. 常见陷阱：隐式绑定容易丢失，需要使用bind、箭头函数或闭包来保持this绑定。

  4. 性能考虑：箭头函数和默认绑定性能最好，call/apply相对较慢，应避免在性能敏感的代码中频繁使用。

  5. 最佳实践：在回调中使用箭头函数，避免过度依赖动态this，优先使用明确的参数传递。

理解this绑定机制，能够帮助你避免常见的this相关bug，写出更可维护的代码。在下一章中，我们将探讨词法环境与变量环境的区别，理解let/const与var的底层差异。

在 GitHub 上编辑此页