分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

对JS prototype的理解

发布时间:2023-09-06 01:46责任编辑:蔡小小关键词:暂无标签

1.什么是prototype?

function F() {}f1 = new F();
f2 = new F();

以上的代码,F()是一个构造函数,f1和f2是由这个构造函数产生的对象。

prototype是构造函数的一个属性,它的值就是由这个构造函数构造出来的对象的原型对象。(换句话来说,prototype既是构造函数的属性,也是由这个构造函数构造出来的对象的原型对象)

原型对象的属性和方法都会被“继承”,换句话来说,F.prototype的属性和方法都会被f1和f2“继承”。

2.什么是__proto__?它与prototype有什么区别?

__proto__是某个对象的属性,它指向这个对象的原型对象。从上面的例子分析,f1.__proto__和f2.__proto__就等同于F.prototype。

但是,我们一般不会直接访问__proto__这个属性,而是采用以下的方法去访问:

Object.getPrototypeOf(f1)Object.getPrototypeOf(f2)

先用一张图总结一下上面的东西吧:

3.原型链

每个对象都有自己的原型对象,那一层层地,就形成了原型链。原型链的最上端,就是Object.prototype(注意这里的Object是一个构造函数啊),它没有原型对象(为null)。原型链后面的对象,能够使用前面的属性和方法(假如没有覆盖掉的话)。因此,有着相同原型对象的两个对象,就可以使用与原型对象相同的方法和属性了,这也是使用prototype的好处了。

4.constructor

prototype对象有一个constructor属性,F.prototype.constructor的值就是F本身。用文字描述,一个函数对象的原型对象的constructor属性指向这个函数本身。

利用这一点,我们可以进行判断一个对象是否由某个构造函数产生的。(利用这个例子来理解constructor属性吧)

function A(){};var a = new A();console.log(a.constructor===A) //true

分析一下以上的代码,a原本是没有constructor这个属性的,但是它的原型对象有,所以它“继承”了下来,自己也能使用这个属性。即a.constructor,其实也等于a.__proto__.constructor和A.prototype.constructor,而A.prototype.constructor的值,就是A,因此返回true了。

关于constructor的作用还有很多,这里不详述了。

5.总结

这篇文章只是谈谈我对prototype这东西的理解,供日后回看,因此写得很不详尽。更为详细的分析,包括它的作用,更多的分析,请看下面的网页:

http://www.jb51.net/article/91826.htm

假如不理解prototype和__proto__,下面的网页会更好地帮助理解:

http://blog.csdn.net/ligang2585116/article/details/53522741

对JS prototype的理解

原文地址:https://www.cnblogs.com/fengziwei/p/8595300.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved