【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念

简介: 【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。

在 JavaScript 中,prototype 和proto是两个非常重要且容易混淆的概念。理解它们之间的区别对于深入掌握 JavaScript 语言特性至关重要。本文将从三个部分详细探讨 prototype 和proto的直观区别。

一、prototype 的含义与作用

1. 什么是 prototype

在 JavaScript 中,每个函数都有一个 prototype 属性。这个属性是一个对象,它可以被用作其他对象的原型。当我们使用构造函数创建一个新对象时,这个新对象会继承构造函数的 prototype 属性所指向的原型对象的属性和方法。

2. prototype 的作用

prototype 的主要作用是实现对象的继承。通过将方法和属性定义在构造函数的 prototype 上,我们可以避免在每个实例对象上重复创建这些方法和属性,从而提高代码的效率和可维护性。

3. 实例化对象与 prototype 的关系

当我们使用构造函数创建一个新对象时,这个新对象会通过proto属性与构造函数的 prototype 建立联系,从而继承原型上的方法和属性。

二、proto的含义与作用

1. 什么是proto

proto是每个对象都具有的一个属性,它指向该对象的原型对象。proto可以被看作是对象在查找属性和方法时的一个“链接”,通过它可以找到对象的原型对象,进而找到原型对象上的属性和方法。

2. proto的作用

proto的主要作用是实现对象的属性查找机制。当我们在一个对象上查找某个属性或方法时,如果在该对象本身找不到,JavaScript 就会通过proto属性沿着原型链向上查找,直到找到为止。

3. proto与 prototype 的联系

proto和 prototype 是相互关联的。proto指向的就是构造函数的 prototype。可以说,proto是对象与原型之间的“桥梁”,通过它实现了对象与原型之间的联系。

三、prototype 和proto的直观区别

1. 定义位置不同

prototype 是定义在函数上的属性,而proto是定义在对象上的属性。

2. 作用不同

prototype 主要用于实现对象的继承,而proto主要用于实现对象的属性查找机制。

3. 可见性不同

prototype 对于开发者来说是可见的,可以直接访问和操作。而proto对于开发者来说是不可见的,它是由 JavaScript 引擎内部维护的。

4. 访问方式不同

我们可以通过构造函数的 prototype 属性来访问 prototype,而proto则需要通过对象的proto属性来访问。

5. 关系不同

prototype 是构造函数的属性,proto是对象的属性。proto指向构造函数的 prototype,从而实现了对象与原型之间的联系。

为了更直观地理解 prototype 和proto的区别,我们可以通过一个示例来进行说明。

假设有一个构造函数 Person:

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

我们使用 Person 构造函数创建一个新对象 person1:

const person1 = new Person('张三');

在这个示例中,person1 对象的proto指向 Person 构造函数的 prototype。我们可以通过以下方式来验证:

console.log(person1.__proto__ === Person.prototype);

同时,我们也可以在 Person 构造函数的 prototype 上添加方法:

Person.prototype.sayHello = function() {
   
  console.log('Hello, I am'+ this.name);
};

然后,我们可以在 person1 对象上调用这个方法:

person1.sayHello();

通过这个示例,我们可以更加直观地感受到 prototype 和proto之间的区别和联系。

总之,prototype 和proto是 JavaScript 中非常重要的两个概念。理解它们之间的区别对于深入掌握 JavaScript 语言特性至关重要。希望本文能够帮助读者更好地理解 prototype 和proto的直观区别。

相关文章
|
11天前
|
存储 JavaScript 前端开发
|
11天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
12 1
|
8天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
10 0
|
9天前
|
JavaScript
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
js 简易对象转字符串后恢复为简易对象(如 ^a=$1^b=2转对象)
8 0
|
10天前
|
JavaScript
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
js 数组移除指定元素【函数封装】(含对象数组移除指定元素)
8 0
|
10天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
13 0
|
10天前
|
JavaScript 前端开发 测试技术
js 控制台调试——console 对象【详解】
js 控制台调试——console 对象【详解】
14 0
|
10天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
10 0
|
11天前
|
前端开发 JavaScript 流计算
前端 JS 经典:打印对象的 bug
前端 JS 经典:打印对象的 bug
11 0