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拓展String方法小结
Jul 08 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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 中文处理技巧
2010/04/25 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python实现Flappy Bird源码
2018/12/24 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
销售总监工作职责
2013/11/21 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
销售团队获奖感言
2014/08/14 职场文书
生日宴会家属答谢词
2015/09/29 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
MySQL创建管理KEY分区
2022/04/13 MySQL