一篇彻底理解JS中的prototype、__proto__与constructor
1.基本类型不是对象(boolean、undefined、number、string)
2.引用类型都是对象(Array,function ,Object)
3.对象是通过函数创建,并且强调,对象字面量也是通过函数创建,举例说明,ES6继承的语法糖
4.函数有的是显式原型prototype
5.对象有的是隐式原型__proto__ 和构造器 constructor
6.但是由于JS中函数也是一种对象,所以函数也拥有__proto__和constructor
7.__proto__ 属性,它是对象所独有的,可以看到__proto__属性都是由一个对象指向一个对象.
它的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(可以理解为父对象)里找,如果父对象也不存在这个属性,则继续往父对象的__proto__属性所指向的那个对象(可以理解为爷爷对象)里找,如果还没找到,则继续往上找…直到原型链顶端null(可以理解为原始人。。。),再往上找就相当于在null上取值,会报错(可以理解为,再往上就已经不是“人”的范畴了,找不到了,到此结束。
8.prototype属性,它是函数所独有的,它是从一个函数指向一个对象。它的含义是函数的原型对象,也就是这个函数(其实所有函数都可以作为构造函数)所创建的实例的原型对象,它的作用就是包含可以由特定类型的所有实例共享的属性和方法,也就是让该函数所实例化的对象们都可以找到公用的属性和方法。任何函数在创建的时候,其实会默认同时创建该函数的prototype对象。
8.constructor属性也是对象才拥有的,它是从一个对象指向一个函数,含义就是指向该对象的构造函数,每个对象都有构造函数(本身拥有或继承而来,继承而来的要结合__proto__属性查看会更清楚点
举栗:
class Person {
constructor(name) {
this.name = name;
}
}
var xiaoming = new Person('张三');
console.log(xiaoming); 输出结果:
Person {name: "张三"}
name: "张三"
__proto__: Object __proto__就是由xiaoming(实例对象)指向Person 对象。 举栗:
console.log(xiaoming.__proto__); 输出结果:
{constructor: ƒ}
constructor: ƒ Person(name)
arguments: (...)
caller: (...)
length: 1
name: "Person"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: index.vue?0dbc:133
[[Scopes]]: Scopes[3]
__proto__: Object
里面的构造器指向的是Person里面的构造函数,因为是函数,所以有prototype(显式原型) 举栗:
console.log(xiaoming.__proto__.__proto__); 输出的是:
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
寻找构造函数的原型,因为函数也是一个引用类型,所以构造函数指向Object对象 举栗:
console.log(xiaoming.__proto__.__proto__.__proto__); 已无隐式原型,内存地址指向空对象指针,输出null
一篇彻底理解JS中的prototype、__proto__与constructor的更多相关文章
- 深入理解JavaScript原型:prototype,__proto__和constructor
JavaScript语言的原型是前端开发者必须掌握的要点之一,但在使用原型时往往只关注了语法,其深层的原理并未理解透彻.本文结合笔者开发工作中遇到的问题详细讲解JavaScript原型的几个关键概念, ...
- 实践一些js中的prototype, __proto__, constructor
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- JS中对于prototype的理解
JS中的prototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个 ...
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍
这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...
- JS中的prototype (转载)
JS中的prototype JS中的phototype是JS中比较难理解的一个部分 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是 ...
- JS中的prototype、__proto__与constructor属性
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- JS中的prototype、__proto__与constructor(图解)
作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...
- 深入理解JS中的对象(二):new 的工作原理
目录 序言 不同返回值的构造函数 深入 new 调用函数原理 总结 参考 1.序言 在 深入理解JS中的对象(一):原型.原型链和构造函数 中,我们分析了JS中是否一切皆对象以及对象的原型.原型链和构 ...
随机推荐
- 卡特兰数 洛谷P1641 [SCOI2010]生成字符串
卡特兰数 参考博客 介绍 卡特兰数为组合数学中的一种特殊数列,用于解决一类特殊问题 设\(f(n)\)为卡特兰数的第n项 其通项公式为 \[f(n)=\frac{2n\choose n}{n+1} \ ...
- 使用Selenium爬取京东电商数据(以手机商品为例)
进入京东(https://www.jd.com)后,我如果搜索特定的手机产品,如oppo find x2,会先出现如下的商品列表页: 如果点击进入其中一个商品会进入到如下图所示的商品详情页,可以看到用 ...
- Mockserver之Moco框架搭建使用
客户要求进行完整的产品展示,人员和时间都有限,来不及开发后端服务... 工期比较紧的项目,前端已开发完成,需要调试,后端接口还未开发完成... 公司某个项目依赖于第三方服务,但是第三方服务不方便频繁调 ...
- 僵尸进程与SIGCHLD信号
什么是僵尸进程? 首先内核会释放终止进程(调用了exit系统调用)所使用的所有存储区,关闭所有打开的文件等,但内核为每一个终止子进程保存了一定量的信息.这些信息至少包括进程ID,进程的终止状态,以及该 ...
- BlockingQueue中 take、offer、put、add的一些比较
(转自:https://blog.csdn.net/wei_ya_wen/article/details/19344939 侵删) 在java多线程操作中, BlockingQueue<E> ...
- 【鸿蒙开发板试用报告】用OLED板实现FlappyBird小游戏(上)
总是做各种Demo,是时候做个什么小应用来练练手了.踌躇了很久,果然还是搞个小游戏才有意思.想到几年前风靡全球的FlappyBird,一个屏幕一个按钮就足够了,正好适合.OLED屏幕.按键的驱动已经有 ...
- php include文件包含
XCTF题目:Web_php_include <?php show_source(__FILE__);//高亮显示源文件 echo $_GET['hello']; $page=$_GET['pa ...
- 使用大乌龟git和码云搭建版本库
刚刚过完清明,上班的第一天,大佬跟我说,要用码云和git搭建一个版本库,菜鸡的博主楞了半天,然后赶紧上网找资料,此时,一旁的大佬已经看不下去了,终于,出手了....... 1. 首先,先把大乌龟git ...
- 去年去阿里面试,被问到java 多线程,我是这样手撕面试官的
1.多线程的基本概念 1.1进程与线程 程序:是为完成特定任务,用某种语言编写的一组指令的集合,即一段静态代码,静态对象. 进程:是程序的一次执行过程,或是正在运行的一个程序,是一个动态的过程,每个程 ...
- Xrepo:一个现代化的跨平台 C/C++ 包管理器
xrepo 是一个基于 Xmake 的跨平台 C/C++ 包管理器. 项目源码 官方文档 它基于 xmake 提供的运行时,但却是一个完整独立的包管理程序,相比 vcpkg/homebrew 此类包管 ...