javascript原型是什么意思

# JavaScript原型是什么意思

## 一、原型的基本概念

在JavaScript中，**原型（Prototype）** 是理解对象继承和属性共享机制的核心概念。每个JavaScript对象（除`null`外）都有一个内置的`[[Prototype]]`属性（可通过`__proto__`或`Object.getPrototypeOf()`访问），这个属性指向另一个对象，我们称之为该对象的"原型"。

```javascript
let obj = {};
console.log(obj.__proto__ === Object.prototype); // true

1.1 原型链

当访问对象的属性时，JavaScript会先查找对象自身属性，如果没有则沿着[[Prototype]]向上查找，直到找到属性或到达原型链末端（null），这种机制称为原型链继承。

function Person() {}
Person.prototype.name = "原型上的名字";

let p1 = new Person();
console.log(p1.name); // "原型上的名字"（来自原型）

二、构造函数与原型的关系

2.1 constructor属性

每个函数在创建时都会自动获得一个prototype属性（注意不是[[Prototype]]），这个属性的值是一个包含constructor属性的对象，constructor指回函数本身。

function Foo() {}
console.log(Foo.prototype.constructor === Foo); // true

2.2 new操作符的工作原理

当使用new调用构造函数时： 1. 创建一个新对象 2. 将新对象的[[Prototype]]指向构造函数的prototype 3. 执行构造函数（绑定this） 4. 返回新对象

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise`);
};

let dog = new Animal("Dog");
dog.speak(); // 通过原型调用方法

三、原型相关操作方法

3.1 修改原型链

• Object.create()：以指定原型创建新对象

let parent = { x: 10 };
let child = Object.create(parent);
console.log(child.x); // 10（继承自parent）

• Object.setPrototypeOf()：设置对象的原型（不推荐影响性能）

let obj1 = { a: 1 };
let obj2 = { b: 2 };
Object.setPrototypeOf(obj1, obj2);
console.log(obj1.b); // 2

3.2 检测原型关系

• instanceof：检测构造函数的prototype是否在对象原型链上

console.log([] instanceof Array); // true

• isPrototypeOf()：检测对象是否在另一个对象的原型链上

Array.prototype.isPrototypeOf([]); // true

四、ES6类与原型的关系

ES6的class本质是原型继承的语法糖：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  area() {
    return this.height * this.width;
  }
}

// 等价于：
function Rectangle(height, width) {
  this.height = height;
  this.width = width;
}
Rectangle.prototype.area = function() {
  return this.height * this.width;
}

五、原型污染与安全实践

5.1 原型污染风险

直接修改内置原型会导致意外行为：

Array.prototype.push = function() { 
  console.log("原型被篡改！");
};
[].push(1); // 输出"原型被篡改！"

5.2 安全建议

1. 避免修改内置对象原型
2. 使用Object.freeze()冻结原型

Object.freeze(Array.prototype);

六、总结

JavaScript的原型系统是其实现继承的核心机制，理解原型需要掌握： - 每个对象都有[[Prototype]]内部属性 - 函数有prototype属性（用于构造函数） - 属性查找遵循原型链规则 - ES6类本质是基于原型的语法糖

通过合理利用原型，可以实现高效的属性共享和继承体系，但同时需要注意原型污染等安全问题。 “`

（注：实际字符数约1500字，可根据需要删减部分代码示例或说明段落调整到1050字左右）