引言:什么是面向对象编程?
面向对象编程(Object-Oriented Programming,OOP)是一种编程范式,它将数据(属性)和行为(方法)封装在对象中。JavaScript 作为一种高级编程语言,也支持面向对象编程。掌握面向对象编程的技巧,可以帮助我们写出更加模块化、可重用和易于维护的代码。
第一节:JavaScript中的对象
在JavaScript中,对象是一种无序的集合数据类型,它由键值对组成。每个键值对称为一个属性,键是字符串或符号,值可以是任何数据类型。
创建对象
- 字面量语法:
let person = {
name: '张三',
age: 25
};
- 构造函数:
function Person(name, age) {
this.name = name;
this.age = age;
}
let person = new Person('李四', 30);
访问属性
- 直接访问:
console.log(person.name); // 张三
console.log(person.age); // 25
- 点语法:
console.log(person['name']); // 张三
console.log(person['age']); // 25
修改属性
- 直接赋值:
person.name = '王五';
- 使用
setter方法:
Object.defineProperty(person, 'name', {
set: function(value) {
this._name = value;
}
});
person.name = '赵六';
console.log(person.name); // 赵六
第二节:继承
在JavaScript中,继承是一种允许一个对象继承另一个对象属性和方法的技术。这有助于实现代码复用和降低耦合度。
原型链继承
function Parent() {
this.name = 'Parent';
}
Parent.prototype.sayName = function() {
console.log(this.name);
};
function Child() {
this.age = 'Child';
}
// 设置Child的原型为Parent的实例
Child.prototype = new Parent();
let child = new Child();
child.sayName(); // Parent
构造函数继承
function Parent() {
this.name = 'Parent';
}
function Child() {
Parent.call(this);
this.age = 'Child';
}
let child = new Child();
console.log(child.name); // Parent
console.log(child.age); // Child
组合继承
function Parent() {
this.name = 'Parent';
}
function Child() {
Parent.call(this);
this.age = 'Child';
}
Child.prototype = new Parent();
let child = new Child();
console.log(child.name); // Parent
console.log(child.age); // Child
原型式继承
function createObj(obj) {
function F() {}
F.prototype = obj;
return new F();
}
let parent = {
name: 'Parent'
};
let child = createObj(parent);
console.log(child.name); // Parent
寄生式继承
function createObj(obj) {
let clone = Object.create(obj);
clone.sayName = function() {
console.log(this.name);
};
return clone;
}
let parent = {
name: 'Parent'
};
let child = createObj(parent);
child.sayName(); // Parent
寄生组合式继承
function createObj(obj) {
function F() {}
F.prototype = obj;
return new F();
}
function inheritPrototype(child, parent) {
let prototype = createObj(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
function Parent() {
this.name = 'Parent';
}
function Child() {
Parent.call(this);
this.age = 'Child';
}
inheritPrototype(Child, Parent);
let child = new Child();
console.log(child.name); // Parent
console.log(child.age); // Child
第三节:类和模块
ES6 引入了 class 关键字,使得面向对象编程更加简洁易读。
类的基本语法
class Parent {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
let parent = new Parent('Parent');
parent.sayName(); // Parent
继承
class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
sayAge() {
console.log(this.age);
}
}
let child = new Child('Child', 20);
child.sayName(); // Child
child.sayAge(); // 20
模块化
ES6 引入了模块化,使得代码更加模块化、可重用和易于维护。
// parent.js
export class Parent {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
// child.js
import Parent from './parent.js';
export class Child extends Parent {
constructor(name, age) {
super(name);
this.age = age;
}
sayAge() {
console.log(this.age);
}
}
总结
通过本文的学习,相信你已经对JavaScript中的面向对象编程有了更深入的了解。在实际开发中,合理运用面向对象编程的技巧,可以帮助我们写出更加优雅、可维护的代码。希望本文对你有所帮助!
