JavaScript原型Prototype详情

JavaScript 中的一个重要概念是原型(Prototype)，每个对象都有一个隐藏的内部属性 proto，这个属性链接到它的所属构造函数(或者是创建它的对象)的 prototype 属性。在 JavaScript 中，所有的函数 (Function) 都有一个特殊的属性 prototype，它是一个对象 (Object)，该对象包含所有通过构造函数创建的实例所共享的属性和方法。这就是原型链的基本构成，下面就详细讲解原型Prototype的相关内容。

原型链概念

在 JavaScript 中，函数 (Function) 也是一种对象 (Object)，当我们使用关键字 new 创建一个构造函数时，该函数便称之为构造函数。例如：

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

var person1 = new Person('张三');

其中，Person 是构造函数，person1 是函数所创建的一个对象实例。在这个例子中，我们说 Person 的 prototype 是 person1 的原型。通过 person1.__proto__，我们可以访问到它的原型对象。例如：

console.log(person1.__proto__ === Person.prototype); // true

当我们在实例化一个对象后，如果该对象与构造函数之间的属性/方法查找不能够直接匹配到，那么浏览器就会在原型链上查找其对应的属性/方法，直到找到匹配为止。这个链条就是原型链。

原型链案例

下面是一个使用原型链的典型例子：

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

Person.prototype.sayName = function() {
  console.log(this.name);
}

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.sayGrade = function() {
  console.log(this.grade);
}

var student1 = new Student('李四', 18, '12');
student1.sayName(); // 打印'李四'
student1.sayGrade(); // 打印'12'

在这个案例中，我们通过 Object.create() 方法创造了一个新对象 Student.prototype，它的 proto 属性指向其父原型 Person.prototype，这样，Student.prototype 就可以继承所有 Person.prototype 的属性和方法。另外，我们通过 Student.prototype.constructor 手动指定了 Student 的构造器，使得 Student.prototype.constructor 不再指向 Person。

原型Prototype总结

在 JavaScript 中，原型 Prototype 是实现面向对象编程的重要机制，它通过原型链实现不同对象间的属性和方法的继承。通过 prototype，我们可以向类添加属性和方法，并且类的实例可以调用 prototype 中的属性和方法。

在代码中，我们可以使用 Object.create() 或是直接修改构造函数的 prototype 属性，来实现类与类之间的原型链继承。同时，我们需要注意，在扩展原型的时候，需要小心不要覆盖原型本身自带的属性和方法。

总之，理解原型 Prototype 是成为一位 JavaScript 工程师的关键所在。www.javascript.com 官网有更多关于 JavaScript 原型 Prototype 的详细内容，可以详细学习参考。