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图片预加载技术(详细演示)
Mar 12 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
JavaScript 中的六种循环方法
Jan 06 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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 cookie使用方法学习笔记分享
2013/11/07 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
Android面试题附答案
2014/12/08 面试题
介绍一下gcc特性
2015/10/31 面试题
校园新闻广播稿5篇
2014/10/10 职场文书
青岛导游词
2015/02/12 职场文书
2015年推普周活动方案
2015/05/06 职场文书
工作时间证明
2015/06/15 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
创业计划书之面包店
2019/09/12 职场文书
golang中的struct操作
2021/11/11 Golang