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 中的继承、对象创建和属性查找机制

相关推荐
wjs202439 分钟前
状态模式(State Pattern)
开发语言
我命由我1234543 分钟前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
liulilittle43 分钟前
C++ TAP(基于任务的异步编程模式)
服务器·开发语言·网络·c++·分布式·任务·tap
励志要当大牛的小白菜2 小时前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
爱装代码的小瓶子5 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
Maybe_ch6 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
超浪的晨6 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
终焉暴龙王6 小时前
CTFHub web进阶 php Bypass disable_function通关攻略
开发语言·安全·web安全·php
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript