JavaScript原型与原型链机制解析

普通对象与函数对象的区分

深入理解原型与原型链概念，需先厘清普通对象与函数对象的差异。

一、普通对象与函数对象的区分

JavaScript中万物皆对象，但对象类型存在区别。首先需明确普通对象与函数对象的定义，参考以下代码示例：

function f1(){};
var f2 = function(){};
var f3 = new function(){};

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(typeof Object); //function
console.log(typeof Function);//function
console.log(typeof f1) //function
console.log(typeof f2) // function
console.log(typeof f3) //function
console.log(typeof o1) //object
console.log(typeof o2) //object
console.log(typeof o3)// object

上述代码显示，f1、f2和f3属于函数对象，而o1、o2和o3属于普通对象（object）。函数对象本质上由new function()构造生成，其余均为普通对象。明确这两类对象的区别后，后续将阐述它们的具体差异。

原型概念

二、原型概念

在JavaScript中，原型本身也是一个对象，其核心功能是实现对象的继承机制。

所有函数对象均包含一个prototype属性，该属性指向当前对象的原型。

所有JavaScript对象均具备__proto__属性（注：__proto__为非标准属性，早期仅Firefox和Chrome支持，标准方法为Object.getPrototypeOf()）。__proto__属性指向实例对象所属构造函数的原型，具体理解如下：

var p = new Person(); 
console.log(p._proto === Person.prototype)//true 

通过上述代码可见，p为实例对象，Person为其构造函数。由此可知，p的__proto__属性指向构造函数Person的原型。

以下代码展示了JavaScript如何利用原型实现继承：

var parent = function(name){
 this.name = name;
}
parent.prototype.getName = function(){
 return this.name;
}
var son = new parent("huahua");

console.log(son.getName());//'huahua'

由此可见，son继承了parent原型中的getName函数属性。

原型链机制

三、原型链机制

除了Object的prototype原型为null外，所有对象和原型均拥有自己的原型，且对象的原型指向原型对象。

在层级关系复杂的情况下，多个原型依次连接形成原型链。

查找对象属性时，若当前对象中未找到该属性，则沿原型链向上查找，直至找到为止；若到达原型链顶端仍未找到，则返回undefined。

constructor属性

四、constructor属性

constructor是构造函数创建的实例所持有的属性，其作用是指示创建当前对象的构造函数。

例如，执行son.constructor == parent将返回true。

以上内容涵盖了原型与原型链的核心知识点，希望有助于读者的学习，欢迎持续关注本站获取更多技术分享。