[js高手之路]原型对象(prototype)与原型链相关属性与方法详解

news/2025/5/30 3:10:11

一,instanceof:

instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章

[js高手之路]构造函数的基本特性与优缺点

[js高手之路]一步步图解javascript的原型(prototype)对象,原型链

已经分享过了.

1         function CreateObj(uName) {2             this.userName = uName;3             this.showUserName = function () {4                 return '100';5             }6         }7         CreateObj.prototype.showUserName = function () {8             return this.userName;9         }
10         var obj1 = new CreateObj('ghostwu');
11         var obj2 = new CreateObj('卫庄');
12 
13         console.log( obj1 instanceof CreateObj ); //true
14         console.log( obj2 instanceof CreateObj ); //true
15         console.log( obj1 instanceof Object ); //true
16         console.log( obj2 instanceof Object ); //true

二、isPrototypeOf:

如果隐式原型__proto__指向调用isPrototypeOf()方法的对象原型( CreateObj ), 那么这个方法就返回true,如:

1         var obj1 = new CreateObj('ghostwu');
2         var obj2 = new CreateObj('卫庄');
3         console.log( CreateObj.prototype.isPrototypeOf( obj1 ) ); //true
4         console.log( CreateObj.prototype.isPrototypeOf( obj2 ) ); //true 

因为obj1,obj2的隐式原型__proto__指向的都是CreateObj.prototype, 有朋友可能会问CreateObj.prototype上面根本就没有isPrototypeOf这个方法,怎么可以

调用呢?

是的,没错,但是CreateObj.prototype的隐式原型__proto__指向了Object.prototype, 而isPrototypeOf存在Object.prototype上,所以就能够调用

三、Object.getPrototypeOf

获取实例的隐式原型(__proto__)的指向,因为obj1,obj2的__proto__都指向CreateObj.prototype

1         var obj1 = new CreateObj('ghostwu');
2         var obj2 = new CreateObj('卫庄');
3         console.log( Object.getPrototypeOf( obj1 ) === CreateObj.prototype ); //true
4         console.log( Object.getPrototypeOf( obj2 ) === CreateObj.prototype ); //true

四,实例访问属性和方法时,遵循就近查找原则

实例先在自己身上查找,有,就停止查找,如果没有,就沿着实例的__proto__继续往上查找,有,就停止查找,如果没有就继续沿着原型链一直往上查找,如果

所有的原型对象上都没有,那就是undefined.

1         function CreateObj(uName) {2             this.userName = uName;3         }4         CreateObj.prototype.showUserName = function () {5             return this.userName;6         }7         CreateObj.prototype.age = 22;8 9         var obj1 = new CreateObj('ghostwu');
10         obj1.age = 20;
11         var obj2 = new CreateObj('卫庄');
12 
13         console.log( obj1.age ); //20--->来自实例
14         console.log( obj2.age ); //22--->来自原型对象
15 
16         delete obj1.age;
17         console.log( obj1.age ); //22--->来自原型

五,hasOwnProperty

判断属性是实例上的还是原型对象上的,如果是实例上的,返回true, 原型上的返回false

1         function CreateObj(uName) {2             this.userName = uName;3         }4         CreateObj.prototype.showUserName = function () {5             return this.userName;6         }7         CreateObj.prototype.age = 22;8         var obj1 = new CreateObj('ghostwu');9         obj1.age = 20;
10         var obj2 = new CreateObj('卫庄');
11         console.log( obj1.age ); //20--->来自实例
12         console.log( obj1.hasOwnProperty( 'age' ) ); //true
13         console.log( obj2.age ); //22--->来自原型对象
14         console.log( obj2.hasOwnProperty( 'age' ) ); //false
15         delete obj1.age;
16         console.log( obj1.age ); //22--->来自原型
17         console.log( obj1.hasOwnProperty( 'age' ) ); //false

六、in操作符

判断属性是否在实例或者原型对象上,只要一个满足条件,返回值都是true

1         function CreateObj(uName) {2             this.userName = uName;3         }4         CreateObj.prototype.showUserName = function () {5             return this.userName;6         }7         CreateObj.prototype.age = 22;8         var obj1 = new CreateObj('ghostwu');9         obj1.age = 20;
10         console.log( 'age' in obj1 ); //true
11         var obj2 = new CreateObj('卫庄');
12         console.log( 'age' in obj2 ); //true
13         delete obj1.age;
14         console.log( 'age' in obj1 ); //true
15         console.log( 'user' in obj1 ); //false
16         console.log( 'user' in obj2 ); //false

七,结合in和hasOwnProperty的用法,可以封装一个函数判断这个属性是否在原型对象上, 返回值为true:在原型对象上, false:不在原型对象上

