这篇文章主要介绍“如何掌握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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue中watch调用方法报错找不到的情况怎么解决

  这篇文章主要介绍了解决Vue watch里调用方法的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• jQuery禁止div的方法有哪些

  jquery禁止div的方法：1、使用JQuery的off()方法禁用div；2、使用JQuery结合CSS的“pointer-events: none;”实现禁用div即可。

• vue中路由自动导入的方式是什么？

  vue中路由自动导入的方式是什么？vue中导入路由是很基础的操作，本文给大家分享的是vue中路由自动导入的方法，下文还有示例供大家参考，感兴趣的朋友就继续往下看吧。

• 前端状态管理的Redux怎么理解，状态管理的目的是什么

  这篇文章主要介绍了前端的状态管理，续上篇文章内容，今天将从 Redux 入手逐渐拓展,需要的小伙伴可以参考一下哟

• React中的Context定义和目的是什么，怎么应用

  这篇文章主要介绍了React中的Context应用场景分析,Context 提供了一种在组件之间共享数据的方式，而不必显式地通过组件树的逐层传递 props，通过实例代码给大家介绍使用步骤，感兴趣的朋友跟随小编一起看看吧