JavaScript基础：函数调用的四种方式与性能优化实战

1次阅读

共计 2754 个字符，预计需要花费 7 分钟才能阅读完成。

事件处理函数中的 this 丢失

class Button {constructor() {
    this.count = 0;
    document.addEventListener('click', this.handleClick);
  }

  handleClick() {
    // 错误：this 指向 DOM 元素而非 Button 实例
    this.count++; 
  }
}

问题根源 ：方法作为回调传递时未绑定执行上下文

构造函数误用普通调用

function User(name) {this.name = name;}

// 错误：未使用 new 调用导致 this 指向全局
const user = User('John');

后果：污染全局作用域且返回 undefined

执行上下文 ：创建新的函数执行上下文
this 绑定 ：非严格模式指向 global/window，严格模式为 undefined
内存分配 ：每次调用创建新的 arguments 对象

function sum(a: number, b: number): number {console.log(this); // 非严格模式：Window
  return a + b;
}

sum(1, 2);

执行上下文 ：方法所属对象的上下文
this 绑定 ：指向调用对象
内存优化 ：共享原型方法引用

const calculator = {
  value: 0,
  add(num: number): void {this.value += num; // this 指向 calculator}
};

执行流程 ：
创建新对象并绑定到 this
执行构造函数体
隐式返回 this（除非显式返回对象）
内存开销 ：每次 new 操作分配新内存

class Person {constructor(public name: string) {}}

// 编译器生成的底层代码
function Person(this: any, name: string) {// 1. this = Object.create(Person.prototype)
  // 2. 执行函数体
  this.name = name;
  // 3. return this
}

核心差异 ：显式指定 this 和参数列表
性能影响 ：arguments 处理需要额外内存分配

function greet(message: string): void {console.log(`${message}, ${this.name}!`);
}

const context = {name: 'Alice'};
greet.call(context, 'Hello'); // 参数逐个传递
greet.apply(context, ['Hi']); // 数组参数传递

/**
 * 性能测试工具函数
 * @param fn 待测试函数
 * @param iterations 迭代次数
 * @param args 函数参数
 */
function measurePerf<T extends Function>(
  fn: T, 
  iterations: number, 
  ...args: any[]): number {
  // 触发 GC 避免干扰
  if (global.gc) global.gc();

  const start = performance.now();
  for (let i = 0; i < iterations; i++) {fn(...args);
  }
  return performance.now() - start;}

// 测试用例
const testObj = {method() {return Math.random(); }
};

// 对比四种调用方式
const COUNT = 1e6;
console.log('直接调用:', measurePerf(testObj.method, COUNT), 'ms');
console.log('方法调用:', measurePerf(() => testObj.method(), COUNT), 'ms');
console.log('call 调用:', measurePerf(() => testObj.method.call(testObj), 
  COUNT
), 'ms');
console.log('apply 调用:', measurePerf(() => testObj.method.apply(testObj, []), 
  COUNT
), 'ms');

典型测试结果 （Node.js 16.x）：
– 直接调用：~120ms
– 方法调用：~150ms
– call 调用：~300ms
– apply 调用：~350ms

缓存函数引用

// 优化前
for (let i = 0; i < 1e6; i++) {obj.method(); // 每次查找 method 属性
}

// 优化后
const method = obj.method;
for (let i = 0; i < 1e6; i++) {method(); // 直接调用缓存引用
}

箭头函数优化

class Component {private state = {};

  // 传统方案需要 bind
  constructor() {this.handleClick = this.handleClick.bind(this);
  }

  // 箭头函数方案
  handleClick = () => {this.setState({ clicked: true});
  };
}

内存权衡 ：箭头函数作为实例属性会占用更多内存

function test() {
  'use strict';
  console.log(this); // undefined

  // 非严格模式等效代码
  // console.log(this || globalThis);
}

双模式工厂函数设计

function createUser(name: string) {if (!(this instanceof createUser)) {return new createUser(name);
  }
  this.name = name;
}

// 两种调用方式均可
const u1 = createUser('Alice');
const u2 = new createUser('Bob');