js原型和原型链

1. 原型(Prototype)

每个 JavaScript 对象都有一个内部属性 [[Prototype]],这个属性指向它的原型对象。原型对象本身也是一个对象,通常我们通过 prototype 属性来访问对象的原型。

例如:

  • 函数的原型:

    每个函数对象都有一个 prototype 属性,该属性指向一个对象,这个对象就是函数的原型。例如,Array 构造函数的原型对象包含了数组实例的方法,如 pushpop 等。

javascript 复制代码
function MyConstructor() {}
console.log(MyConstructor.prototype);  // 输出:MyConstructor { constructor: ƒ }

2. 原型链(Prototype Chain)

原型链是通过对象的 [[Prototype]] 属性形成的一种链式结构。当我们访问一个对象的属性或方法时,JavaScript 会先在对象本身查找,如果没有找到,就会查找对象的原型([[Prototype]])。如果在原型中还没有找到,它会继续查找原型的原型,直到找到 null 为止。

  • 对象的原型是另一个对象,这个对象也有自己的原型,依此类推,直到原型链的顶端,即 null

3. 原型链的工作原理

当访问一个对象的属性时,JavaScript 会按照以下顺序查找:

  1. 如果对象本身有该属性,就直接返回该属性的值。
  2. 如果对象本身没有该属性,它会查找该对象的原型(即 [[Prototype]])。
  3. 如果原型上没有该属性,它会继续查找原型的原型。
  4. 这一过程一直持续,直到找到该属性或达到原型链的顶端(即 null),如果都找不到,就返回 undefined

4. 示例

让我们看一个简单的例子,理解原型链的概念:

javascript 复制代码
function Animal(name) {
  this.name = name;
}

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

function Dog(name) {
  Animal.call(this, name);  // 调用父类构造函数
}

Dog.prototype = Object.create(Animal.prototype);  // 继承Animal的原型
Dog.prototype.constructor = Dog;  // 修正构造函数指向

Dog.prototype.bark = function() {
  console.log(this.name + ' barks.');
};

const dog = new Dog('Buddy');
dog.speak();  // 输出: Buddy makes a noise.
dog.bark();   // 输出: Buddy barks.
原型链分析:
  • dog 是一个 Dog 实例,它的原型是 Dog.prototype
  • Dog.prototype 是通过 Object.create(Animal.prototype) 创建的,所以 dog 的原型链包含了 Animal.prototype
  • dog 可以访问到 Animal.prototype 中的方法 speak,同时它也有自己的方法 bark

在这个例子中,dog 会依次查找属性:

  1. dog 是否有 speak 属性?没有。
  2. dog 的原型链指向 Dog.prototypeDog.prototype 上没有 speak
  3. Dog.prototype 的原型链指向 Animal.prototypeAnimal.prototype 上有 speak,所以 dog.speak() 可以成功调用。

5. 重要概念:

  • 继承: 原型链是 JavaScript 中实现继承的基本机制。通过设置对象的原型,可以使得一个对象"继承"另一个对象的属性和方法。
  • constructor 属性: 每个对象的原型都指向一个构造函数。构造函数有一个 constructor 属性,指向其原型对象。

总结

  • 原型 是构造函数的 prototype 属性,它用于存放可以由该构造函数创建的所有实例共享的方法和属性。
  • 原型链 是一个对象链,通过对象的 [[Prototype]] 属性连接。查找对象的属性时,如果该对象没有,则会沿着原型链查找,直到查找到 null 为止。

通过理解原型和原型链,可以更好地理解 JavaScript 中的继承、对象创建和属性查找机制

相关推荐
future141244 分钟前
C#学习日记
开发语言·学习·c#
come1123444 分钟前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
king_harry1 小时前
Java程序-OceanBase Connector/J 示例
开发语言
前端风云志1 小时前
TypeScript结构化类型初探
javascript
傻啦嘿哟2 小时前
Python 办公实战:用 python-docx 自动生成 Word 文档
开发语言·c#
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
q567315232 小时前
R语言初学者爬虫简单模板
开发语言·爬虫·r语言·iphone
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说3 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb