0

0

JS中__proto__与prototype的区别

PHPz

PHPz

发布时间:2024-02-19 13:38:06

|

1253人浏览过

|

来源于php中文网

原创

js中__proto__与prototype的区别

JS中__proto__和prototype是两个与原型相关的属性,它们在功能上稍有不同。本文将具体介绍并比较这两者的区别,并提供相应的代码示例。

首先,我们先来了解一下它们的含义和用途。

proto

__proto__是对象的一个内置属性,它用于指向该对象的原型。每个对象都有一个__proto__属性,包括自定义对象、内置对象和函数对象。通过__proto__属性,我们可以访问和操作对象的原型链。

让我们来看一个例子:

let obj = {};
console.log(obj.__proto__); // 输出:Object {}

let arr = [];
console.log(arr.__proto__); // 输出:Array []

function func() {}
console.log(func.__proto__); // 输出:[Function]

上面的代码中,我们创建了一个空对象obj,并访问了它的__proto__属性。可以看到,obj.__proto__指向了一个Object{}对象。同样,我们还创建了一个空数组arr,并访问了它的__proto__属性,结果是arr.__proto__指向了一个Array []对象。而对于函数对象func来说,它的__proto__指向的是一个[Function]对象。

总结起来,__proto__属性用于指向对象的原型,我们可以通过它来访问和操作原型链。

prototype

prototype是函数对象独有的属性,它指向了一个原型对象。每个函数对象都有一个prototype属性,但它只有在这个函数作为构造函数使用时才有意义。

我们来看一个示例:

汉仪书宋一字体
汉仪书宋一字体

汉仪书宋一简是汉仪字库里面宋体的一种,与宋体字没什么区别,通常用于特殊提醒如批注中。

下载
function Person() {}

console.log(Person.prototype); // 输出:Person {}

上面的代码中,我们定义了一个Person函数对象,并访问了它的prototype属性。可以看到,Person.prototype指向了一个Person{}对象。

prototype属性的主要作用是在构造函数模式下,用于构建实例对象的原型链。当我们使用构造函数来创建一个对象时,它的__proto__属性会指向构造函数的prototype属性。

let person = new Person();

console.log(person.__proto__ === Person.prototype); // 输出:true

上面的代码中,我们使用了Person构造函数来创建了一个对象person。结果表明,person.__proto__指向了Person.prototype。

区别和联系

__proto__和prototype都与对象的原型相关,它们之间的联系和区别如下:

  1. __proto__是实例对象的属性,用于指向该对象的原型;而prototype是构造函数的属性,用于指向构造函数的原型对象。
  2. __proto__是读取并访问对象的原型链的属性,可以在实例对象上直接访问;而prototype是构造函数的属性,只能在构造函数内部访问。
  3. __proto__可以通过Object.setPrototypeOf()或直接赋值的方式来修改;而prototype只能在构造函数内部通过函数名.prototype来修改。
  4. __proto__是非标准的属性,只有部分浏览器支持;而prototype是标准属性,所有的对象和函数都有。

下面的代码示例用于进一步说明这两者的区别与联系:

function Animal() {}
Animal.prototype.eat = function() {
  console.log("Animal is eating");
};

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log("Dog is barking");
};

const dog1 = new Dog();
dog1.eat(); // 输出:Animal is eating
dog1.bark(); // 输出:Dog is barking

console.log(dog1.__proto__ === Dog.prototype); // 输出:true
console.log(Dog.prototype.__proto__ === Animal.prototype); // 输出:true

上面的代码中,我们通过定义Animal构造函数和Dog构造函数,创建了一个继承关系。通过__proto__和prototype属性,我们可以访问到对象的原型链,并且证明了它们之间的联系。

综上所述,__proto__和prototype在JS中都与原型相关,但在功能和使用方式上有所不同。了解它们的区别可以帮助我们更好地理解JS中的原型机制,并在编写代码时更灵活地利用它们。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

510

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

254

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

5271

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

206

2023.09.04

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

217

2023.09.14

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

218

2023.09.21

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

0

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.3万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号