跳转到内容
主菜单
主菜单
移至侧栏
隐藏
导航
首页
最近更改
随机页面
MediaWiki帮助
代码酷
搜索
搜索
中文(中国大陆)
外观
创建账号
登录
个人工具
创建账号
登录
未登录编辑者的页面
了解详情
贡献
讨论
编辑“︁
JavaScript面向对象基础
”︁
页面
讨论
大陆简体
阅读
编辑
编辑源代码
查看历史
工具
工具
移至侧栏
隐藏
操作
阅读
编辑
编辑源代码
查看历史
常规
链入页面
相关更改
特殊页面
页面信息
外观
移至侧栏
隐藏
您的更改会在有权核准的用户核准后向读者展示。
警告:
您没有登录。如果您进行任何编辑,您的IP地址会公开展示。如果您
登录
或
创建账号
,您的编辑会以您的用户名署名,此外还有其他益处。
反垃圾检查。
不要
加入这个!
= JavaScript面向对象基础 = '''面向对象编程(Object-Oriented Programming, OOP)'''是一种以'''对象'''为核心的编程范式,JavaScript通过'''原型继承'''和'''构造函数'''等机制实现OOP。本章将详细介绍JavaScript中的面向对象基础概念,包括对象、构造函数、原型链等核心内容。 == 1. 对象基础 == 在JavaScript中,'''对象'''是键值对的集合,用于存储和组织数据。对象可以通过字面量、构造函数或`class`语法创建。 === 1.1 对象字面量 === 最简单的创建对象的方式是使用'''对象字面量''': <syntaxhighlight lang="javascript"> // 创建一个对象字面量 const person = { name: "Alice", age: 25, greet: function() { return `Hello, my name is ${this.name}!`; } }; console.log(person.name); // 输出: Alice console.log(person.greet()); // 输出: Hello, my name is Alice! </syntaxhighlight> '''解释:''' * `person`是一个对象,包含属性(`name`、`age`)和方法(`greet`)。 * `this`关键字指向当前对象(即`person`)。 === 1.2 动态添加属性 === JavaScript对象是动态的,可以随时添加或修改属性: <syntaxhighlight lang="javascript"> person.job = "Developer"; // 添加新属性 person.greet = function() { return `Hi, I'm ${this.name} and I work as a ${this.job}!`; }; console.log(person.greet()); // 输出: Hi, I'm Alice and I work as a Developer! </syntaxhighlight> == 2. 构造函数与实例 == 构造函数用于创建多个相似的对象。通过`new`关键字调用构造函数时,会创建一个新实例。 === 2.1 定义构造函数 === <syntaxhighlight lang="javascript"> function Person(name, age) { this.name = name; this.age = age; this.greet = function() { return `Hello, I'm ${this.name}!`; }; } const alice = new Person("Alice", 25); const bob = new Person("Bob", 30); console.log(alice.greet()); // 输出: Hello, I'm Alice! console.log(bob.age); // 输出: 30 </syntaxhighlight> '''问题:'''每个实例都会创建独立的`greet`方法,浪费内存。 '''解决方案:'''使用'''原型(prototype)'''共享方法。 == 3. 原型与继承 == JavaScript通过'''原型链'''实现继承。每个对象都有一个原型(`__proto__`),用于共享属性和方法。 === 3.1 原型方法 === <syntaxhighlight lang="javascript"> function Person(name, age) { this.name = name; this.age = age; } // 将方法添加到原型 Person.prototype.greet = function() { return `Hello, I'm ${this.name}!`; }; const alice = new Person("Alice", 25); console.log(alice.greet()); // 输出: Hello, I'm Alice! </syntaxhighlight> '''优势:'''所有实例共享同一个`greet`方法,节省内存。 === 3.2 原型链图示 === <mermaid> graph LR A[alice实例] -->|__proto__| B[Person.prototype] B -->|__proto__| C[Object.prototype] C -->|__proto__| D[null] </mermaid> '''解释:''' * `alice.__proto__`指向`Person.prototype`。 * `Person.prototype.__proto__`指向`Object.prototype`(所有对象的基类)。 * 最终原型链顶端是`null`。 == 4. Class语法(ES6) == ES6引入`class`语法,简化了OOP的实现: <syntaxhighlight lang="javascript"> class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { return `Hello, I'm ${this.name}!`; } } const alice = new Person("Alice", 25); console.log(alice.greet()); // 输出: Hello, I'm Alice! </syntaxhighlight> '''注意:'''`class`是语法糖,底层仍基于原型。 == 5. 实际应用案例 == === 5.1 购物车系统 === 使用OOP实现购物车功能: <syntaxhighlight lang="javascript"> class Cart { constructor() { this.items = []; } addItem(product, quantity) { this.items.push({ product, quantity }); } calculateTotal() { return this.items.reduce( (total, item) => total + (item.product.price * item.quantity), 0 ); } } const cart = new Cart(); cart.addItem({ name: "Book", price: 20 }, 2); cart.addItem({ name: "Pen", price: 5 }, 3); console.log(cart.calculateTotal()); // 输出: 55 (20*2 + 5*3) </syntaxhighlight> === 5.2 游戏角色系统 === <syntaxhighlight lang="javascript"> class Character { constructor(name, health) { this.name = name; this.health = health; } attack(target) { target.health -= 10; return `${this.name} attacks ${target.name}!`; } } const hero = new Character("Hero", 100); const enemy = new Character("Enemy", 50); console.log(hero.attack(enemy)); // 输出: Hero attacks Enemy! console.log(enemy.health); // 输出: 40 </syntaxhighlight> == 6. 总结 == * JavaScript通过'''对象'''、'''构造函数'''和'''原型'''实现OOP。 * `class`语法是原型的语法糖,更易读写。 * 原型链是JavaScript继承的核心机制。 * OOP适合模块化开发,如购物车、游戏角色等场景。 掌握这些基础后,可以进一步学习'''封装'''、'''多态'''和'''设计模式'''等高级主题。 [[Category:编程语言]] [[Category:JavaScript]] [[Category:Javascript面向对象编程]]
摘要:
请注意,所有对代码酷的贡献均被视为依照知识共享署名-非商业性使用-相同方式共享发表(详情请见
代码酷:著作权
)。如果您不希望您的文字作品被随意编辑和分发传播,请不要在此提交。
您同时也向我们承诺,您提交的内容为您自己所创作,或是复制自公共领域或类似自由来源。
未经许可,请勿提交受著作权保护的作品!
取消
编辑帮助
(在新窗口中打开)