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下过滤数组重复值的代码
Sep 10 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
JS中substring与substr的用法
Nov 16 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
js图片上传的封装代码
Aug 01 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
vue 父组件通过v-model接收子组件的值的代码
Oct 27 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框架Laravel的小技巧两则
2015/02/10 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue中轮训器的使用
2019/01/27 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
python实现杨氏矩阵查找
2019/03/02 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
公民授权委托书范本
2014/09/17 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
毕业横幅标语
2014/10/08 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript