JavaScript中in和hasOwnProperty区别详解


Posted in Javascript onAugust 04, 2017

 每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性,则返回该属性的值;如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性,则返回该属性的值。

虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果在实例中添加一个与原型中属性同名的属性,则该属性会屏蔽原型中的那个属性。添加的同名属性只会阻止我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为null,也只会在实例中设置这个属性,而不会恢复其指向原型的链接。

in操作符只要通过对象能访问到属性就返回true。hasOwnProperty()只在属性存在于实例中时才返回true。

使用delete操作符则可以完全删除实例属性,从而让我们能巩固重新访问原型中的属性。

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
  alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name"));//false
alert("name" in person1);//true
person1.name = "Greg";
alert(person1.name);//"Greg"
alert(person1.hasOwnProperty("name"));//true
alert("name" in person1);//true
delete person1.name;
alert(person1.name);//"Nicholas"
alert(person1.hasOwnProperty("name"));//false
alert("name" in person1);//true

prototype

1.每个函数都有一个 prototype 的对象属性,对象内有一个 constructor 属性,默认指向函数本身

2.每个对象都有一个 __proto__ 的属性,属相指向其父类型的 prototype

构造函数和普通函数并没有区别,使用 new 关键字调用就是构造函数,使用构造函数可以 实例化 一个对象

函数的返回值有两种可能

1.显式调用 return 返回 return 后表达式的求值

2.没有调用 return 返回 undefined

function People(name, age) {
 this.name = name;
 this.age = age;
}
var people = new People('Byron', 26);

构造函数返回值

1.没有返回值
2.简单数据类型
3.对象类型

前两种情况构造函数返回构造对象的实例,实例化对象正是利用的这个特性

第三种构造函数和普通函数表现一致,返回 return 后表达式的结果

总结

以上所述是小编给大家介绍的JavaScript中in和hasOwnProperty区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
javascript处理table表格的代码
Dec 06 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
js实现tab切换效果
Feb 16 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 #Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 #Javascript
Angular实现响应式表单
Aug 04 #Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 #Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 #jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 #Javascript
js模拟百度模糊搜索的实例
Aug 04 #Javascript
You might like
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
js实现简单音乐播放器
2020/06/30 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
pytorch的batch normalize使用详解
2020/01/15 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
军训 自我鉴定
2014/02/03 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
校园安全主题班会
2015/08/12 职场文书
优质护理服务心得体会
2016/01/22 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python