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 相关文章推荐
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
JS+CSS实现动态时钟
Feb 19 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
解决vue同一slot在组件中渲染多次的问题
2018/09/06 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
python学生管理系统开发
2019/01/30 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
接受捐赠答谢词
2014/01/27 职场文书
个人租房协议书
2014/04/09 职场文书
工程负责人任命书
2014/06/06 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
大学生自我评价范文
2015/03/03 职场文书
小学国庆节活动总结
2015/03/23 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
出生证明范本
2015/06/15 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript
Python Pandas 删除列操作
2022/03/16 Python