当前位置：首页 > news >正文

JavaScript 原型链那些事

news 来源：原创 2024/7/7 18:52:44

在讲原型之前我们先来了解一下函数。

在JS中，函数的本质就是对象，它与其他对象不同的是，创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢？是一个叫做Function的特殊函数，通过newFunction 产生的对象就是一个函数。

function f1() {}
//上面的函数等同于：
var f1 = new Function();function sum(a, b) {return a + b;
}
//上面的函数等同于：
var sum = new Function("a", "b", "return a + b");//前面的是函数形参名，最后一个参数是函数体

当一个函数被创建后，这个函数就会自动附带一个属性prototype，它就是一个Object对象，代表着函数的原型。也就是说prototype就是原型对象。
原型对象中包含两个属性：constructor和__proto__。constructor这个属性是指创建原型的函数,它指向函数本身。所以有以下关系：
在这里插入图片描述

var Person = function () { };
var p = new Person();

看这个 new 究竟做了什么？

我们把 new 的过程拆分成以下三步：

var p={}; 也就是说，初始化一个对象p。

p.proto=Person.prototype;

Person.call§;也就是说构造p，也可以称之为初始化p。

总结原型链的工作原理：

1. 原型对象：在JavaScript中，对象可以有一个原型对象，该对象本身也是一个对象。对象的原型对象通过内部属性[[Prototype]]来引用，这个属性在ES5可以通过Object.getPrototypeOf()或__proto__（非标准但被广泛实现的属性）访问。

2. 属性查找：当访问一个对象的属性时，如果该属性在对象自身上不存在，JavaScript 引擎会沿着[[Prototype]]链向上查找，直到找到该属性或到达链的末端。

3. 构造函数的prototype属性：每个函数都有一个prototype属性，指向一个对象，这个对象是使用该构造函数创建的所有实例的原型。

4. 原型链的末端：所有原型链最终都指向Object.prototype，这是内置的Object构造函数的prototype属性。Object.prototype的原型是null，表示原型链的结束。

代码示例：

示例1：原型链的基础

function Person(name) {this.name = name;
}// 为Person构造函数的prototype添加一个方法
Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};// 创建Person的实例
var person = new Person("Alice");// 调用原型链上的方法
person.sayHello(); // 输出: Hello, my name is Alice// 查看person的原型
console.log(Object.getPrototypeOf(person) === Person.prototype); // 输出: true

示例2：原型链的继承

// 假设我们有一个Animal构造函数
function Animal(species) {this.species = species;
}Animal.prototype.eat = function() {console.log("Animal eats.");
};// Person构造函数继承自Animal
Person.prototype = Object.create(Animal.prototype);
Person.prototype.constructor = Person; // 修复Person实例的constructor属性// 创建Person的实例
var person = new Person("Alice");// 继承自Animal的方法
person.eat(); // 输出: Animal eats.// Person的原型链
console.log(person.__proto__ === Person.prototype); // 输出: true
console.log(person.__proto__.__proto__ === Animal.prototype); // 输出: true
console.log(person.__proto__.__proto__.__proto__ === Object.prototype); // 输出: true

示例3：原型链的查找过程

var myObject = {sayHi: function() {console.log("Hi!");}
};var childObject = Object.create(myObject);
childObject.name = "Child";// 调用原型链上的方法
childObject.sayHi(); // 输出: Hi!// 原型链的属性查找
console.log(childObject.hasOwnProperty('sayHi')); // 输出: false
console.log(childObject.hasOwnProperty('name')); // 输出: true

最后有关原型链的注意问题：

原型链的修改：可以在任何时候修改对象的原型，但要注意这可能会影响所有继承自该原型的对象。
性能问题：原型链的深度不宜过长，否则可能会影响属性访问的性能。
构造函数的选择：使用构造函数、Object.create()或其他工厂模式时，要明确原型链的设置。
__proto__属性：__proto__属性是特定于某些JavaScript引擎的实现，并非ECMAScript标准的一部分。使用Object.getPrototypeOf()和Object.setPrototypeOf()是更标准和可移植的方法。

原型链，你理解了吗？