这篇文章主要介绍“如何掌握JavaScript原型，有哪些基础知识”，有一些人在如何掌握JavaScript原型，有哪些基础知识的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

原型链图

原型必备知识

要了解原型就必须搞清三个属性：__proto__、prototype、 constructor。

1.__proto__、 constructor属性是对象所独有的；

2.prototype属性是函数独有的；

3.js中函数也是对象的一种，那么函数同样也有属性__proto__、 constructor；

原型五大规则：

1.所有引用类型（对象，数组，函数）都具有对象特性，即可以自由扩展属性

2.所有引用类型（对象，数组，函数）都具有一个__proto__（隐式原型）属性，是一个普通对象

3.所有的函数都具有prototype（显式原型）属性，也是一个普通对象

4.所有引用类型（对象，数组，函数）__proto__值指向它构造函数的prototype

5.当试图得到一个对象的属性时，如果变量本身没有这个属性，则会去他的__proto__中去找

prototype属性（显示原型）

首先创建一个构造函数

var Parent = function(){
}
//定义一个函数，那它只是一个普通的函数
var p1 = new Parent();
//通过关键字new，Parent成为构造函数
//创建了一个Parent构造函数的实例 p1

prototype是函数独有的属性，通过这个属性就能访问到原型；

prototype设计之初就是为了实现继承，让由特定函数创建的所有实例共享属性和方法，也可以说是让某一个构造函数实例化的所有对象可以找到公共的方法和属性。有了prototype我们不需要为每一个实例创建重复的属性方法，而是将属性方法创建在构造函数的原型对象上（prototype）。那些不需要共享的才创建在构造函数中。

Parent是构造函数，Parent.prototype就是原型

Parent.prototype上添加的属性和方法叫做原型属性和原型方法，该构造函数的实例都可以访问调用。

proto属性（隐式原型）

__proto__属性是对象（包括函数）独有的。

每个对象都有__proto__属性，该属性指向的就是该对象的原型对象。

p1.__proto__ === Parent.prototype; // true

__proto__通常称为隐式原型，prototype通常称为显式原型，可以说一个对象的隐式原型指向了该对象的构造函数的显式原型。那么在显式原型上定义的属性方法，通过隐式原型传递给了构造函数的实例。这样一来实例就能很容易的访问到构造函数原型上的方法和属性了。

Parent.prototype的隐式原型指向了对象原型

Parent.prototype.__proto__ === Object.prototype; //true

这里引出原型链的概念，当调用p1.toString()的时候，先在p1对象本身寻找，没有找到则通过p1.__proto__找到了原型对象Parent.prototype，也没有找到，又通过Parent.prototype.__proto__找到了上一层原型对象Object.prototype。在这一层找到了toString方法。返回该方法供p1使用。

当然如果找到Object.prototype上也没找到，就在Object.prototype.__proto__中寻找，但是Object.prototype.__proto__ === null所以就返回undefined。这就是为什么当访问对象中一个不存在的属性时，返回undefined了。

constructor属性

既然构造函数通过 prototype 来访问到原型，那么原型也应该能够通过某种途径访问到构造函数，这就是 constructor。

如前面的例子p1就是一个对象，那p1的构造函数就是Parent()。Parent的构造函数是Function()

p1.constructor => f Parent{}
Parent.construtor => f Function() { [native code] }
Function.constructor => ƒ Function() { [native code] }

Function是所有函数的根构造函数。

通过例子可以看到，p1的constructor属性指向了Parent，那么Parent就是p1的构造函数。同样Parent的constructor属性指向了Function，那么Function就是Parent的构造函数，然后又验证了Function就是根构造函数。

总结

上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"如何掌握JavaScript原型，有哪些基础知识"的内容，大家可以关注群英网络的其它相关文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript本地存储特性有哪些，怎么实现

  本文主要介绍了JavaScript本地存储实现用户名存储案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• vue中动态导入组件怎样实现的，原理是什么

  目录前言例子1. 模块加载2. jsonp动态加载script3. 执行异步脚本4. webpackJsonpCallback5. 执行异步模块代码流程图总结前言在vue中我们经常用到动态导入页面组件，那么它是如何实现的呢，本文将通过简单的案例，快速了解实现原理例子// index.jsimport(./test).t

• 如何掌握React Hook的用法，常用的有哪些

  这篇文章主要介绍了React Hook用法详解（6个常见hook）,本文通过实例代码给大家介绍了6个常见hook，需要的朋友可以参考下

• 怎样用chrome对页面的性能分析，步骤是怎样

  这篇文章主要介绍了利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化),本文给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• 用JS写简单的楼层效果的代码是什么

  这篇文章主要为大家详细介绍了JavaScript实现楼层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下