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

 更新时间:2016年08月11日 10:08:09   作者:码农何时  
hasOwnProperty()和isPrototypeOf()这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf(),下面给大家介绍这两个属性的方法和使用,一起看下吧

这两个属性都是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()属性实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 页面装载js及性能分析方法介绍

    页面装载js及性能分析方法介绍

    这篇文章主要介绍了页面装载js及性能分析方法,需要的朋友可以参考下
    2014-03-03
  • JS实现页面长时间不操作退出到登录页面的示例代码

    JS实现页面长时间不操作退出到登录页面的示例代码

    这篇文章主要介绍了JS实现页面长时间不操作退出到登录页面的示例代码,通过在head标签中引入jquey和页面长时间不操作的js页面,结合实例代码讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • 无阻塞加载脚本分析[全]

    无阻塞加载脚本分析[全]

    script标签的阻塞行为会对页面性能产生负面影响,大多数浏览器在下载或执行脚本的同时,会阻塞下载位于它之后的资源,也会阻塞渲染位于它之后的元素。
    2011-01-01
  • js实现经典贪吃蛇小游戏

    js实现经典贪吃蛇小游戏

    这篇文章主要为大家详细介绍了js实现经典贪吃蛇小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 在JS数组特定索引处指定位置插入元素

    在JS数组特定索引处指定位置插入元素

    最近我碰到了这样一个需求: 将一个元素插入到现有数组的特定索引处,下面是具体的实现,需要的朋友不要错过
    2014-07-07
  • javascript在事件监听方面的兼容性小结

    javascript在事件监听方面的兼容性小结

    javascript 在事件监听方面的兼容性总结,注意是由于多个浏览器的不一致,导致大家在js书写时需要考虑多个浏览器的兼容性。
    2010-04-04
  • Openlayers实现地图全屏显示

    Openlayers实现地图全屏显示

    这篇文章主要为大家详细介绍了Openlayers实现地图全屏显示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 操作按钮悬浮固定在微信小程序底部的实现代码

    操作按钮悬浮固定在微信小程序底部的实现代码

    在一些购物平台经常需要将商品加入购物车,像加入购物车按钮、结算按钮、收货列表添加地址按钮都是按钮悬浮底部的,怎么实现这样的功能呢?下面小编给大家带来了操作按钮悬浮固定在微信小程序底部的实现代码,一起看看吧
    2019-08-08
  • 基于JS实现的消消乐游戏的示例代码

    基于JS实现的消消乐游戏的示例代码

    这篇文章主要为大家介绍了如何利用JS实现消消乐小游戏,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • javascript document.referrer 用法

    javascript document.referrer 用法

    document对象的referrer属性,返回导航到当前网页的超链接所在网页的URL。
    2009-04-04

最新评论