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 相关文章推荐
jquery提示 "object expected"的解决方法
Dec 13 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
JavaScript获取时区实现过程解析
Sep 24 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
咖啡语言
2021/03/03 咖啡文化
php daodb插入、更新与删除数据
2009/03/19 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
微信小程序如何获取手机验证码
2018/11/04 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
python实现删除文件与目录的方法
2014/11/10 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
企业文化宣传标语
2014/06/09 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
素质拓展训练感想
2015/08/07 职场文书
关于做家务的心得体会
2016/01/23 职场文书