prototype是函数特有的属性,是Function的静态属性;__proto__是对象特有的属性。

因为函数本身是一种对象,所以函数既有prototype属性也有__proto__属性。

当函数使用prototype属性时,是作为构造函数使用;

当函数使用__proto__属性时,是作为一个对象使用。

另外,__proto__属性内部属性,尽量不要使用。可以用setPrototypeOf()和getPrototypeOf()代替。

1)普通函数分别取值

    function C() {}
console.log(C.prototype);
/*{ constructor: function C(){},__proto__: Object }*/
// 使用__proto__时,是普通函数对象,原型对象指向Funtion的prototype属性
console.log(C.__proto__ === Function.prototype);

对于普通函数来说,prototype属性和__proto__属性都是可读写属性。

给prototype赋值,会改变函数的原型对象和上面的构造函数。

    function C() {}
function D() {}
C.prototype = new D();
console.log(Object.getOwnPropertyDescriptor(C, 'prototype'));
/*
{value: D, writable: true, enumerable: false, configurable: false} //可写
*/
console.log(C.prototype.constructor === D); // true

2)class类分别取值,和普通函数一样

  class A{}
console.log(A.prototype);
// {constructor: ƒ, __proto__: Object}
console.log(A.__proto__ === Function.prototype);// true

但是,在class中,prototype属性是只读的

  class A{}
class B{
add(){console.log('add')}
static add(){console.log('static add')}
}
const a = new A();
const b= new B();
console.log(Object.getOwnPropertyDescriptor(A, 'prototype'));
// {value: {…}, writable: false, enumerable: false, configurable: false}; // 只读
A.__proto__ = B; // 静态属性方法继承
b.add(); // add
// a.add(); ❌ 不存在
A.add(); // static add
A.prototype.__proto__ = B.prototype; // 实例属性方法继承
a.add(); // add

彻底搞懂prototype和__proto__的更多相关文章

  1. 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__

    这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...

  2. 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍

    这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...

  3. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  4. 彻底搞懂js __proto__ prototype constructor

    在开始之前,必须要知道的是:对象具有__proto__.constructor(函数也是对象固也具有以上)属性,而函数独有prototype 在博客园看到一张图分析到位很彻底,这里共享: 刚开始看这图 ...

  5. 一文彻底搞懂JavaScript中的prototype

    prototype初步认识 在学习JavaScript中,遇到了prototype,经过一番了解,知道它是可以进行动态扩展的 function Func(){}; var func1 = new Fu ...

  6. JS 中的原型 -- prototype、__proto__ 以及原型链

    原文: 1.深入理解javascript原型和闭包——prototype原型 2.三张图搞懂JavaScript的原型对象与原型链 打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一 ...

  7. 原型模式Prototype,constructor,__proto__详解

    最近由于在找工作,又拿起<JavaScript高级程序设计>看了起来,从中也发现了自己确实还是有很多地方不懂,刚刚看到原型模式这里,今天终于搞懂了,当然,我也不知道自己的理解是否有错. 1 ...

  8. JS中的prototype、__proto__与constructor属性

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  9. JS中的prototype、__proto__与constructor

    1.前言 作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关 ...

随机推荐

  1. ubuntu svn 安装

    deepin@deepin:~$ sudo apt-get install rabbitvcs-rabbitvcs-cli rabbitvcs-core rabbitvcs-gedit rabbitv ...

  2. php底层源码之数组

    数组key和value的限制条件 <?php $arr = array( 1 => 'a', "1" => "b", 1.5 => &q ...

  3. T4模板使用笔记

    路径获取 ① 获取当前解决方案路径 string solutionsPath = Host.ResolveAssemblyReference("$(SolutionDir)"); ...

  4. XML和JSON序列化以及反序列化

    1.将文件保存序列化至文档中,然后再读取: //首先创建可序列化的实体类 [Serializable] public class Message { public string Name { get; ...

  5. Java框架 高并发系列 1第1天:必须知道的几个概念

    https://mp.weixin.qq.com/s?__biz=MzA5MTkxMDQ4MQ==&mid=2648933019&idx=1&sn=3455877c451de9 ...

  6. ASP.NET WEB应用程序(.network4.5)MVC 程序的结构解读1

    https://www.cnblogs.com/-beauTiFul/p/8036509.html 简介 开发环境:VS2015 ASP.NET:可以开发出几乎所有运行在Windows上的应用程序:. ...

  7. 案例-使用MapReduce实现join操作

    哈喽-各位小伙伴们中秋快乐,好久没更新新的文章啦,今天分享如何使用mapreduce进行join操作. 在离线计算中,我们常常不只是会对单一一个文件进行操作,进行需要进行两个或多个文件关联出更多数据, ...

  8. ARM微控制器与嵌入式系统

    个牛人在ARM实现嵌入式系统的过程 第一章  概览 1.1课程概览 认识ARM嵌入式系统(什么是ARM?什么是嵌入式系统?) 备战智能车 在科技活动中玩起来 积累计算机.电路基础知识 1.2如何学好嵌 ...

  9. 安装theano踩过的坑(gpu)

    参考 http://deeplearning.net/software/theano/install.html TensorFlow出了点问题 python3.7的环境 pip安装 keras已经安装 ...

  10. linux内核信号量

    用户态的信号量: System V 信号量 Posix 信号量 信号量是用于保护临界区的一种常用方法.它的使用和自旋锁类似.相同的是,只有得到信号量的进程才能执行临界区代码:不同的是,当获取不到信号量 ...