JS中的prototype、__proto__与constructor

简介: JS中的prototype、__proto__与constructor

13.png

简单实例

// 定义一个函数
function Foo(name) {
    this.name = name
}

// 调用函数 这个函数返回 undefined
var foo = Foo('Tom')
console.log(foo); // undefined


// 调用构造方法
console.log(Foo); // [Function: Foo]
console.log(Foo.__proto__); // [Function]
console.log(Foo.constructor); // [Function: Function]

console.log(Foo.prototype); // Foo {}
console.log(Foo.prototype.__proto__); // {}
console.log(Foo.prototype.constructor); // [Function: Foo]

console.log(Foo.prototype.constructor === Foo); // true

// 相当于 Foo.prototype.constructor('Tom') 返回this
foo = new Foo('Tom')
console.log(foo); // Foo { name: 'Tom' }
console.log(foo.__proto__); // Foo {}
console.log(foo.prototype); // undefined
console.log(foo.constructor); // [Function: Foo]


var foo1 = new Foo.prototype.constructor('Tom')
console.log(foo1); // Foo { name: 'Tom' }

var foo2 = new Foo('Tom')
console.log(foo2); // Foo { name: 'Tom' }

console.log(foo1 == foo2); // false

console.log(foo1.__proto__); // Foo {}
console.log(foo1.prototype); // undefined
console.log(foo1.constructor); // [Function: Foo]

console.log(foo2.__proto__); // Foo {}
console.log(foo2.prototype); // undefined
console.log(foo2.constructor); // [Function: Foo]

总结

属性

归属

作用

指向

顶端

__proto__

对象所独有

对象属性的查找路径

对象->对象

原型链顶端null

constructor

对象所独有

构造函数

对象->函数

Function

prototype

函数所独有

所有实例共享的属性和方法

函数->对象

-

图片来源和文章参考

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

            </div>
目录
相关文章
【C#】【报错解决】找不到请求的Net Framework Data ProVider。可能没有安装。
【C#】【报错解决】找不到请求的Net Framework Data ProVider。可能没有安装。
1282 0
【C#】【报错解决】找不到请求的Net Framework Data ProVider。可能没有安装。
|
存储 监控 安全
TG7100CWiFi&BLE双模芯片 一键连接AIoT平台让你快速自定义智能方案
面对市面上眼花缭乱的双模芯片,许多应用方案商往往挑花了眼,不知道该选择哪款。今天我们推荐是天猫精灵联合平头哥推出的TG7100CWiFi&BLE双模芯片。它具有低功耗、宽工作温度等特点,广泛适用于智能家居,电工照明等领域。
TG7100CWiFi&BLE双模芯片 一键连接AIoT平台让你快速自定义智能方案
|
存储 边缘计算 人工智能
探索边缘计算:定义、优势、挑战及未来趋势
探索边缘计算:定义、优势、挑战及未来趋势
|
存储 数据采集 数据可视化
千字干货带你入门数据仓库,跑通数据建模全流程(附视频)
个推资深大数据研发工程师为大家深入浅出地介绍了数据仓库的前世今生以及数据建模的常用方法。
856 0
千字干货带你入门数据仓库,跑通数据建模全流程(附视频)
|
机器学习/深度学习 数据采集 Dart
【DSW Gallery】 XGBoost:如何使用XGBoost解决回归问题
XGBoost作为机器学习领域的一款经典的Boosting算法,深受学界和工业界的推崇。其中很重要的一点就是它具有优秀的鲁棒性,并且在工程实现上面进行了大量的优化,在模型的复杂度和性能之间取得了很好的平衡。
【DSW Gallery】 XGBoost:如何使用XGBoost解决回归问题
|
传感器 数据采集 物联网
参赛作品04:基于LORA多数据节点的局部农业信息监测系统
“智物智造杯-2022物联网创新应用大赛”投票开始啦!
1119 1
|
存储 传感器 算法
3D激光SLAM:ALOAM中KITTI数据集处理--转换成ROS可用数据
KITTI数据集由德国卡尔斯鲁厄理工学院和丰田美国技术研究院联合创办,是目前国际上最大的自动驾驶场景下的计算机视觉算法评测数据集。该数据集用于评测立体图像(stereo),光流(optical flow),视觉测距(visual odometry),3D物体检测(object detection)和3D跟踪(tracking)等计算机视觉技术在车载环境下的性能。KITTI包含市区、乡村和高速公路等场景采集的真实图像数据,每张图像中最多达15辆车和30个行人,还有各种程度的遮挡与截断。
3D激光SLAM:ALOAM中KITTI数据集处理--转换成ROS可用数据
|
机器学习/深度学习 自然语言处理 BI
ICLR2022顶会论文分享-PoNet:使用多粒度Pooling结构替代attention的网络
近年来,在机器学习领域Transformer模型已成为最先进的(SOTA) 序列建模模型,包括在自然语言处理 (NLP)、计算机视觉、语音处理、基因组数据等都有着广泛的应用。
1345 0
ICLR2022顶会论文分享-PoNet:使用多粒度Pooling结构替代attention的网络
|
XML 数据可视化 IDE
小记基于xstate实现携程金服业务流程动态化
小记基于xstate实现携程金服业务流程动态化
773 0
小记基于xstate实现携程金服业务流程动态化
|
Python
Python编程:URL网址链接中的中文编码与解码
Python编程:URL网址链接中的中文编码与解码
552 0