JS中的hasOwnProperty()和isPrototypeOf()属性实例详解


Posted in Javascript onAugust 11, 2016

这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf()

先讲解hasOwnProperty()方法和使用。在讲解isPropertyOf()方法和使用

看懂这些至少要懂原型链

一、Object.prototype.hasOwnProperty()

概述

hasOwnProperty()方法用来判断某个对象是否含有指定的自身属性

语法

obj.hasOwnProperty("属性名");//实例obj是否包含有圆括号中的属性,是则返回true,否则是false

描述

所有继承了Object.prototype的对象都会从原型链上继承到hasOwnProperty方法,这个方法检测一个对象是否包含一个特定的属性,和in不同,这个方法会忽略那些从原型链上继承的属性。

实例

1.使用hasOwnProperty()方法判断某对象是否含有特定的自身属性

下面的例子检测了对象 o 是否含有自身属性 prop:

var o =new Object();
o.prop="exists";
function change(){
o.newprop=o.prop;
delete o.prop;
}
o.hasOwnProperty("prop")//true
change()//删除o的prop属性
o.hasOwnProperty("prop")//false
//删除后在使用hasOwnProperty()来判断是否存在,返回已不存在了

2.自身属性和继承属性的区别

下面的列子演示了hasOwnProperty()方法对待自身属性和继承属性的区别。

var o =new Object();
o.prop="exists";
o.hasOwnProperty("prop");//true 自身的属性
o.hasOwnProperty("toString");//false 继承自Object原型上的方法
o.hasOwnProperty("hasOwnProperty");//false 继承自Object原型上的方法

3.修改原型链后hasOwnProperty()的指向例子

下面的列子演示了hasOwnProperty()方法对待修改原型链后继承属性的区别

var o={name:'jim'};
function Person(){
this.age=19;
}
Person.prototype=o;//修改Person的原型指向
p.hasOwnProperty("name");//false 无法判断继承的name属性
p.hasOwnProperty("age");//true;

4.使用hasOwnProperty()遍历一个对象自身的属性

下面的列子演示了如何在遍历一个对象忽略掉继承属性,而得到自身属性。

注意· forin 会遍历出对象继承中的可枚举属性

var o={
gender:'男'
}
function Person(){
this.name="张三";
this.age=19;
}
Person.prototype=o;
var p =new Person();
for(var k in p){
if(p.hasOwnProperty(k)){
console.log("自身属性:"+k);// name ,age
}else{
console.log("继承别处的属性:"+k);// gender
}
}

5.hasOwnProperty方法有可能会被覆盖

如果一个对象上拥有自己的hasOwnProperty()方法,则原型链上的hasOwnProperty()的方法会被覆盖掉

var o={
gender:'男',
hasOwnProperty:function(){
return false;
}
}
o.hasOwnProperty("gender");//不关写什么都会返回false
//解决方式,利用call方法
({}).hasOwnProperty.call(o,'gender');//true
Object.prototype.hasOwnProperty.call(o,'gender');//true

二、Object.prototype.isPrototypeOf()

概述

isPrototypeOf()方法测试一个对象是否存在另一个对象的原型链上

语法

//object1是不是Object2的原型,也就是说Object2是Object1的原型,,是则返回true,否则false
object1.isPrototypeOf(Object2);

描述

isPrototypeOf()方法允许你检查一个对像是否存在另一个对象的原型链上

实例

1.利用isPrototypeOf()检查一个对象是否存在另一个对象的原型上

var o={};
function Person(){};
var p1 =new Person();//继承自原来的原型,但是现在已经无法访问
Person.prototype=o;
var p2 =new Person();//继承自o
console.log(o.isPrototypeOf(p1));//false o是不是p1的原型
console.log(o.isPrototypeof(p2));//true o是不是p2的原型

2.利用isPropertyOf()检查一个对象是否存在一另一个对象的原型链上

var o={};
function Person(){};
var p1 =new Person();//继承自原来的原型,但是现在已经无法访问
Person.prototype=o;
var p2 =new Person();//继承自o
console.log(o.isPrototypeOf(p1));//false o是不是p1的原型
console.log(o.isPrototypeof(p2));//true o是不是p2的原型
console.log(Object.prototype.isPrototypeOf(p1));//true
console.log(Object.prototype.isPrototypeOf(p2));//true

p1的原型链结构是p1=>原来的Person.prototype=>Object.prototype=>null

p2的原型链结构是p2=> o =>Object.prototype=>null

p1和p2都拥有Object.prototype所以他们都在Object.Prototype的原型链上

三、总结

1.hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。

2.isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中,是则返回true,否则返回false。

以上所述是小编给大家介绍的JS中的hasOwnProperty()和isPrototypeOf()属性实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
javascript Object与Function使用
Jan 11 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 #Javascript
浅谈js中对象的使用
Aug 11 #Javascript
js倒计时简单实现代码
Aug 11 #Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 #Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 #Javascript
使用BootStrap实现用户登录界面UI
Aug 10 #Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 #Javascript
You might like
php session应用实例 登录验证
2009/03/16 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
Python脚本实现格式化css文件
2015/04/08 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
德国电子商城:ComputerUniverse
2017/04/21 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
软件项目开发计划书
2014/05/01 职场文书
本科毕业生自荐信
2014/06/02 职场文书
学习礼仪心得体会
2014/09/01 职场文书
毕业横幅标语
2014/10/08 职场文书
宣传委员竞选稿
2015/11/19 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python