JavaScript中"this"关键字的完整指南

JavaScript中的this关键字就像变色龙一样——它的含义会根据使用位置和方式而变化。许多开发者对此感到困惑，因为它在JavaScript中的行为与其他编程语言不同。可以将this想象成一个聚光灯，根据上下文指向不同的对象——就像"这里"这个词的意思取决于你说话时所站的位置一样。

在本指南中，您将学习为什么this关键字在JavaScript中很重要，以及如何有效地使用它。

为什么"this"很重要？

在JavaScript中，this是一个特殊的关键字，指的是当前正在执行代码的对象。它是对被调用函数的"所有者"的引用。this的值由函数的调用方式决定，而不是定义位置。

1
2
3
4
5
6


// 将'this'视为询问"谁在执行这个动作？"
function introduce() {
    console.log(`Hello, I'm ${this.name}`);
}

// 答案取决于谁调用这个函数

理解this对JavaScript开发至关重要，原因如下：

面向对象编程：this使您能够创建可与不同对象一起使用的可重用方法
动态上下文：允许函数根据调用上下文调整其行为
事件处理：处理DOM事件和用户交互必不可少
理解框架：使用React、Vue、Angular等框架至关重要
代码可重用性：支持编写可在不同对象间使用的灵活函数
专业发展：掌握this区分了中级开发者和初学者

“this"的四个主要规则

JavaScript使用四个主要规则确定this的值，按优先级顺序应用：

显式绑定（call、apply、bind）
隐式绑定（方法调用）
新建绑定（构造函数）
默认绑定（全局对象或undefined）

规则1：显式绑定 - 掌控控制权

显式绑定是使用call()、apply()或bind()明确告诉JavaScriptthis应该引用什么。

使用call()

1
2
3
4
5
6
7
8
9


const person1 = { name: "Alice", age: 30 };
const person2 = { name: "Bob", age: 25 };

function greet(greeting, punctuation) {
    console.log(`${greeting}, I'm ${this.name} and I'm ${this.age} years old${punctuation}`);
}

greet.call(person1, "Hello", "!"); // "Hello, I'm Alice and I'm 30 years old!"
greet.call(person2, "Hi", "."); // "Hi, I'm Bob and I'm 25 years old."

使用apply()

1
2
3
4
5
6
7
8
9


const student = { name: "Sarah", grades: [85, 92, 78, 96] };

function calculateAverage(subject, semester) {
    const average = this.grades.reduce((sum, grade) => sum + grade, 0) / this.grades.length;
    console.log(`${this.name}'s average in ${subject} for ${semester} is ${average.toFixed(1)}`);
    return average;
}

calculateAverage.apply(student, ["Mathematics", "Fall 2024"]); // "Sarah's average in Mathematics for Fall 2024 is 87.8"

使用bind()

1
2
3
4
5
6
7
8


const car = { brand: "Tesla", model: "Model 3", year: 2023 };

function displayInfo() {
    console.log(`This is a ${this.year} ${this.brand} ${this.model}`);
}

const showCarInfo = displayInfo.bind(car);
showCarInfo(); // "This is a 2023 Tesla Model 3"

使用bind()进行部分应用

1
2
3
4
5
6
7
8
9


function multiply(a, b, c) {
    console.log(`${this.name} calculated: ${a} × ${b} × ${c} = ${a * b * c}`);
    return a * b * c;
}

const calculator = { name: "SuperCalc" };
const multiplyByTwo = multiply.bind(calculator, 2);

multiplyByTwo(3, 4); // "SuperCalc calculated: 2 × 3 × 4 = 24"

规则2：隐式绑定 - 自然方式

隐式绑定发生在函数作为对象的方法调用时。点左边的对象成为this的值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


const restaurant = {
    name: "Mario's Pizza",
    location: "New York",
    chef: "Mario",

    welcomeGuest: function() {
        console.log(`Welcome to ${this.name} in ${this.location}!`);
    },

    cookPizza: function(toppings) {
        console.log(`${this.chef} at ${this.name} is cooking pizza with ${toppings}`);
    }
};

restaurant.welcomeGuest(); // "Welcome to Mario's Pizza in New York!"
restaurant.cookPizza("pepperoni and mushrooms"); // "Mario at Mario's Pizza is cooking pizza with pepperoni and mushrooms"

嵌套对象

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const company = {
    name: "TechCorp",
    departments: {
        name: "Engineering",
        head: "Jane Smith",
        introduce: function() {
            console.log(`This is the ${this.name} department, led by ${this.head}`);
        }
    }
};

company.departments.introduce(); // "This is the Engineering department, led by Jane Smith"

