跟我学习javascript的prototype使用注意事项

当使用JavaScript的面向对象编程时，prototype在实现继承和方法重载等方面起着关键作用。下面是跟我学习JavaScript的prototype使用注意事项的完整攻略。

什么是prototype？

在JavaScript中，每个对象都有一个prototype，原型链的顶端是Object.prototype对象。prototype对象定义了该对象的属性和方法，当在对象内部查找属性和方法时，会先在对象自身查找，如果没有找到，再去prototype对象中查找，甚至可以不断查找到Object.prototype对象。

如何使用prototype？

定义一个对象

假设现在要定义一个对象Man，该对象具备以下属性和方法：

name：姓名
age：年龄
sayHello：打招呼方法

可以使用以下方式定义：

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

Man.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name + ", " + this.age + " years old.");
}

创建一个对象

假设现在需要创建一个name为Tom，age为18岁的Man对象，可以使用如下方式创建：

var tom = new Man('Tom', 18);
tom.sayHello(); // Hello, I'm Tom, 18 years old.

继承一个对象

如果需要从一个已有的对象中创建一个新的对象，并且新对象需要调用原有对象的方法，可以使用prototype实现继承：

function Student(name, age, grade) {
  Man.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Man.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name + ", " + this.age + " years old and I am in grade " + this.grade + ".");
}

两个示例说明

例子1：继承对象的方法重载

假设现在要继承对象Man的sayHello方法，并在新的对象中重载sayHello方法。

function Student(name, age, grade) {
  Man.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Man.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name + ", " + this.age + " years old and I am in grade " + this.grade + ".");
  Man.prototype.sayHello.call(this); // 调用Man的sayHello方法
}

这里重载了Student的sayHello方法，并在方法中先打印出Student的信息，再调用Man的sayHello方法打印出Man的信息。

例子2：在方法中访问对象属性

假设现在要在Man对象的方法中访问Man对象的属性。

function Man(name, age) {
  this.name = name;
  this.age = age;

  this.introduce = function() {
    console.log("My name is " + this.name + ", I am " + this.age + " years old");
  }
}

Man.prototype.run = function() {
  console.log(this.name + " is running"); // 无法访问name属性
}

var tom = new Man('Tom', 20);
tom.introduce(); // My name is Tom, I am 20 years old
tom.run(); // Tom is running

这里在Man对象的方法introduce中成功访问了Man对象的属性，但在Man对象的方法run中无法直接访问name属性。此时，可以使用prototype实现访问Man对象的属性。

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

Man.prototype.introduce = function() {
  console.log("My name is " + this.name + ", I am " + this.age + " years old");
}

Man.prototype.run = function() {
  console.log(this.name + " is running");
}

var tom = new Man('Tom', 20);
tom.introduce(); // My name is Tom, I am 20 years old
tom.run(); // Tom is running

这里将introduce和run方法都挂载到prototype对象上，并且在方法中使用this访问对象属性，成功地访问了Man对象的属性。