JavaScript中proto与prototype的关系

justjavac 发布于2019-08-26 10:13 / 1205人阅读

摘要：了解中原型以及原型链只需要记住以下点即可对象都有属性，指向构造函数的构造函数函数都有属性，指向构造函数的原型对象的内置构造函数可知所有的构造函数都继承于甚至包括根构造器及自身。

了解JavaScript中原型以及原型链只需要记住以下2点即可

对象都有__proto__属性，指向构造函数的prototype

构造函数函数都有prototype属性，指向构造函数的原型

1、对象的__proto__

内置构造函数

Number.__proto__ === Function.prototype  // true
Boolean.__proto__ === Function.prototype // true
String.__proto__ === Function.prototype  // true
Object.__proto__ === Function.prototype  // true
Function.__proto__ === Function.prototype // true
Array.__proto__ === Function.prototype   // true
RegExp.__proto__ === Function.prototype  // true
Error.__proto__ === Function.prototype   // true
Date.__proto__ === Function.prototype    // true

可知所有的构造函数都继承于Function.prototype , 甚至包括根构造器Object及Function自身。所有构造器都继承了Function.prototype的属性及方法，如length、call、apply、bind等。

既然所有的构造器都来自于Function.prototype, 那么Function.prototype 是什么呢？

Object.prototype.toString.call(Function.prototype)

"[object Function]"

Function.prototype();
 //undefined

Function.prototype 是函数，是不是很意外!!!

既然 Function.prototype 是函数，那么它就是 Function 的实例，然而并不是这样的!!!

Function.prototype.__proto__ === Function.prototype // false

Function.prototype.__proto__ === Object.prototype // true

如何理解 Function.prototype 不是 Function 实例的怪异行为呢？解决怪异行为的根本方法是让它显得不那么怪异，看下面代码。

Object.prototype.toString.call(Number.prototype)
"[object Number]"

Number.prototype.__proto__ === Number.prototype // false
Number.prototype.__proto__ === Object.prototype // true

Object.prototype.toString.call(String.prototype)
"[object String]"

String.prototype.__proto__ === String.prototype // false
String.prototype.__proto__ === Object.prototype // true

Object.prototype.toString.call(Array.prototype)
"[object Array]"

Number.prototype.__proto__ === Array.prototype // false
Number.prototype.__proto__ === Object.prototype // true

简单理解：内置构造函数的数据类型是对应的构造函数，但不是其对应构造函数的实例，而是Object的实例。

2、函数的prototype

构造函数函数都有prototype属性，指向构造函数函数的原型，原型有constructor属性，指向构造函数函数

构造函数

Number.prototype.constructor === Number
// true

Function.prototype.constructor === Function
//true

Object.prototype.constructor === Object
true

普通函数

function wang(){};

wang.prototype.constructor === wang

//true

关系图

GPU云服务器云服务器 asp中_的转义符 javascript__ajax _javascript php中__call

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105793.html

讲清楚之 javascript原形

摘要：构造函数和实例都通过属性指向了原形。代码示例是构造函数的实例的属性与的属性保存的值相等，即他们指向同一个对象原形。讲清楚之javascript原型标签： javascript javascript 中原形是一个比较难于理解的概念。javascript 权威指南在原形这一章也花了大量的篇幅进行介绍，也许你已经读过javascript 权威指南，或者已经是读第N篇了，然而这篇文章的目...

高胜山 2019-08-22 17:29 评论0 收藏0
深入学习js之——原型和原型链

摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。开篇：在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

FingerLiu 2019-08-23 15:25 评论0 收藏0
深入学习js之——原型和原型链

摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。开篇：在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

xialong 2019-08-23 15:04 评论0 收藏0
JavaScript原型与原型链

摘要：每个原型对象都有一个属性指向关联的构造函数为了验证这一说话，举个例子。本文共 1475 字，读完只需 6 分钟一、概述在 JavaScript 中，是一种面向对象的程序设计语言，但是 JS 本身是没有类的概念，JS 是靠原型和原型链实现对象属性的继承。在理解原型前，需要先知道对象的构造函数是什么，构造函数都有什么特点？ 1. 构造函数 // 构造函数 Person() ...

liaosilzu2007 2019-08-23 12:24 评论0 收藏0