JavaScript 原型与原型链:深入理解 __proto__ 和 prototype 的由来与关系

引言

在 JavaScript 的世界中,原型和原型链是理解这门语言面向对象编程(OOP)机制的核心。不同于传统的基于类的语言如 Java,JavaScript 采用了一种独特的原型继承机制。本文将深入探讨 __proto__prototype 的由来、关系以及它们在 JavaScript 中的作用。


一、JavaScript 的 OOP 机制

传统的面向对象编程语言(如 Java)具有类、继承、封装和多态等特性。JavaScript 虽然也支持 OOP,但其实现方式却大不相同。

1.1 没有类的 JavaScript

在 ES6 之前,JavaScript 并没有 class 关键字。为了实现类似类的功能,开发者通常使用构造函数和原型来模拟类的行为。例如:

java 复制代码
// Java 中的类定义
public class Puppy {
    int puppyAge;
    public Puppy(int age) {
        puppyAge = age;
    }
    public void say() {
        System.out.println("汪汪汪");
    }
}

而在 JavaScript 中,我们通过函数来模拟类:

javascript 复制代码
// JavaScript 中的构造函数模拟类
function Person(name, age) {
    this.name = name;
    this.age = age;
}

1.2 对象字面量的局限性

虽然可以通过对象字面量创建对象,但当需要创建多个相似对象时,这种方式显得非常繁琐:

javascript 复制代码
var Person = {
    name: '吉他胡',
    hobbies: ['弹吉他', '弹钢琴'],
}

var pll = {
    name: '皮乐乐',
    hobbies: ['弹吉他', '弹钢琴'],
}

为了解决这个问题,JavaScript 引入了构造函数和原型的概念。


二、构造函数与原型

2.1 构造函数

构造函数是 JavaScript 中模拟类的关键。通过约定俗成,构造函数的名称首字母大写:

javascript 复制代码
function Person(name, age) {
    this.name = name;
    this.age = age;
}

2.2 prototype 属性

每个函数都有一个 prototype 属性,它是一个对象,用于存储共享的属性和方法。通过将方法定义在 prototype 上,可以避免每次实例化对象时重复创建方法:

javascript 复制代码
Person.prototype.sayHello = function() {
    console.log(`hello, my name is ${this.name}`);
}

2.3 __proto__ 属性

每个对象都有一个私有属性 __proto__,它指向构造函数的 prototype 对象。例如:

javascript 复制代码
let hu = new Person('吉他胡', 18);
console.log(hu.__proto__ === Person.prototype); // true

__proto__ 是对象与构造函数之间的桥梁,也是原型链实现的基础。


三、原型链

3.1 原型链的概念

JavaScript 中的继承是通过原型链实现的。当访问一个对象的属性或方法时,如果对象本身没有该属性,JavaScript 会沿着 __proto__ 向上查找,直到找到该属性或到达原型链的顶端(Object.prototype),最终指向 null

javascript 复制代码
console.log(hu.toString()); // 调用的是 Object.prototype.toString

3.2 修改原型链

__proto__ 可以动态修改,从而改变对象的原型链:

javascript 复制代码
var a = {
    name: '孔子',
    country: '中国',
};
hu.__proto__ = a;
console.log(hu.country); // 输出:中国

3.3 原型链的终点

原型链的顶端是 Object.prototype,其 __proto__ 指向 null

javascript 复制代码
console.log(Object.prototype.__proto__); // null

四、new 的过程

当我们使用 new 关键字创建对象时,JavaScript 会执行以下步骤:

  1. 创建一个空对象 {}
  2. 运行构造函数,并将 this 指向这个空对象。
  3. 将对象的 __proto__ 指向构造函数的 prototype
  4. 返回构造完成的对象。
javascript 复制代码
let hu = new Person('吉他胡', 18);

五、prototype__proto__ 的关系

  • prototype:是函数特有的属性,指向构造函数的原型对象。
  • __proto__ :是对象特有的属性,指向构造函数的 prototype 对象。

它们的关系可以用以下代码验证:

javascript 复制代码
console.log(Person.prototype.constructor === Person); // true
console.log(hu.__proto__ === Person.prototype); // true

六、总结

  1. JavaScript 没有类,而是通过构造函数和原型模拟类的行为。
  2. prototype 是函数特有的属性,用于定义共享的属性和方法。
  3. __proto__ 是对象特有的属性,用于构建原型链。
  4. 原型链 是 JavaScript 实现继承的机制,通过 __proto__ 向上查找属性和方法。
  5. new 关键字 通过构造函数创建对象,并建立原型链关系。

理解原型和原型链是掌握 JavaScript 面向对象编程的关键。虽然 ES6 引入了 class 语法,但其底层仍然是基于原型的实现。希望本文能帮助你更好地理解 JavaScript 的原型机制!

相关推荐
海天胜景33 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中2 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
wei_shuo2 小时前
飞算 JavaAI 开发助手:深度学习驱动下的 Java 全链路智能开发新范式
java·开发语言·飞算javaai
熊猫钓鱼>_>2 小时前
用Python解锁图像处理之力:从基础到智能应用的深度探索
开发语言·图像处理·python
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun2 小时前
Promise 基础使用
前端·javascript·promise