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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 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切割页面div内容的实现代码分享
2012/07/31 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
Python计算一个文件里字数的方法
2015/06/15 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
python去除文件中重复的行实例
2018/06/29 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
明信片寄语大全
2014/04/08 职场文书
学习演讲稿范文
2014/05/10 职场文书
市场调查策划方案
2014/06/10 职场文书
现实表现材料范文
2014/12/23 职场文书
长城导游词
2015/01/30 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
Django rest framework如何自定义用户表
2021/06/09 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis