javascript --- js中prototype、__proto__、[[Propto]]、constructor的关系

首先看下面一行代码:

function Person(name){this.name = name;
}
var person1 = new Person;
console.log(person1.__proto__ === Person.prototype);
console.log(person1.constructor === Person);

控制台打印如下:
在这里插入图片描述

可以看见,当使用构造函数(Person)构造一个实例(person1)时,
在后台其实生成了2种关系,

第一种是:person1的 __proto__ 属性指向构造函数的原型(Person.prototype)
第二种是:实例(person1)的constructor属性指向该函数(Person).其原理如下:
---> 第一种关系: person1.__proto__ === Person.prototype
一个构造函数通过new生成一个实例person1时,实际上有一个内部属性 [[Prototype ]],它指向对象的原型(即:Person.prototype).
[[Prototype]](内部)属性的读取(2种):
1.可以通过Object.getPrototypeOf()方法读取,这种方法比较长...
2.第二种方法是基于,JavaScript引擎在所有对象上都支持一个名为_proto_的属性.通过它,可以直接读写[[Prototype]]属性.(写法比较方便)---> 第二种关系: person1.constructor === Person
1.当一个函数(这里指构造函数Person)被创建时,它的prototype属性也被创建,且该原型对象的constructor属性(Person.prototype.constructor)指向该函数
Person,即Person.prototype.constructor === Person,
2.当在实例person1种寻找constructor属性时,未找到,于是根据[[Prototype]]的指针(即:__proto__)属性,寻找其原型对象(Person.prototype)中的constructor属性,进而找到Person,最终有person1.construcoter === Person// 注意:虽然person1.constructer === Person , Person.prototype.constructor === Person, 但person1 !== Person.prototype,
// 因为person1中是通过[[Prototype]] "指针"指向Person.prototype的!!!

在知道了上面2种关系后,下面在看一个例子:

function P(name) {this.name = name;
}
P.prototype = {sayName: function () {console.log(this.name);}
};var p1 = new P();
console.log(p1 instanceof Person);
console.log(p1.constructor === Person);
console.log(p1.constructor === Object);

在这里插入图片描述

---> 对于第一行的true
1.a instanceof A是指,a是A的实例 
2.因为var p1 = New P() , 明显是对的---> 对于第二行的false, 第3三行true
1.使用P.prototype进行字面量赋值时,实际上是对P的原型进行了重写,而上面例子未对(P.prototype)重写后的construcoter属性
进行说明
2.JavaScript默认其为一个泛用对象Object,因此其constructor属性指向了Object.

倘若我们在对P.prototype进行字面量赋值的同时,加上constructor属性,使其指向P,见下例:

function P(name){this.name = name;
}
P.prototype = {constructor: P,sayName:  function() {console.log(this.name);}
}
var p1 =new  P("marron");console.log(p1 instanceof P) ;
console.log(p1.constructor === P);

在这里插入图片描述
可以看见,p1.constructor指向了函数P.即可以通过实例的constructor函数找到函数P…

参考《JavaScript面向对象精要》第4章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端知识点整理收集(不定时更新~)

知识点都是搜集各种大佬们的,如有冒犯,请告知! 目录 原型链 New关键字的执行过程 ES6——class constructor方法 类的实例对象 不存在变量提升 super 关键字 ES6——...(展开/收集)运算符 面向对象的理解 关…

重学《JavaScript 高级程序设计》笔记 第6章对象

第6章 面向对象的程序设计 ECMAScript中没有类的概念; 1.创建对象-历史 1.1 创建实例,添加方法和属性 → 对象字面量 缺点: 使用同一接口创建很多对象,产生大量重复代码 var person new Object() person.name "Y" pe…

javascrip --- 构造函数的继承

两点需要注意的. 第一是在构造函数声明时,会同时创建一个该构造函数的原型对象,而该原型对象是继承自Object的原型对象 // 声明一个构造函数Rectengle function Rectangle(length, width) {this.length length;this.width width; }// 即:看见function 后面函数名是大写,一般…

javascript --- 使用语法糖class定义函数

本文讨论的是通过class声明的函数,有什么特点,或者说是指向了哪里. class A() {} // A是一个类// 要看class声明的函数指向哪里,只需将其[[Prototype]]属性打印到控制台,下面看看A和它的原型对象的指向 // 注:[[Prototype]]属性通过__proto__访问 console.log(A.__proto__…

前端知识点整理收集(不定时更新~)二

目录 require() 加载文件机制 线程和进程 线程 单线程 Nodejs的线程与进程 网络模型 初识 TCP 协议 三次握手 I/O I/O 先修知识 阻塞与非阻塞 I/O 同步与异步 I/O Git 基础命令 分支操作 修改远程仓库地址 远程分支获取最新的版本到本地 拉取远程仓库指定分支…

SpringBoot零基础入门指南--搭建Springboot然后能够在浏览器返回数据

File->new Project 修改默认包名,根据自己的喜好修改 选择初始化需要导入的包,尽量不要一开始就导入很多,特别是数据库,不然启动可能会有问题,创建好的目录如下: 配置文件写在application.properties下&…

JavaScript算法相关

1. 排序 1.1.冒泡排序 每一轮比较&#xff0c;从左至右交换相邻&#xff0c;每轮结束&#xff0c;最后一个为最大下一轮&#xff0c;需要比较的个数 - 1 j < len - i (范围动态缩小)共 len - 1 轮比较 function bubbleSort(arr) {var len arr.length;for (var i 1; i &…

数据结构基础知识

排序 参考&#xff1a;https://www.bilibili.com/video/av38482633/?spm_id_fromtrigger_reload 目录 排序 插入排序 直接插入排序 折半排序 希尔排序 ​ 交换排序 冒泡排序 快速排序 选择排序 堆排序 流量单位计算 什么是计数排序 复杂度分析&#xff1a; 什…

linux中安装软件,查看、卸载已安装软件方法

各种主流Linux发行版都采用了某种形式的包管理系统&#xff08;PMS&#xff09;来控制软件和库的安装。 软件包存储在服务器上&#xff0c;可以利用本地Linux系统上的PMS工具通过互联网访问。这些服务器称为仓库。 由于Linux发行版众多,目前还没有统一的PMS标准工具。 这里分别…

html5 --- 使用javascript脚本控制媒体播放

H5中的标签(<audio…/> 和 <video…/>)对于JS中的HTMLAudioElement对象和HTMLVideoElement对象 对象有以下几个方法: play(): 播放 pause(): 暂停播放 load(): 重新装载音频、视频 canPlayType(type): 判断该元素可播放type类型的音频、视频 下面是一个简单的音乐…

css3 --- 使用媒体查询进行响应式布局

css3引入media,可以根据设备特性进行不同的布局, 本文展示的是根据不同屏幕的宽度进行不同的布局,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title> 针…

node项目正常启动后不能访问(防火墙未放行端口)

今天打开个人站点&#xff0c;发现登陆不了&#xff0c;原以为是pm2的问题&#xff0c;先停了pm2用node app.js的方式运行后端代码&#xff0c;项目能正常启动但是依然不能登陆。 1 检查ecs的安全组规则&#xff0c;node项目端口3000、8888是否放行 2 确认node正常运行 输入…

前端知识点整理(三)不定时更新~

目录 一、移动端跨平台开发方案 Hybrid App React Native Weex Flutter PWA &#xff08;Progressive Web App&#xff09; 小程序 Cordova html5 组件和模块的区别 组件化 模块化 前端代码规范 前端工程化理解 网站性能监测与优化策略 1.网络传输性能优化 页…

前端试题(一)

2020-03-28 金卡智能 *1. 脚手架 vue-cli现在用的什么版本&#xff0c;2版本了解多少&#xff0c;2 3有什么区别 绝对路径与相对路径 ./ 当前路径 …/父路径 / 绝对路径 某文件里引用其他路径下的资源&#xff1a; 判断该文件所在文件夹与其他资源路径间的关系。 什么&#…

html5 --- 利用localStorage进行本地存储

首先做一个提交到本地存储的表单及一个用来显示本地localStorage信息的表格…代码如下: <h2> 本地存储用 </h2>标题: <input id"title" name"title" type"text" size"60" style"margin-left:32px;margin-bottom:…

前端试题(二)

1. 数组方法、reduce()的第二个参数 reduce() MDN文档 accumulator 累计器currentValue 当前值currentIndex 当前索引array 数组 在没有初始值的空数组上调用 reduce 将报错&#xff08;如果有initialValue不报错&#xff09;。回调函数第一次执行时&#xff0c;accumulator…

项目中遇到问题的解决方法合集

以下内容主要是为了方便记录自己在工作中遇到的项目问题搜寻到的解决方法&#xff0c;肯定方法不唯一&#xff0c;这里只是给出解决了我的问题的方法&#xff0c;大家走过路过随便瞧瞧较好啦嘻嘻 1、使用vue/cli 4.x 创建vue项目时使用iconfont 图标无法显示——前者版本问题 …

html5 --- IDBDatabase创建对象存储和索引

代码如下: <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title> CRUD操作 </title><style type"text/css">table{width: 830px;border: 1px …

2019大疆PC软件开发笔试——开关和灯泡两个电路板

题目描述: 小A是一名DIY爱好者&#xff0c;经常制作一些有趣的东西。 今天&#xff0c;小A突然想要来做这样一个东西。小A现在有两块同样大小为nm&#xff0c;有nm块大小为11小电路板拼成的矩形电路板&#xff0c;假设叫做电路板A和电路板B。电路板A上每个小电路板都是一个开关…