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在for循环中绑定事件解决事件参数不同的情况

    JavaScript 在 for 循环中绑定事件时,通常会遇到事件参数不同的情况,这种情况下,如果不加以处理,则会导致事件回调出错或者引起内存泄漏等问题。解决该问题的方法是通过使用闭包和立即执行函数表达式,来给事件参数绑定上恰当的值。下面是具体的攻略: 1. 通过立即执行函数表达式给事件参数绑定上值 通过立即执行函数表达式可以在每次迭代时创建一个新的作用域,…

    JavaScript 2023年6月10日
    00
  • ajax和jsonp跨域的原理本质详解

    针对“Ajax和JSONP跨域的原理本质”这一话题,我准备了以下的完整攻略。 一、同源策略 同源策略,是一种安全策略,它限制了一个源(域名、协议、端口)下的文档或脚本如何能与另一个源(域名、协议、端口)下的资源进行交互。 二、JSONP 跨域 JSONP是一种跨域的技术手段,发起JSONP请求时,服务器端返回指定格式的数据,并在响应中将需要返回的数据作为参数…

    JavaScript 2023年6月11日
    00
  • vue3获取当前路由地址的两种方法

    下面是具体的攻略: Vue3获取当前路由地址的两种方法 在Vue3中,我们可以使用两种方法来获取当前路由地址,分别是使用$route对象和使用useRoute函数。下面我们将介绍这两种方法,以及如何使用它们来获取当前路由地址。 使用$route对象获取当前路由地址 在Vue3中,我们可以使用$route对象来获取当前路由地址。$route对象是Vue Rou…

    JavaScript 2023年6月11日
    00
  • JavaScript中的数学运算介绍

    下面是“JavaScript中的数学运算介绍”的完整攻略: JavaScript中的数学运算介绍 在 JavaScript 中,我们可以进行任意的数学运算,例如加法、减法、乘法、除法等等。下面就来一一介绍这些运算。 加法 在 JavaScript 中,加法运算使用加号(+)进行表示。 let a = 3; let b = 4; let c = a + b; …

    JavaScript 2023年5月18日
    00
  • JavaScript 判断iPhone X Series机型的方法

    下面是详细讲解”JavaScript 判断iPhone X Series机型的方法” 的完整攻略。 前言 首先,我们需要了解一下 iPhone X Series 机型的特点,它们比一般的 iPhone 机型拥有更高的设备屏幕分辨率,并且它们的设备宽高比(device aspect ratio)都是 1125:2436。 判断方法 为了判断一个设备是否为 iP…

    JavaScript 2023年6月11日
    00
  • 基于Bootstrap 3 JQuery及RegExp的表单验证功能

    针对“基于Bootstrap 3 JQuery及RegExp的表单验证功能”的完整攻略,下面我们分步骤进行讲解。 1. 引入依赖 首先,我们需要在网页中引入所需的相关依赖,包括Bootstrap 3、JQuery和RegExp,可以通过CDN或者本地文件进行引入。 <head> <link rel="stylesheet&quot…

    JavaScript 2023年6月10日
    00
  • javascript 面向对象,实现namespace,class,继承,重载

    JavaScript是一门面向对象的语言,并且它支持实现命名空间(namespace),类(class),继承(inheritance)和重载(overloading)等概念。下面我将详细讲解这些概念的实现过程及示例。 命名空间 在JavaScript中,命名空间可以通过对象字面量的方式实现。通过定义一个全局的对象,然后在该对象上定义属性和方法,就可以将它们…

    JavaScript 2023年5月27日
    00
  • document.getElementById为空或不是对象的解决方法

    问题背景 在web开发中,常常使用到document.getElementById()方法来获取特定的DOM元素。但有时候会因为各种原因而出现document.getElementById为空或不是对象的错误提示,让开发者很苦恼,并且无法正常运行。 问题原因 造成该错误提示的原因很多,最常见的有以下几种: 当DOM元素尚未加载进页面时尝试获取 DOM元素的I…

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