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 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
js电话号码验证方法
Sep 28 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
理解JS事件循环
Jan 07 Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 Javascript
Angular2库初探
Mar 01 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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 无限分类 树形数据格式化代码
2016/10/11 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python版微信红包分配算法
2015/05/04 Python
Python实现简单的四则运算计算器
2016/11/02 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python代码区分大小写吗
2020/06/17 Python
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
关于旷工的检讨书
2014/02/02 职场文书
大跃进口号
2014/06/16 职场文书
团日活动总结怎么写
2014/06/25 职场文书
房屋转让协议书
2014/10/18 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL