XSS原型与原型链

概念说明

prototype和__proto__均为函数中的一种属性，区别在于prototype是构造函数的属性，用于定义实例共享的属性和方法，__proto__是实例的属性，指向创建它的构造函数的prototype

function Animal(type) {
  this.type = type;
}

// 为构造函数的prototype添加方法
Animal.prototype.speak = function() {
  console.log(`I'm a ${this.type}`);
};

// 创建实例
const dog = new Animal('dog');
const cat = new Animal('cat');

// 验证实例的__proto__指向构造函数的prototype
console.log(dog.__proto__ === Animal.prototype);       // true
console.log(cat.__proto__ === Animal.prototype);       // true

// 验证构造函数的prototype.constructor指向自身
console.log(Animal.prototype.constructor === Animal);  // true

// 实例继承的方法来自prototype
console.log(dog.speak === Animal.prototype.speak);     // true
console.log(cat.speak === Animal.prototype.speak);     // true

原型链的层级结构

const bird = new Animal('bird');

// 验证原型链的层级
console.log(bird.__proto__ === Animal.prototype);              // true
console.log(Animal.prototype.__proto__ === Object.prototype);   // true
console.log(Object.prototype.__proto__ === null);               // true（原型链终点）

// 通过原型链访问Object的方法
console.log(bird.toString === Object.prototype.toString);       // true
console.log(bird.hasOwnProperty === Object.prototype.hasOwnProperty); // true

改原型对实例的影响

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

const apple = new Fruit('apple');
const banana = new Fruit('banana');

// 修改原型前
console.log(apple.color); // undefined

// 向原型添加属性
Fruit.prototype.color = 'unknown';

// 验证所有实例继承新属性
console.log(apple.color); 
console.log(banana.color); 
console.log(apple.color === Fruit.prototype.color); // true