JavaScript中in和hasOwnProperty区别详解

 更新时间:2017年08月04日 09:33:37   作者:飘零枫叶  
in操作符只要通过对象能访问到属性就返回true。hasOwnProperty()只在属性存在于实例中时才返回true。下面通过本文给大家分享JavaScript中in和hasOwnProperty区别详解,感兴趣的朋友一起看看吧

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

虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值。如果在实例中添加一个与原型中属性同名的属性,则该属性会屏蔽原型中的那个属性。添加的同名属性只会阻止我们访问原型中的那个属性,但不会修改那个属性。即使将这个属性设置为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区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 原生JS实现各种运动之复合运动

    原生JS实现各种运动之复合运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js实现的简练高效拖拽功能示例

    js实现的简练高效拖拽功能示例

    这篇文章主要介绍了js实现的简练高效拖拽功能,通过对js鼠标事件的扩展实现拖拽效果,非常简单实用,需要的朋友可以参考下
    2016-12-12
  • 点击按钮弹出模态框的一系列操作代码实例

    点击按钮弹出模态框的一系列操作代码实例

    这篇文章主要介绍了js弹出模态框方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • js实现滚动条滚动到某个位置便自动定位某个tr

    js实现滚动条滚动到某个位置便自动定位某个tr

    这篇文章主要介绍了js实现滚动条滚动到某个位置便自动定位某个tr的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 前端实现全局主题切换功能实例代码

    前端实现全局主题切换功能实例代码

    这篇文章主要介绍了如何使用ReactHook和Context实现全局主题切换的功能,通过创建一个Context对象和一个ThemeProvider组件,可以将当前主题存储在Context中,并提供一个切换主题的方法,文中给出了详细的代码示例,需要的朋友可以参考下
    2025-03-03
  • DeviceOne 让你一见钟情的App快速开发平台

    DeviceOne 让你一见钟情的App快速开发平台

    DeviceOne是一个非常先进的App开发平台,使用Javascript 构建原生体验的移动应用程序,DeviceOne主要关注外观和体验,以及和你的应用程序的 UI 交互
    2016-02-02
  • 微信小程序中的数据存储实现方式

    微信小程序中的数据存储实现方式

    这篇文章主要介绍了微信小程序中的数据存储实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-08-08
  • 微信小程序开发之圆形菜单 仿建行圆形菜单实例

    微信小程序开发之圆形菜单 仿建行圆形菜单实例

    本篇文章主要介绍了微信小程序开发之圆形菜单 仿建行圆形菜单实例,具有一定的参考价值,有需要的可以了解一下。
    2016-12-12
  • Chrome调试折腾记之JS断点调试技巧

    Chrome调试折腾记之JS断点调试技巧

    这篇文章主要介绍了Chrome调试折腾记之JS断点调试技巧,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JavaScript版本迷局介绍

    JavaScript版本迷局介绍

    有人说喜欢一个人,没必要了解她的过去,然而想读懂一个人,却需要了解她的过去。
    2011-01-01

最新评论