彻底搞懂prototype和__proto__
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__的更多相关文章
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
- 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- 彻底搞懂js __proto__ prototype constructor
在开始之前,必须要知道的是:对象具有__proto__.constructor(函数也是对象固也具有以上)属性,而函数独有prototype 在博客园看到一张图分析到位很彻底,这里共享: 刚开始看这图 ...
- 一文彻底搞懂JavaScript中的prototype
prototype初步认识 在学习JavaScript中,遇到了prototype,经过一番了解,知道它是可以进行动态扩展的 function Func(){}; var func1 = new Fu ...
- JS 中的原型 -- prototype、__proto__ 以及原型链
原文: 1.深入理解javascript原型和闭包——prototype原型 2.三张图搞懂JavaScript的原型对象与原型链 打开浏览器控制台,任意定义一个对象,打印出来后,会发现有最后一定有一 ...
- 原型模式Prototype,constructor,__proto__详解
最近由于在找工作,又拿起<JavaScript高级程序设计>看了起来,从中也发现了自己确实还是有很多地方不懂,刚刚看到原型模式这里,今天终于搞懂了,当然,我也不知道自己的理解是否有错. 1 ...
- JS中的prototype、__proto__与constructor属性
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- JS中的prototype、__proto__与constructor
1.前言 作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关 ...
随机推荐
- ubuntu svn 安装
deepin@deepin:~$ sudo apt-get install rabbitvcs-rabbitvcs-cli rabbitvcs-core rabbitvcs-gedit rabbitv ...
- php底层源码之数组
数组key和value的限制条件 <?php $arr = array( 1 => 'a', "1" => "b", 1.5 => &q ...
- T4模板使用笔记
路径获取 ① 获取当前解决方案路径 string solutionsPath = Host.ResolveAssemblyReference("$(SolutionDir)"); ...
- XML和JSON序列化以及反序列化
1.将文件保存序列化至文档中,然后再读取: //首先创建可序列化的实体类 [Serializable] public class Message { public string Name { get; ...
- Java框架 高并发系列 1第1天:必须知道的几个概念
https://mp.weixin.qq.com/s?__biz=MzA5MTkxMDQ4MQ==&mid=2648933019&idx=1&sn=3455877c451de9 ...
- ASP.NET WEB应用程序(.network4.5)MVC 程序的结构解读1
https://www.cnblogs.com/-beauTiFul/p/8036509.html 简介 开发环境:VS2015 ASP.NET:可以开发出几乎所有运行在Windows上的应用程序:. ...
- 案例-使用MapReduce实现join操作
哈喽-各位小伙伴们中秋快乐,好久没更新新的文章啦,今天分享如何使用mapreduce进行join操作. 在离线计算中,我们常常不只是会对单一一个文件进行操作,进行需要进行两个或多个文件关联出更多数据, ...
- ARM微控制器与嵌入式系统
个牛人在ARM实现嵌入式系统的过程 第一章 概览 1.1课程概览 认识ARM嵌入式系统(什么是ARM?什么是嵌入式系统?) 备战智能车 在科技活动中玩起来 积累计算机.电路基础知识 1.2如何学好嵌 ...
- 安装theano踩过的坑(gpu)
参考 http://deeplearning.net/software/theano/install.html TensorFlow出了点问题 python3.7的环境 pip安装 keras已经安装 ...
- linux内核信号量
用户态的信号量: System V 信号量 Posix 信号量 信号量是用于保护临界区的一种常用方法.它的使用和自旋锁类似.相同的是,只有得到信号量的进程才能执行临界区代码:不同的是,当获取不到信号量 ...