广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js中hasOwnProperty的属性及实例用法详解
  • 860
分享到

js中hasOwnProperty的属性及实例用法详解

2024-04-02 19:04:59 860人浏览 泡泡鱼
摘要

1、js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果。 2、当检查对象上某个属性

1、js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果。

2、当检查对象上某个属性是否存在时,hasOwnProperty 是唯一可用的方法。

实例


var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be draGons'
};
foo.hasOwnProperty('bar'); // 总是返回 false
// 使用其它对象的 hasOwnProperty,并将其上下文设置为foo
({}).hasOwnProperty.call(foo, 'bar'); // true

知识点扩展:

判断自身属性是否存在


var o = new Object();
o.prop = 'exists';

function changeO() {
 o.newprop = o.prop;
 delete o.prop;
}

o.hasOwnProperty('prop'); // true
changeO();
o.hasOwnProperty('prop'); // false

判断自身属性与继承属性


function foo() {
 this.name = 'foo'
 this.sayHi = function () {
  console.log('Say Hi')
 }
}

foo.prototype.sayGoodBy = function () {
 console.log('Say Good By')
}

let myPro = new foo()

console.log(myPro.name) // foo
console.log(myPro.hasOwnProperty('name')) // true
console.log(myPro.hasOwnProperty('toString')) // false
console.log(myPro.hasOwnProperty('hasOwnProperty')) // fasle
console.log(myPro.hasOwnProperty('sayHi')) // true
console.log(myPro.hasOwnProperty('sayGoodBy')) // false
console.log('sayGoodBy' in myPro) // true

遍历一个对象的所有自身属性

在看开源项目的过程中,经常会看到类似如下的源码。for...in循环对象的所有枚举属性,然后再使用hasOwnProperty()方法来忽略继承属性。


var buz = {
  fog: 'stack'
};

for (var name in buz) {
  if (buz.hasOwnProperty(name)) {
    alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
  }
  else {
    alert(name); // toString or something else
  }
}

注意 hasOwnProperty 作为属性名

javascript 并没有保护 hasOwnProperty 属性名,因此,可能存在于一个包含此属性名的对象,有必要使用一个可扩展的hasOwnProperty方法来获取正确的结果:


