孩子也能懂！用10个实例教你JS面向对象编程，轻松入门！

实例1：创建一个简单的对象

面向对象编程（OOP）的第一步是创建对象。在JavaScript中，你可以使用对象字面量或new Object()来创建一个对象。

let person = {
  name: 'Alice',
  age: 25,
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // 输出：Hello, my name is Alice

在这个例子中，我们创建了一个名为person的对象，它有三个属性：name、age和一个方法sayHello。

实例2：使用构造函数创建对象

你也可以使用构造函数来创建对象。构造函数是一个用于创建对象的特殊函数。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

let bob = new Person('Bob', 30);
bob.sayHello(); // 输出：Hello, my name is Bob

在这个例子中，我们定义了一个Person构造函数，然后使用new关键字创建了一个名为bob的新对象。

实例3：继承

在JavaScript中，你可以使用原型链来实现继承。

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

let dog = new Dog('Buddy', 'Labrador');
dog.sayName(); // 输出：My name is Buddy

在这个例子中，Dog对象继承了Animal对象的方法和属性。

实例4：使用类创建对象

ES6引入了class关键字，这使得面向对象编程更加容易。

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

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

let dog = new Dog('Buddy', 'Labrador');
dog.sayName(); // 输出：My name is Buddy
dog.bark(); // 输出：Woof!

在这个例子中，我们使用class关键字定义了一个Animal类，然后定义了一个Dog类继承自Animal类。

实例5：使用模块化

JavaScript模块化是一种将代码分割成多个模块的方法，以提高代码的可维护性和可重用性。

// animal.js
export class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

// dog.js
import { Animal } from './animal.js';

export class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

// main.js
import { Dog } from './dog.js';

let dog = new Dog('Buddy', 'Labrador');
dog.sayName(); // 输出：My name is Buddy
dog.bark(); // 输出：Woof!

在这个例子中，我们创建了两个模块：animal.js和dog.js。dog.js模块导入了Animal类，并定义了一个Dog类。

实例6：使用原型链查找属性和方法

当你在对象上尝试访问一个属性或方法时，JavaScript会首先在对象上查找，如果找不到，则会沿着原型链向上查找。

let person = {
  name: 'Alice'
};

console.log(person.hasOwnProperty('name')); // 输出：true
console.log(person.hasOwnProperty('sayHello')); // 输出：false
console.log(person.sayHello); // 输出：undefined

在这个例子中，person对象没有sayHello属性或方法，但是它可以从原型链中继承sayHello方法。

实例7：使用Object.create()创建对象

Object.create()方法可以创建一个新对象，并使用现有的对象来作为其原型。

let animal = {
  species: 'Mammal'
};

let dog = Object.create(animal);
console.log(dog.species); // 输出：Mammal

在这个例子中，我们创建了一个名为dog的新对象，它使用animal对象作为其原型。

实例8：使用Object.assign()复制对象

Object.assign()方法可以将一个或多个源对象的所有可枚举自身属性复制到目标对象。

let person = {
  name: 'Alice',
  age: 25
};

let clone = Object.assign({}, person);
console.log(clone); // 输出：{ name: 'Alice', age: 25 }

在这个例子中，我们使用Object.assign()方法创建了一个名为clone的新对象，它复制了person对象的所有属性。

实例9：使用Object.keys()和Object.values()遍历对象属性

Object.keys()和Object.values()方法可以用来遍历对象的所有属性。

let person = {
  name: 'Alice',
  age: 25
};

console.log(Object.keys(person)); // 输出：['name', 'age']
console.log(Object.values(person)); // 输出：['Alice', 25]

在这个例子中，我们使用Object.keys()和Object.values()方法遍历了person对象的所有属性。

实例10：使用Object.freeze()防止对象被修改

Object.freeze()方法可以用来冻结一个对象，使其不可修改。

let person = {
  name: 'Alice',
  age: 25
};

Object.freeze(person);

person.age = 30; // 这行代码不会改变对象的值
console.log(person.age); // 输出：25

在这个例子中，我们使用Object.freeze()方法冻结了person对象，因此无法修改其属性。

通过以上10个实例，你现在已经对JavaScript面向对象编程有了基本的了解。希望这些例子能帮助你轻松入门！