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 相关文章推荐
[JS源码]超长文章自动分页(客户端版)
Jan 09 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
微信小程序实现图片上传
May 23 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
原生JavaScript实现刮刮乐
Sep 29 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
收藏的一个php小偷的核心程序
2007/04/09 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
canvas绘制多边形
2017/02/24 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
2021/02/25 Vue.js
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
python regex库实例用法总结
2021/01/03 Python
搞笑获奖感言
2014/01/30 职场文书
我的梦想演讲稿
2014/04/30 职场文书
工业设计专业自荐书
2014/06/05 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
计算机实训报告总结
2014/11/05 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
《迟到》教学反思
2016/02/24 职场文书
详解Laravel制作API接口
2021/05/31 PHP
Redis基本数据类型Set常用操作命令
2022/06/01 Redis