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 相关文章推荐
仿百度的关键词匹配搜索示例
Sep 25 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
Node.js文件操作详解
2014/08/16 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
JS回调函数深入理解
2019/10/16 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
python中函数传参详解
2016/07/03 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
如何写python的配置文件
2020/06/07 Python
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
软件测试面试题
2014/01/05 面试题
《北大荒的秋天》教学反思
2014/04/14 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
大学同学会活动方案
2014/08/20 职场文书
平安建设汇报材料
2014/12/29 职场文书
家装业务员岗位职责
2015/04/03 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server