彻底搞懂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属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关 ...
随机推荐
- CentOS7 服务器连接超时自动断开问题解决
背景 现在的客户们都开始使用云服务器了,还要通过堡垒机才给访问权限,这种方式访问方式以前都是银行的"专利",不过也间接说明其他行业的信息化也越来越普及了.今天主要是因为分配给我的这 ...
- C# DataTable和List转换操作类
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...
- 箭头函数的arguments不可用
ES5中的arguments function func(a,b,c){ console.log(arguments[0],arguments[1],arguments[2]) } func(1,2, ...
- (九)SpringBoot之使用jsp
一.概念 jsp应该尽量避免使用,原因如下: jsp只能打包为:war格式,不支持jar格式,只能在标准的容器里面跑(tomcat,jetty都可以) 内嵌的Jetty目前不支持JSPs Undert ...
- 基于Docker的Kafka部署
一 准备 1.1 安装docker-dompose #部署 sudo curl -L "https://github.com/docker/compose/releases/download ...
- ASP.NET Core 3.0 入门
原文:ASP.NET Core 3.0 入门 课程简介 与2.x相比发生的一些变化,项目结构.Blazor.SignalR.gRPC等 课程预计结构 ASP.NET Core 3.0项目架构简介 AS ...
- C#的@标志的使用情况—本篇blog采用Markdown编写
@(C# 参考--出自官方文档入口) 1.使 C# 关键字用作标识符. @ 字符可作为代码元素的前缀,编译器将把此代码元素解释为标识符而非 C# 关键字. 下面的示例使用 @ 字符定义其在 for 循 ...
- 十六进制转换十进制(JAVA版)
解题思路路大概为:现将十六进制数转换为二进制数,再讲二进制数转换为八进制数.在进行十六进制转换为八进制时可以利用JAVA中的‘&’运算符号,一个十六进制数可以表示为四个二进制数,利用‘& ...
- 使用nodejs连接mysql数据库实现增删改查
首先要有数据库 使用xampp 或者 phpstudy 可以傻瓜式安装 新建一个项目文件夹 之后在这个目录下初始化package.json (npm init) 先在项目中安装mysql 和 ex ...
- js写guess网页
(一)布局 猜前 -> 猜后 (二)明确实现功能和具体实现: 1.网页生 ...