博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[js高手之路]原型对象(prototype)与原型链相关属性与方法详解
阅读量:6494 次
发布时间:2019-06-24

本文共 4993 字,大约阅读时间需要 16 分钟。

一,instanceof:

instanceof检测左侧的__proto__原型链上,是否存在右侧的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 ); //true14         console.log( obj2 instanceof CreateObj ); //true15         console.log( obj1 instanceof Object ); //true16         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 ) ); //true4         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 ); //true4         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' ) ); //true13         console.log( obj2.age ); //22--->来自原型对象14         console.log( obj2.hasOwnProperty( 'age' ) ); //false15         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 ); //true11         var obj2 = new CreateObj('卫庄');12         console.log( 'age' in obj2 ); //true13         delete obj1.age;14         console.log( 'age' in obj1 ); //true15         console.log( 'user' in obj1 ); //false16         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' ) ); //false15         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,showUserName12         }13         console.log( Object.prototype );14         for( var key in Object.prototype ){15             console.log( key );//枚举不了, Object.prototype上的属性和方法默认不可枚举,枚举属性为false16         }

 

转载地址:http://jrkyo.baihongyu.com/

你可能感兴趣的文章
egit在pull的时候出错
查看>>
Zabbix 中使用 Percona Monitoring Plugins 监控 MySQL
查看>>
我的友情链接
查看>>
5.Struts2-Struts标签
查看>>
各种技术综合总结(一)
查看>>
Filter案例用户自动登录学习笔记
查看>>
阿里云内网和公共NTP服务器
查看>>
c++ 正则表达式邮箱
查看>>
C 提高1 内存四区 变量本质 栈开口方向 指针铁律1
查看>>
QT windows平台安装
查看>>
Outlook 2003 邮件不能显示图片
查看>>
1+1*2+1*2*3+1*2*3*n数列的求和算法
查看>>
异常模拟测试 -- 场景抽象及解决方案
查看>>
Gradle之旅-can not find tools.jar问题解决
查看>>
JavaScript_navigator
查看>>
apache配置文件详解
查看>>
linux下echo的使用总结
查看>>
EDM营销学堂:高效提升营销邮件点击率的技巧
查看>>
ORACLE 11G静默安装配置分解
查看>>
为什么大家不相信国产虚拟化技术?
查看>>