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 相关文章推荐
js中iframe调用父页面的方法
Oct 30 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
js实现简易计算器小功能
Nov 18 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代码优化的53个细节
2014/03/03 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
常用js脚本
2006/12/03 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
js实现每日签到功能
2018/11/29 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
js实现轮播图特效
2020/05/28 Javascript
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
TensorFlow如何实现反向传播
2018/02/06 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python爬虫之自制英汉字典
2019/06/24 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
什么是python的id函数
2020/06/11 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
银行保安拾金不昧表扬稿
2015/05/05 职场文书
2015年管理人员工作总结
2015/05/13 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
初中生物教学反思
2016/02/20 职场文书