JavaScript中in和hasOwnProperty区别详解

下面是针对这个主题的详细讲解:

JavaScript中in和hasOwnProperty区别详解

what is in

in 关键字可以用于判断一个对象是否具有某个属性,或者一个数组中是否包含某个元素。其用法如下:

propertyNameOrIndex in objectOrArray

这里propertyNameOrIndex代表要查找的属性名或者数组中的索引位置,objectOrArray代表要查找的对象或者数组。

判断对象是否具有某个属性:

const obj = { name: 'Tom', age: 18 };
console.log('name' in obj); // true
console.log('email' in obj); // false

判断数组中是否包含某个元素:

const arr = [1, 2, 3];
console.log(0 in arr); // true
console.log(4 in arr); // false

what is hasOwnProperty

hasOwnProperty 方法是 JavaScript 中的一个实例方法,它返回一个布尔值,表示一个对象是否具有指定的属性。其用法如下:

obj.hasOwnProperty(propertyName)

这里obj代表要判断的对象,propertyName代表要查找的属性名。

判断对象是否具有某个属性:

const obj = { name: 'Tom', age: 18 };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('email')); // false

需要注意的是,hasOwnProperty 只能检测对象本身的属性,无法检测从原型继承的属性。

差异

它们的区别在于hasOwnProperty 可以检测对象本身的属性,无法检测从原型继承的属性,而 in 关键字可以检测对象本身的属性和从原型继承的属性。

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
}

Person.prototype.sayAge = function() {
  console.log(this.age);
};

const tom = new Person('Tom');
tom.age = 18;

console.log(tom.hasOwnProperty('name')); // true
console.log(tom.hasOwnProperty('age')); // true
console.log('name' in tom); // true
console.log('age' in tom); // true
console.log(tom.hasOwnProperty('sayAge')); // false
console.log('sayAge' in tom); // true

由上例可以看到,tom 既有自己的属性,也从原型继承了方法,但是 hasOwnProperty 只能检测到 tom 自己的属性,无法检测到从原型继承的方法,而 in 关键字既能检测到自身的属性,也能检测到从原型继承的方法。

总结

  • in 主要用于检测对象本身以及从原型继承的属性和元素。
  • hasOwnProperty 只检测对象本身的属性和元素,无法检测从原型继承的属性和元素。

希望这篇文章能够帮助你清晰地理解 JavaScript 中的 inhasOwnProperty

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript中in和hasOwnProperty区别详解 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript中实现sprintf、printf函数

    在JavaScript中,有时候需要格式化字符串输出,针对此需求,可以使用sprintf、printf函数来实现。 sprintf函数的实现 sprintf函数的作用是将指定的格式化字符串输出到一个字符串中。JavaScript中没有原生实现sprintf函数的方法,但是可以通过自定义实现函数来达到此目的。 下面是一个使用sprintf函数实现字符串格式化输…

    JavaScript 2023年5月27日
    00
  • JavaScript实现数组对象去重的多种方法

    下面我来为大家详细讲解“JavaScript实现数组对象去重的多种方法”。 一、背景介绍 在前端开发中,我们经常需要对数组进行去重操作,以减少某些操作的时间复杂度。在JavaScript中,实现数组对象去重的方法有很多,也存在各自的优缺点。下面我将为大家介绍一些常用的去重方法以及其优缺点。 二、方法一:利用Set(ES6) 由于ES6出现了Set数据类型,所…

    JavaScript 2023年5月27日
    00
  • 基于JS实现弹性漂浮广告的示例代码

    下面是基于JS实现弹性漂浮广告的完整攻略: 思路 使用position: fixed实现元素的固定位置,定义元素距离浏览器顶部的距离。 在需要使用该广告的页面中添加JS文件或script代码段。 通过JS代码,利用setInterval来实现广告元素的动态滚动。 通过监听窗口大小的变化,实现响应式布局,调整广告元素的位置和大小。 代码实现 CSS 定义广告元…

    JavaScript 2023年6月11日
    00
  • JavaScript中require和import的区别详解

    JavaScript中require和import的区别详解 在JavaScript中,有两种方法用于引入外部模块:require和import。这两种方法虽然都能实现模块的引入,但是在用法和功能上存在一些区别,接下来我们将分别讲解它们并提供示例。 require require是CommonJS中使用的一种加载机制,使用较为简单,用于引入基于node.js…

    JavaScript 2023年6月10日
    00
  • 微信小程序开发之表单验证WxValidate使用

    微信小程序开发之表单验证WxValidate使用 在微信小程序中,我们经常会遇到需要表单验证的情况,如注册、登录、提交订单等功能,此时,可以使用一个名为WxValidate的表单验证插件来方便地解决这个问题。 WxValidate的安装及引用 下载WxValidate插件并解压,将插件中的WxValidate.js文件拷贝到小程序项目的utils目录下。 在…

    JavaScript 2023年6月10日
    00
  • javascript实现的HashMap类代码

    JavaScript实现的HashMap类代码 HashMap是一种非常常用的数据结构,用于提高键值对查找的效率。JavaScript作为一门弱类型语言,没有原生的HashMap,但我们可以用Object对象来实现一个简单的HashMap类。 实现细节 使用Object对象存储键值对,遍历时需要注意使用hasOwnProperty方法判断是否为对象本身的属性…

    JavaScript 2023年6月11日
    00
  • js实现倒计时器自定义时间和暂停

    倒计时器是一个非常常见的功能,可以用于定时关闭某些功能,在活动中用于倒计时提醒等场景。本文将介绍如何使用JavaScript实现倒计时器自定义时间和暂停的功能。 实现自定义时间 首先,我们需要先实现一个基本版的倒计时器,代码如下: // 设置倒计时时间(秒) var countDownTime = 60; // 获取倒计时元素 var countDown =…

    JavaScript 2023年5月27日
    00
  • JavaScript创建、读取和删除cookie

    创建、读取、删除cookie是前端JavaScript开发中常见的任务。下面,我将分别详细讲解这三个任务的步骤。 创建cookie 创建cookie的步骤如下: 使用document.cookie属性设置cookie的键值对。 设置cookie的可选参数(如过期时间、路径、域名等)。 下面是一个设置名为”username”,值为”john”的cookie: …

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部