js原型链详解

### JavaScript原型与原型链详解 JavaScript作为一门基于原型的语言，其原型和原型链的概念是理解和掌握JS继承机制的关键。接下来将详细阐述这些概念。 #### 普通对象与函数对象 在JavaScript中，一切皆为对象，但对象可以分为两类：普通对象和函数对象。普通对象是通过字面量或构造函数创建的对象实例，而函数对象则是可以调用的函数。需要注意的是，Object和Function是JavaScript自带的函数对象。例如： ```javascript var o1 = {}; // 普通对象 var o2 = new Object(); // 普通对象 function f1(){}; // 函数对象 var f2 = function(){}; // 函数对象 var f3 = new Function('str', 'console.log(str)'); // 函数对象 ``` 在上述代码中，通过直接赋值和new Object()创建的都是普通对象，而通过function和new Function()创建的则是函数对象。普通对象的typeof结果是"object"，而函数对象则是"function"。 #### 构造函数 在JavaScript中，构造函数是用来创建对象的函数。它和普通函数的区别在于调用方式不同。创建实例时，构造函数内的this指向新创建的对象。 ```javascript function Person(name, age, job) { this.name = name; this.age = age; this.job = job; } Person.prototype.sayName = function() { alert(this.name); }; var person1 = new Person('Zaxlct', 28, 'Software Engineer'); var person2 = new Person('Mick', 23, 'Doctor'); ``` 在上述代码中，Person是一个构造函数，person1和person2是Person的实例。每个实例都有一个constructor属性，该属性指向Person，即构造函数本身。 #### 原型对象 在JavaScript中，每个函数对象都有一个prototype属性，这个属性是一个指针，指向一个原型对象。而每个对象（包括原型对象本身）都有一个__proto__属性，指向创建该对象的构造函数的原型对象。原型对象本质上是一个普通的对象，它包含实例共享的属性和方法。 ```javascript function Person() {} Person.prototype.name = 'Zaxlct'; Person.prototype.age = 28; Person.prototype.job = 'Software Engineer'; Person.prototype.sayName = function() { alert(this.name); }; var person1 = new Person(); var person2 = new Person(); ``` 在上述代码中，Person的每个实例都共享Person.prototype所指向的原型对象。如果在Person的实例上找不到某个属性或方法，JavaScript会查找该实例的__proto__，也就是其构造函数的prototype所指向的原型对象，若仍未找到，则会继续往上查找，直到到达原型链的末端（通常是指向Object.prototype的原型对象）。 #### 原型链 原型链是JavaScript实现继承的基础。它是一个由对象的原型通过__proto__连接成的链状结构。当访问一个对象的属性时，如果在当前对象中找不到，JavaScript引擎会继续访问该对象的原型对象中的属性，如果还找不到，则继续沿着原型链向上查找，直到找到相应的属性或到达原型链的末端。 ```javascript console.log(person1.sayName == person2.sayName); // true ``` 在上述代码中，person1和person2的sayName方法实际上都是同一个方法，因为它们共享了同一个sayName方法，这个方法位于它们的原型对象中，即Person.prototype。 #### 构造函数、实例和原型的关系 总结一下，构造函数、实例和原型之间的关系如下： 1. 构造函数的prototype属性指向原型对象。 2. 实例对象的__proto__属性指向构造函数的prototype所指向的原型对象。 3. 实例的constructor属性指向构造函数本身。 这样的关系形成了原型链，使得对象可以继承其原型对象的属性和方法。 #### 继承 在JavaScript中，继承的实现依赖于原型链。子类的原型对象继承自父类的原型对象，从而使得子类的实例能够访问父类原型对象上的属性和方法。这是通过设置子类构造函数的prototype属性实现的： ```javascript function SubType() { // 继承的代码... } SubType.prototype = new SuperType(); // 继承了SuperType的属性和方法 SubType.prototype.constructor = SubType; // 修正构造函数的指向 ``` 通过上述代码，SubType继承了SuperType，SubType的实例将具有SuperType原型上的属性和方法。 #### 小结 JavaScript的原型与原型链是理解和运用JavaScript对象继承的核心。通过构造函数、实例对象以及原型对象之间的关系，可以构建起整个原型链，实现基于原型的继承。掌握这些概念对于深入学习JavaScript是非常有帮助的。