上下文丢失问题

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const timer = {
    seconds: 0,

    tick: function() {
        this.seconds++;
        console.log(`Timer: ${this.seconds} seconds`);
    },

    start: function() {
        setInterval(this.tick, 1000); // 会丢失上下文！
    },

    startCorrect: function() {
        setInterval(this.tick.bind(this), 1000); // 解决方案1：使用bind()
        // setInterval(() => this.tick(), 1000); // 解决方案2：使用箭头函数
    }
};

规则3：新建绑定 - 构造函数

当使用new关键字调用函数时，JavaScript会创建一个新对象并将this设置为该新对象。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function Person(name, age, profession) {
    this.name = name;
    this.age = age;
    this.profession = profession;

    this.introduce = function() {
        console.log(`Hi, I'm ${this.name}, a ${this.age}-year-old ${this.profession}`);
    };
}

const alice = new Person("Alice", 28, "developer");
alice.introduce(); // "Hi, I'm Alice, a 28-year-old developer"

构造函数最佳实践

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


function BankAccount(accountNumber, initialBalance) {
    this.accountNumber = accountNumber;
    this.balance = initialBalance;
    this.transactions = [];

    this.deposit = function(amount) {
        this.balance += amount;
        this.transactions.push(`Deposit: +$${amount}`);
        console.log(`Deposited $${amount}. New balance: $${this.balance}`);
    };

    this.withdraw = function(amount) {
        if (amount <= this.balance) {
            this.balance -= amount;
            this.transactions.push(`Withdrawal: -$${amount}`);
            console.log(`Withdrew $${amount}. New balance: $${this.balance}`);
        } else {
            console.log(`Insufficient funds. Current balance: $${this.balance}`);
        }
    };
}

规则4：默认绑定 - 后备方案

当其他规则都不适用时，JavaScript使用默认绑定。在非严格模式下，this默认为全局对象（浏览器中的window，Node.js中的global）。在严格模式下，this是undefined。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// 非严格模式
function sayHello() {
    console.log(`Hello from ${this}`); // 'this'引用全局对象
}

sayHello(); // "Hello from [object Window]"（在浏览器中）

// 严格模式
"use strict";
function sayHelloStrict() {
    console.log(`Hello from ${this}`); // 'this'是undefined
}

sayHelloStrict(); // "Hello from undefined"

箭头函数 - 改变游戏规则

箭头函数没有自己的this绑定。它们从封闭作用域继承this（词法作用域）。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


const team = {
    name: "Development Team",
    members: ["Alice", "Bob", "Charlie"],

    showTeamRegular: function() {
        console.log(`Team: ${this.name}`);
        this.members.forEach(function(member) {
            console.log(`${member} is in ${this.name}`); // 'this'是undefined或全局
        });
    },

    showTeamArrow: function() {
        console.log(`Team: ${this.name}`);
        this.members.forEach((member) => {
            console.log(`${member} is in ${this.name}`); // 'this'正确引用team
        });
    }
};

类上下文和’this'

在ES6类中，this的工作方式类似于构造函数：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


class Vehicle {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
        this.mileage = 0;
    }

    drive(miles) {
        this.mileage += miles;
        console.log(`${this.make} ${this.model} has driven ${miles} miles. Total: ${this.mileage}`);
    }

    getInfo() {
        return `${this.year} ${this.make} ${this.model}`;
    }

    getInfoArrow = () => {
        return `${this.year} ${this.make} ${this.model}`;
    }
}

常见陷阱和解决方案

1. 事件处理程序

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


class Button {
    constructor(element) {
        this.element = element;
        this.clickCount = 0;

        // 解决方案1：绑定方法
        this.element.addEventListener('click', this.handleClick.bind(this));

        // 解决方案2：箭头函数
        this.element.addEventListener('click', () => this.handleClick());

        // 解决方案3：箭头函数作为类属性
        this.element.addEventListener('click', this.handleClickArrow);
    }

    handleClick() {
        this.clickCount++;
        console.log(`Button clicked ${this.clickCount} times`);
    }

    handleClickArrow = () => {
        this.clickCount++;
        console.log(`Button clicked ${this.clickCount} times`);
    }
}

2. 回调函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


class DataProcessor {
    constructor(data) {
        this.data = data;
        this.processedCount = 0;
    }

    processAll() {
        // 解决方案1：绑定
        this.data.forEach(this.processItem.bind(this));

        // 解决方案2：箭头函数
        this.data.forEach((item) => this.processItem(item));

        // 解决方案3：存储'this'在变量中
        const self = this;
        this.data.forEach(function(item) {
            self.processItem(item);
        });
    }
}

