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 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
redux处理异步action解决方案
Mar 22 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
JavaScript使用canvas绘制坐标和线
Apr 28 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
原生js实现随机点名
2020/07/05 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python contextlib模块使用示例
2015/02/18 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python语言元素知识点详解
2019/05/15 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
社区母亲节活动记录
2014/03/06 职场文书
2015年见习期工作总结
2014/12/12 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书