[JavaScript] 面向对象编程

id="article_content" class="article_content clearfix"> id="content_views" class="markdown_views prism-atom-one-dark">

JavaScript 是一种多范式语言，既支持函数式编程，也支持面向对象编程。在 ES6 引入 class 语法后，面向对象编程在 JavaScript 中变得更加易于理解和使用。以下将详细讲解 JavaScript 中的类（class）、构造函数（constructor）、继承、封装、多态，以及 this 的相关问题。

1. 为什么需要类与面向对象编程？

面向对象编程（Object-Oriented Programming，OOP）是一种以“对象”为核心的编程思想。通过类与对象的概念，可以更好地模拟现实世界的实体，提升代码的可重用性、可维护性和扩展性。

在 JavaScript 早期，使用函数和原型链实现面向对象的思想，语法复杂且容易出错。引入 class 后，语法更加直观。

2. 类（class）与构造函数（constructor）

2.1 类的基本语法

class 是用来定义对象蓝图的关键字，其中包含对象的属性和方法。

class Person {
    // 构造函数：定义对象的初始化逻辑
    constructor(name, age) {
        this.name = name; // this 代表当前实例
        this.age = age;
    }

    // 定义实例方法
    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

// 创建类的实例
const person1 = new Person("Kevin", 25);
console.log(person1.name); // 输出：Kevin
person1.sayHello(); // 输出：Hello, my name is Kevin.
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

2.2 为什么需要构造函数？

constructor 是类的特殊方法，用于在创建对象时初始化属性。它的主要作用是：

  1. 设置对象的初始状态。
  2. 为每个实例创建唯一的属性。

2.3 静态方法（static methods）

静态方法是直接定义在类上的方法，而不是在实例上的方法。静态方法通常用于创建工具类或与实例无关的逻辑。

class MathUtils {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtils.add(2, 3)); // 输出：5
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3. 继承

继承允许我们定义一个类，继承另一个类的属性和方法，从而实现代码复用。

3.1 基本语法

使用 extends 实现继承，并通过 super() 调用父类的构造函数。

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log(`${this.name} is making a sound.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 调用父类的构造函数
        this.breed = breed;
    }

    makeSound() {
        console.log(`${this.name}, a ${this.breed}, barks.`);
    }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.makeSound(); 
// 输出：Buddy, a Golden Retriever, barks.
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">

3.2 为什么需要继承？

  1. 代码复用：子类可以直接使用父类的属性和方法，避免重复代码。
  2. 逻辑扩展：子类可以添加自己的方法或重写父类的方法，实现特定功能。

4. 封装

封装是指将对象的内部状态隐藏起来，通过方法暴露必要的操作。这样可以保护数据的安全性，避免外部直接修改。

4.1 在 JavaScript 中实现封装

  1. 私有属性（ES6 之前的实现）：
    通过闭包模拟私有属性。
function Person(name) {
    let _name = name; // 私有变量

    this.getName = function () {
        return _name;
    };

    this.setName = function (newName) {
        _name = newName;
    };
}

const person = new Person("Kevin");
console.log(person.getName()); // 输出：Kevin
person.setName("Feng");
console.log(person.getName()); // 输出：Feng
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
  1. 私有属性（ES6 新特性）：
    使用 # 定义真正的私有属性。
class Person {
    #name;

    constructor(name) {
        this.#name = name;
    }

    getName() {
        return this.#name;
    }

    setName(newName) {
        this.#name = newName;
    }
}

const person = new Person("Kevin");
console.log(person.getName()); // 输出：Kevin
person.setName("Feng");
console.log(person.getName()); // 输出：Feng
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"> class="hide-preCode-box">

5. 多态

多态是指不同的类在调用相同方法时，可以表现出不同的行为。这通常通过**方法重写（Method Overriding）**实现。

class Animal {
    makeSound() {
        console.log("Animal is making a sound.");
    }
}

class Dog extends Animal {
    makeSound() {
        console.log("Dog is barking.");
    }
}

class Cat extends Animal {
    makeSound() {
        console.log("Cat is meowing.");
    }
}

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.makeSound());
// 输出：
// Dog is barking.
// Cat is meowing.
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"> class="hide-preCode-box">

6. this 指向问题

6.1 为什么会有 this？

this 是 JavaScript 中一个动态绑定的关键字，其指向取决于函数的调用方式。

6.2 this 的常见指向规则

  1. 默认指向（全局对象）：
    在非严格模式下，普通函数调用中的 this 指向全局对象 window。
function showThis() {
    console.log(this);
}
showThis(); // 输出：window（浏览器环境下）
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  1. 方法调用：
    在对象的方法中，this 指向调用方法的对象。
const obj = {
    name: "Kevin",
    showThis() {
        console.log(this);
    },
};
obj.showThis(); // 输出：obj 对象本身
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  1. 构造函数中的 this：
    在构造函数中，this 指向新创建的对象。
function Person(name) {
    this.name = name;
}
const person = new Person("Kevin");
console.log(person.name); // 输出：Kevin
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  1. 箭头函数中的 this：
    箭头函数不会创建自己的 this，而是从外部作用域继承 this。
const obj = {
    name: "Kevin",
    showThis: () => {
        console.log(this);
    },
};
obj.showThis(); // 输出：window 或 undefined（严格模式下）
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">

6.3 解决 this 指向问题

  1. **使用 **bind：
const obj = { name: "Kevin" };
function showName() {
    console.log(this.name);
}
const boundShowName = showName.bind(obj);
boundShowName(); // 输出：Kevin
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  1. 使用箭头函数：
const obj = {
    name: "Kevin",
    showThis() {
        const arrow = () => console.log(this.name);
        arrow();
    },
};
obj.showThis(); // 输出：Kevin
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">

总结

JavaScript 的面向对象编程非常灵活，类的引入让代码更加清晰和直观。在实际开发中，熟练掌握类与对象、继承、封装、多态，以及 this 的指向规则，可以让你写出更加高效和可维护的代码。如果有任何疑问或需要补充代码示例，欢迎随时交流！

data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/SDFsoul/article/details/145360509","extend1":"pc","ab":"new"}">> id="blogExtensionBox" style="width:400px;margin:auto;margin-top:12px" class="blog-extension-box"> class="blog_extension blog_extension_type1" id="blog_extension"> class="blog_extension_card" data-report-click="{"spm":"1001.2101.3001.6470"}" data-report-view="{"spm":"1001.2101.3001.6470"}"> class="blog_extension_card_left"> class="blog_extension_card_cont"> class="blog_extension_card_cont_l"> TechKevin class="blog_extension_card_cont_r"> 微信公众号 IT领域知识普及、社会热点、精彩足球赛事
注：本文转载自blog.csdn.net的DevKevin的文章"https://blog.csdn.net/SDFsoul/article/details/145360509"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！