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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
JavaScript中如何调用Java方法
Sep 16 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一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
js返回顶部实例分享
2016/12/21 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
javascript+css实现进度条效果
2020/03/25 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Python类的基础入门知识
2008/11/24 Python
github配置使用指南
2014/11/18 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python 多进程队列数据处理详解
2019/12/23 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
成语的广告词
2014/03/19 职场文书
责任心演讲稿
2014/05/14 职场文书
提拔干部考察材料
2014/05/26 职场文书
护理工作个人总结
2015/03/03 职场文书
建国大业电影观后感
2015/06/01 职场文书
我爱我班主题班会
2015/08/13 职场文书