详谈js使用in和hasOwnProperty获取对象属性的区别

 更新时间:2017年04月25日 09:32:31   投稿:jingxian  
下面小编就为大家带来一篇详谈js使用in和hasOwnProperty获取对象属性的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

in判断的是对象的所有属性,包括对象实例及其原型的属性;

而hasOwnProperty则是判断对象实例的是否具有某个属性。

示例代码:

<script type="text/javascript">
  function Person(){
    }
    Person.prototype.name = "allen";

    var person = new Person();
    console.log(person.hasOwnProperty("name")); //false
    console.log("name" in person); //true
    console.log(person.name); //"allen"

    person.name = "justforse";
    console.log(person.hasOwnProperty("name")); //true
    console.log("name" in person); //true
    console.log(person.name); //"justforuse"

    delete person.name;
    console.log(person.hasOwnProperty("name")); //false
    console.log("name" in person); //true
    console.log(person.name); //"allen"
</script>

以上代码执行的时候,name属性要么是从实例中获取的,要么是来源于原型,所以使用in 来访问 name属性始终返回true;而hasOwnProperty()只在属性存在与对象实例中时才返回true,当删除了实例中的name属性后,就恢复了原型中name属性的连接,所以返回allen。

以上这篇详谈js使用in和hasOwnProperty获取对象属性的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js+springMVC 提交数组数据到后台的实例

    js+springMVC 提交数组数据到后台的实例

    今天小编就为大家分享一篇js+springMVC 提交数组数据到后台的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现动态创建的元素绑定事件

    js实现动态创建的元素绑定事件

    下面小编就为大家带来一篇js实现动态创建的元素绑定事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 微信小程序12行js代码自己写个滑块功能(推荐)

    微信小程序12行js代码自己写个滑块功能(推荐)

    这篇文章主要介绍了微信小程序12行js代码自己写个滑块功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • js实现京东秒杀倒计时功能

    js实现京东秒杀倒计时功能

    这篇文章主要为大家详细介绍了js实现京东秒杀倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • ES6 解构赋值的原理及运用

    ES6 解构赋值的原理及运用

    ES6允许按照一定模式从数组或对象中提取值,然后对变量进行赋值,称为解构。只要等号两边的模式相同,左边的变量就会被赋予对应的值,这种写法属于“模式匹配”。统称起来就叫做“解构赋值”。
    2021-05-05
  • BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

    BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

    这篇文章主要介绍了BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题的解决方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • 使用ESLint禁止项目导入特定模块的方法步骤

    使用ESLint禁止项目导入特定模块的方法步骤

    这篇文章主要介绍了使用ESLint禁止项目导入特定模块的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • js实现无缝轮播图插件封装

    js实现无缝轮播图插件封装

    这篇文章主要为大家详细介绍了js实现无缝轮播图插件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JavaScript修改浏览器tab标题小技巧

    JavaScript修改浏览器tab标题小技巧

    这篇文章主要介绍了JavaScript修改浏览器tab标题小技巧,需要的朋友可以参考下
    2015-01-01
  • JavaScript判断是否手机浏览器的五种方法

    JavaScript判断是否手机浏览器的五种方法

    现在手机网站已经很普及了,有时候前端网页需要判断,用户使用的是手机浏览器还是电脑浏览器。这篇文章整理了JavaScript判断是否手机浏览器的五种方法,通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
    2022-11-11

最新评论