Javascript之面向对象–方法

下面是Javascript面向对象方法的完整攻略。

什么是面向对象

在开始讲解面向对象方法之前，需要先了解什么是面向对象。面向对象编程（Object Oriented Programming，OOP）是一种软件开发的方法和思想，它以对象为基础，通过封装、继承、多态等特性实现代码的灵活复用、维护和拓展。在Javascript中，我们可以通过构造函数和原型链来实现面向对象编程。

构造函数

构造函数是创建具有相同属性和方法的对象的一种特殊方法。可以使用new关键字在构造函数的基础上创建新对象。构造函数可以像普通函数一样接收参数，这些参数将用于初始化新对象的属性。例如，下面的代码展示了如何创建一个Person构造函数，并使用它创建两个对象。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, my name is " + this.name + "and I am " + this.age + " years old.");
  }
}

var person1 = new Person("Tom", 20);
var person2 = new Person("Jack", 25);

person1.greet(); // 输出 "Hello, my name is Tom and I am 20 years old."
person2.greet(); // 输出 "Hello, my name is Jack and I am 25 years old."

原型链

原型链（prototype chain）是javascript中实现继承的一种方式。在javascript中，每个对象都有一个原型对象（prototype），该对象有一个指向其原型对象的内部链。当对象访问一个不存在的属性或方法时，javascript会沿着这条链去查找属性或方法。

可以通过为构造函数的原型对象添加方法或属性，来实现多个对象共享该方法或属性的目的。例如，下面的代码展示了如何将greet方法添加到Person构造函数的原型对象中。现在所有由Person构造函数创建的对象都可以访问这个方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + "and I am " + this.age + " years old.");
}

var person1 = new Person("Tom", 20);
var person2 = new Person("Jack", 25);

person1.greet(); // 输出 "Hello, my name is Tom and I am 20 years old."
person2.greet(); // 输出 "Hello, my name is Jack and I am 25 years old."

示例说明

以上是构造函数和原型链的简单介绍，我们可以通过实际的示例来更好地理解它们的用法。

示例1：图书馆系统

假设我们正在构建一个图书馆系统。每本书都由Book类表示，每个成员都有一个title，author和pages属性。我们还想要一个方法display()，该方法将以人类可读的字符串形式显示书本的详细信息。

以下是如何使用构造函数和原型链实现此示例的代码。

function Book(title, author, pages) {
  this.title = title;
  this.author = author;
  this.pages = pages;
}

Book.prototype.display = function() {
  console.log("Title: " + this.title + ", Author: " + this.author + ", Pages: " + this.pages);
}

var book1 = new Book("JavaScript编程", "张三", 300);
var book2 = new Book("HTML5开发", "李四", 200);

book1.display(); // 输出 "Title: JavaScript编程, Author: 张三, Pages: 300"
book2.display(); // 输出 "Title: HTML5开发, Author: 李四, Pages: 200"

示例2：颜色工具类

假设我们正在构建一个web应用程序，其中有一个颜色工具类，该类可以将RGB颜色转换为16进制值，并将16进制值转换为RGB值。以下是如何使用构造函数和原型链实现此示例的代码。

function Color(r, g, b) {
  this.r = r;
  this.g = g;
  this.b = b;
}

Color.prototype.rgb = function() {
  return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
}

Color.prototype.hex = function() {
  var hex = ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
  return "#" + hex;
}

var red = new Color(255, 0, 0);
console.log(red.rgb()); // 输出 "rgb(255, 0, 0)"
console.log(red.hex()); // 输出 "#ff0000"

以上就是面向对象中方法的完整攻略。