正文

从零开始，掌握JS简单面向对象编程技巧全攻略

/0 浏览量
0524

引言：什么是面向对象编程？

面向对象编程（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中的面向对象编程有了更深入的了解。在实际开发中，合理运用面向对象编程的技巧，可以帮助我们写出更加优雅、可维护的代码。希望本文对你有所帮助！

-- 展开阅读全文 --