1         function CreateObj(uName) {2             this.userName = uName;3         }4         CreateObj.prototype.showUserName = function () {5             return this.userName;6         }7         CreateObj.prototype.age = 20;8         function hasPrototypeProperty( obj, name ){9             return !obj.hasOwnProperty( name ) && ( name in obj );
10         }
11         var obj1 = new CreateObj('ghostwu');
12         var obj2 = new CreateObj('卫庄');
13         obj1.age = 10;
14         console.log( hasPrototypeProperty( obj1, 'age' ) ); //false
15         console.log( hasPrototypeProperty( obj2, 'age' ) ); //true

八、for...in 可以枚举实例和原型对象上的属性和方法,前提是:该属性和方法是可以枚举的

1          function CreateObj(uName) {2             this.userName = uName;3         }4         CreateObj.prototype.showUserName = function () {5             return this.userName;6         }7         CreateObj.prototype.age = 20;8         var obj = new CreateObj( 'ghostwu' );9 
10         for( var key in obj ){
11             console.log( key ); //userName,age,showUserName
12         }
13         console.log( Object.prototype );
14         for( var key in Object.prototype ){
15             console.log( key );//枚举不了, Object.prototype上的属性和方法默认不可枚举,枚举属性为false
16         }
文章来源:https://blog.csdn.net/weixin_34115824/article/details/88986236
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://dhexx.cn/news/show-2448243.html

相关文章

伸缩性、可用性、稳定性(Scalability, Availability Stability Patterns)

一 自我有要求的读者应该提出问题:(研习:掌握层次:)能力级别:不会(了解)——领会(理解)——熟练——精(why)——通(融汇贯…

ThinkPHP5.0.16 执行流程分析图

总是用框架而很少看底层,光看又不太明白,所以趁有时间,自己大致画了一下,很多地方并没有往下画,画的可能也有出入主要是给自己看的,各位大佬能用用,不能用拉到如果在这边图片看不清,…

上下居中css

.css{ position: relative, top: 50%, transform: translateY(-50%)}

CentOS 7.2安装Zabbix 3.2全攻略

CentOS 7.2安装Zabbix 3.2教程详解CentOS 7.2安装Zabbix 3.2全攻略放在最前面:鉴于网上爬虫猖獗,博客被盗时有发生,这里需要来个链接,大家请认准来自博客园的Scoter:http://www.cnblogs.com/scoter2008 http://www.cn…

asp.net mvc中生成验证码

生成验证码的代码还是一致这里只是说返回到view层的代码创建actionresult方法&#xff0c;返回一个FileContentResult类型的结果&#xff0c;然后图片连接就像普通url连接一样比如<img src"/AA/GetValidateCode/code">public ActionResult GetValidateCode(str…

通过Homestead安装Laravel

自己安装了一篇&#xff0c;第一次接触&#xff0c;确实比较繁琐。记性越来越不好了&#xff0c;为了防止重复造轮子&#xff0c;再次记录过程。 1.环境介绍 操作系统&#xff1a;macOS Sierra 工具&#xff1a;&#xff08;1&#xff09;VirtualBox 5.2.10&#xff08;2&#…

eclipse Oxygen 4.7 + pydev

pydev 官网 安装手册 PyDev requires Java 8 and Eclipse 4.6 (Neon) in order to run and only supports Python 2.6 onwards. I.e.: Python (2.6 or newer)Jython (2.6 or newer)IronPython (2.6 or newer) - excluding 2.7.6 and 2.7.7, which have a bug which makes the…

fatal: unable to auto-detect email address (got ‘tim@newton.(none)‘)的解决方法

fatal: unable to auto-detect email address (got timnewton.(none))的解决方法参考文章&#xff1a; &#xff08;1&#xff09;fatal: unable to auto-detect email address (got timnewton.(none))的解决方法 &#xff08;2&#xff09;https://www.cnblogs.com/Terrypyt…

[EntLib]微软企业库5.0 学习之路——第八步、使用Configuration Setting模块等多种方式分类管理企业库配置信息...

在介绍完企业库几个常用模块后&#xff0c;我今天要对企业库的配置文件进行处理&#xff0c;缘由是我打开web.config想进行一些配置的时候发现web.config已经变的异常的臃肿&#xff08;大量的企业库配置信息充斥其中&#xff09;&#xff0c;所以决定写这篇关于Configuration …

Web Hacking 101 中文版 五、HTML 注入

五、HTML 注入 作者&#xff1a;Peter Yaworski 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 描述 超文本标记语言&#xff08;HTML&#xff09;注入有时也被称为虚拟污染。 这实际上是一个由站点造成的攻击&#xff0c;该站点允许恶意用户向其 Web 页面注入 HTML&a…