布鲁斯前端JS面试题目 - JavaScript this 关键字深入解析

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

printThis(); // window 或 global

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

strictFunction(); // undefined

const user = {
  name: 'Bruce',
  age: 30,
  greet() {
    console.log(`Hello, I'm ${this.name} and I'm ${this.age} years old`);
  },
  profile: {
    title: 'Developer',
    showTitle() {
      console.log(`My title is ${this.title}`);
    }
  }
};

user.greet(); // "Hello, I'm Bruce and I'm 30 years old" (this 指向 user)
user.profile.showTitle(); // "My title is Developer" (this 指向 user.profile)

// 注意：隐含绑定可能丢失
const greetFn = user.greet;
greetFn(); // "Hello, I'm undefined and I'm undefined years old" (this 指向全局对象)

function introduce(hobby1, hobby2) {
  console.log(`I'm ${this.name}, I like ${hobby1} and ${hobby2}`);
}

const person = { name: 'Bruce' };

// call: 参数逐一传入
introduce.call(person, 'coding', 'reading');
// "I'm Bruce, I like coding and reading"

// apply: 参数以数组形式传入
introduce.apply(person, ['coding', 'reading']);
// "I'm Bruce, I like coding and reading"

// bind: 返回一个新函数，不立即调用
const boundFn = introduce.bind(person, 'coding');
boundFn('reading'); // 可以稍后传入剩余参数
// "I'm Bruce, I like coding and reading"

function Person(name) {
  this.name = name;
  // this 指向新建立的对象
}

const bruce = new Person('Bruce');
console.log(bruce.name); // "Bruce"

// this 在构造函数中指向新建立的对象实例
// 即使在全局作用域或严格模式下，new 绑定也有效

const obj = {
  name: 'Bruce',
  // 传统函数 - this 依调用方式决定
  regularMethod() {
    console.log(this.name);
  },
  // 箭头函数 - this 锁定在定义时的环境
  arrowMethod: () => {
    console.log(this.name);
  },
  // 常见用法: 在传统方法内使用箭头函数
  delayedGreeting() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`); // this 仍指向 obj
    }, 1000);
  }
};

obj.regularMethod(); // "Bruce" (this 指向 obj)
obj.arrowMethod();   // undefined (this 指向定义时的全局环境)
obj.delayedGreeting(); // 1秒后输出 "Hello, Bruce"

// 注意：箭头函数的 this 不受 call/apply/bind 影响
obj.arrowMethod.call({name: 'Not Bruce'}); // 仍然是 undefined

class Counter {
  constructor() {
    this.count = 0;
    // 将方法的 this 绑定到实例
    this.increment = this.increment.bind(this);
  }
  
  increment() {
    this.count++;
  }
  
  getCount() {
    return this.count;
  }
}

const counter = new Counter();
const incrementFn = counter.increment;
incrementFn(); // 即使脱离对象调用也能正常工作
console.log(counter.getCount()); // 1

class Counter {
  constructor() {
    this.count = 0;
  }
  
  // 使用箭头函数自动捕获外层 this
  increment = () => {
    this.count++;
  }
  
  getCount() {
    return this.count;
  }
}

const counter = new Counter();
const incrementFn = counter.increment;
incrementFn(); // 箭头函数保持 this 指向 counter 实例
console.log(counter.getCount()); // 1

function UserProfile() {
  this.name = 'Bruce';
  this.friends = ['Alice', 'Bob'];
  
  // 使用变量保存 this
  const self = this;
  
  this.showFriends = function() {
    this.friends.forEach(function(friend) {
      console.log(self.name + ' is friends with ' + friend);
      // 使用 self 而非 this，因为这里的 this 在非严格模式下指向全局
    });
  };
}

const profile = new UserProfile();
profile.showFriends();
// "Bruce is friends with Alice"
// "Bruce is friends with Bob"