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系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
JavaScript动态生成表格的示例
Nov 02 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 无限级缓存的类的扩展
2009/03/16 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
session 加入redis的实现代码
2016/07/15 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
js判断undefined变量类型使用typeof
2013/06/03 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
python list元素为tuple时的排序方法
2018/04/18 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
金融系毕业生自荐书
2014/07/08 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
行政复议决定书
2015/06/24 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Mysql 设置boolean类型的操作
2021/06/04 MySQL
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python