3. Async/Await和Promises

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


class ApiClient {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
        this.requestCount = 0;
    }

    async fetchData(endpoint) {
        this.requestCount++;
        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`);
            const data = await response.json();
            return this.processResponse(data); // 'this'在async/await中被保留
        } catch (error) {
            this.handleError(error);
        }
    }
}

何时使用’this’ - 实用指南

1. 面向对象编程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class ShoppingCart {
    constructor() {
        this.items = [];
        this.total = 0;
    }

    addItem(item, price) {
        this.items.push({ item, price });
        this.total += price;
        this.updateDisplay();
    }
}

2. 事件处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


class FormValidator {
    constructor(formElement) {
        this.form = formElement;
        this.errors = [];
        this.form.addEventListener('submit', this.handleSubmit.bind(this));
    }

    handleSubmit(event) {
        event.preventDefault();
        this.validateForm();
    }
}

3. 方法链

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


class QueryBuilder {
    constructor() {
        this.query = '';
        this.conditions = [];
    }

    select(fields) {
        this.query += `SELECT ${fields} `;
        return this;
    }

    from(table) {
        this.query += `FROM ${table} `;
        return this;
    }
}

4. 插件/库开发

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


class Modal {
    constructor(element, options = {}) {
        this.element = element;
        this.options = { closable: true, backdrop: true, ...options };
        this.isOpen = false;
        this.init();
    }

    init() {
        this.createBackdrop();
        this.bindEvents();
    }
}

何时不使用’this'

1. 工具函数

1
2
3
4
5
6
7


// 良好 - 不需要'this'
function formatCurrency(amount) {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
    }).format(amount);
}

2. 函数式编程

1
2
3
4
5
6
7


// 良好 - 函数式方法
const processNumbers = (arr) => {
    return arr
        .filter(num => num > 2)
        .map(num => num * 2)
        .reduce((sum, num) => sum + num, 0);
};

3. 简单事件处理程序

1
2
3
4
5


// 良好 - 没有'this'的简单函数
function handleButtonClick(event) {
    console.log('Button clicked!');
    event.target.style.backgroundColor = 'blue';
}

最佳实践和技巧

1. 始终明确

1
2
3
4
5
6
7
8
9


class DataManager {
    processData() {
        this.data.forEach(this.processItem.bind(this));
    }

    processDataArrow() {
        this.data.forEach(item => this.processItem(item));
    }
}

2. 对回调使用箭头函数

1
2
3
4
5
6
7
8


class Timer {
    start() {
        this.intervalId = setInterval(() => {
            this.seconds++;
            console.log(`Time: ${this.seconds}s`);
        }, 1000);
    }
}

3. 避免混合箭头函数和常规函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 良好 - 一致使用箭头函数
class Calculator {
    add = (num) => {
        this.result += num;
        return this;
    }

    multiply = (num) => {
        this.result *= num;
        return this;
    }
}

4. 使用严格模式

1
2
3
4
5


'use strict';

function myFunction() {
    console.log(this); // 严格模式下为undefined，非严格模式下为全局对象
}

现代JavaScript和’this'

1. React组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = { todos: [], inputValue: '' };
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange = (event) => {
        this.setState({ inputValue: event.target.value });
    }
}

2. Node.js和’this'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// 在模块中，顶层的'this'引用module.exports
console.log(this === module.exports); // true

// 在类中，'this'的工作方式与浏览器中相同
class NodeClass {
    constructor() {
        this.property = 'value';
    }

    method() {
        console.log(this.property); // 'value'
    }
}

结论

JavaScript中的this关键字是一个强大的功能，支持动态的面向对象编程。虽然一开始可能会让人困惑，但理解四种绑定规则以及何时使用每种方法将使您成为更有效的JavaScript开发者。

关键要点：

this由函数的调用方式决定，而不是定义位置
四个规则（按优先级顺序）：显式绑定、隐式绑定、新建绑定、默认绑定
箭头函数从其封闭作用域继承this
需要显式控制时使用bind()、call()或apply()
箭头函数非常适合回调和事件处理程序
始终使用严格模式来捕获与this相关的错误
在代码库中保持方法的一致性

何时使用this：

使用类和构造函数的面向对象编程
需要访问对象状态的事件处理
方法链模式
创建可重用组件和库
React类组件和类似框架

何时不使用this：

纯工具函数
函数式编程模式
没有状态的简单事件处理程序
不需要对象上下文的函数

掌握this将帮助您编写更可维护、可重用和专业的JavaScript代码。通过不同场景进行练习，并始终记住，在理解任何给定情况下this指的是什么时，上下文是关键。