var foo = {
  hasOwnProperty: function() {
    return false;
  },
  bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // 始终返回 false

// 如果担心这种情况,可以直接使用原型链上真正的 hasOwnProperty 方法
// 使用另一个对象的`hasOwnProperty` 并且call
({}).hasOwnProperty.call(foo, 'bar'); // true

// 也可以使用 Object 原型上的 hasOwnProperty 属性
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

到此这篇关于js中hasOwnProperty的属性及实例用法详解的文章就介绍到这了,更多相关js中hasOwnProperty的属性用法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: js中hasOwnProperty的属性及实例用法详解

本文链接: https://www.lsjlt.com/news/156112.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js中hasOwnProperty的属性及实例用法详解
    1、js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果。 2、当检查对象上某个属性...
    99+
    2022-11-12
  • 怎么使用js中hasOwnProperty的属性
    本篇内容主要讲解“怎么使用js中hasOwnProperty的属性”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用js中hasOwnProperty的属性”吧!js不会保护hasOwnPr...
    99+
    2023-06-25
  • js中Map和Set的用法及区别实例详解
    目录首先了解一下 Map再来了解一下 Set总结Map和Set的区别结语:首先了解一下 Map Map 是一组键值对的结构,和 JSON 对象类似。 (1) Map数据结构如下 这里...
    99+
    2022-11-13
  • js中Object.create实例用法详解
    1、用Object.create()方法创建新对象,并使用现有对象提供新对象的proto。 2、提供两个参数,第一个是新创建的原型对象,第二个是为新创建的对象添加属性的对象。 实例 ...
    99+
    2022-11-12
  • JS中fetch()用法实例详解
    目录了解fetch没有fetch时我们获取异步资源的方式:使用fetch后我们获取异步资源的方式fetch的语法fetch的Response对象1.同步属性2.判断请求是否成功发出3...
    99+
    2022-11-13
  • Vueextends属性的用法示例详解
    目录引言App.vueSon.vueHelloWorld.vue小结引言 最近在看抖音——《小山与 bug》,看到一个很神奇的 Vue 继承组件的方法,后来...
    99+
    2022-11-13
  • JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解
    isPrototypeOf 作用:检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中 var p = {x:1};//定义一个原型对象 var o =...
    99+
    2022-11-13
  • ajax在js中和jQuery中的用法实例详解
    目录原生 JS 怎么发送一个 get 请求怎么发送一个 post 请求发送一个带有参数的 get 请求发送一个带有参数的 post 请求jQuery $.get 几个参数,怎么使用$...
    99+
    2022-11-12
  • js数组forEach实例用法详解
    1、forEach()类似于map(),它还将每个元素依次作用于传入函数,但不会返回新的数组。 2、forEach()常用于遍历数组,用于调用数组的每一个元素,并将其传递给回调函数。...
    99+
    2022-11-12
  • Vue的方法和属性案例详解
    vue的方法和属性 1.方法 methods 用法1 methods:{ 方法名:function(){}, } 用法2 methods:{ 方法名(){} } 注意 {{}...
    99+
    2022-11-12
  • jQuery中DOM属性使用实例详解上篇
    目录DOM属性(上).addClass().removeClass().toggleClass().hasClass()DOM属性(上) .addClass() 为每个匹配的元素添加...
    99+
    2022-11-13
  • jQuery中DOM属性使用实例详解下篇
    目录DOM属性(下).html().val().attr().removeAttr()DOM属性(下) .html() 获取集合中第一个匹配元素的HTML内容 在一个 HTML 文档...
    99+
    2022-11-13
  • 详解javascript中offsetleft属性的用法
    offsetLeft属性是JavaScript中DOM元素的一个属性,用于获取一个元素相对于其父元素的水平偏移量。具体用法如下:1....
    99+
    2023-08-17
    javascript
  • Rust中的derive属性示例详解
    目录1. Rust中的derive是什么?2. derive的出现解决了什么问题?3. derive如何使用?4. 有哪些常用的derive属性?1. Rust中的derive是什么...
    99+
    2023-05-16
    Rust中derive属性 Rust derive属性
  • JS中如何使用选择器及属性、方法
    这篇文章将为大家详细讲解有关JS中如何使用选择器及属性、方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。选择器、属性及方法调用的配合使用:<style> &...
    99+
    2022-10-19
  • Vue.js实现watch属性的示例详解
    目录1.写在前面2.watch的实现原理3.立即执行的watch与回调执行时机立即执行的回调函数回调函数的执行时机4.过期的副作用函数和cleanup5.写在最后1.写在前面 在上篇...
    99+
    2022-11-13
  • Python Pycurl的属性与方法案例详解
    Pycurl包是一个libcurl的Python接口,由C语言编写的,功能强大,速度快。由于pycurl的属性和方法太多了,写这篇博文记录一下pycurl的属性和方法。 正常安装 p...
    99+
    2022-11-12
  • Android中persistent属性用法详解
    本文实例讲述了Android中persistent属性用法。分享给大家供大家参考,具体如下: 前段时间在研究telephony时,一直没有在framework下发现对telep...
    99+
    2022-06-06
    Android
  • CSS中的cursor属性实例用法
    本篇内容介绍了“CSS中的cursor属性实例用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、开篇之...
    99+
    2022-10-19
  • python tqdm用法及实例详解
    1、说明 tqdm是一个方便且易于扩展的Python进度条,可以在python执行长循环时在命令行界面实时地显示一个进度提示信息,包括执行进度、处理速度等信息,且可在一定程度上进行定制。 2、使用pip来安装tqdm...
    99+
    2022-06-02
    python tqdm
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作