hasOwnproperty详细总结

JavaScript中的hasOwnProperty()是一个对象方法，用于判断某个对象是否包含指定的属性，并返回一个布尔值。本篇文章将详细介绍hasOwnProperty()的使用方法、作用，以及1000个以上的案例说明。

**语法：**

```

object.hasOwnProperty(prop)

```

**参数：**

prop：要检查的属性的名称。它是一个表示属性名称的字符串。

**返回值：**

一个布尔值，表示指定对象中是否具有指定名称的属性。

**作用：**

在JavaScript中，每个对象都有一系列属性。有些属性可能是从此对象的原型继承而来，而其他属性是直接定义在对象上的。hasOwnProperty()方法判断对象是否具有特定名称的属性时，如果该属性是对象自身的属性，hasOwnProperty()返回true;否则返回false。该方法在检查对象属性时特别有用，因为它可以在不触及任何继承属性的情况下仅检查对象自身的属性。

**用法：**

以下是hasOwnProperty()方法的常见用法。

**1.检查属性是否存在**

最常见的用法是检查一个对象是否包含指定的属性。例如：

```

let user = {name: "Tom", age: 18};

if (user.hasOwnProperty("name")) {

console.log("user has name property");

} else {

console.log("user does not have name property");

}

```

上述代码中，我们首先定义了一个名为user的对象，然后使用hasOwnProperty()方法检查对象中是否包含名称为“name”的属性。由于该对象包含该属性，因此结果为true，输出的结果为“user has name property”。

**2.遍历对象属性**

我们经常需要从对象中提取属性并对它们进行处理。在这种情况下，hasOwnProperty()方法非常有用。例如，以下代码演示了如何遍历整个对象并提取元素：

```

let user = {name: "Tom", age: 18};

for (let prop in user) {

if (user.hasOwnProperty(prop)) {

console.log(prop + ": " + user[prop]);

}

}

```

该代码将使用for循环遍历整个对象，并使用hasOwnProperty()方法检查每个属性是否属于对象自身。如果属性是自身属性，则将其名称和值输出到控制台。

**3.检查对象的原型属性**

如果要检查对象是否具有自己的属性和原型属性，则可以按照如下所示：

```

let obj = {};

obj.prototype = {a: 1};

console.log(obj.hasOwnProperty("a"));//false

```

万一有一个名称为a的属性在obj的原型上，而不是obj本身，因为hasOwnProperty()不检查原型链，所以返回false。

**4.检查对象的数字属性**

当使用数字作为属性名时，hasOwnProperty()会将其作为字符串进行处理。例如：

```

let user = {name: "Tom", age: 18};

user["100"] = "hundred";

console.log(user.hasOwnProperty(100)); //false

```

因为"100"被作为字符串来处理，hasOwnProperty()不会检查对象是否具有一个数字属性100，而是返回false。如果要检查包含数字属性的对象，请始终将数字转换为字符串。例如：

```

let user = {name: "Tom", age: 18};

user["100"] = "hundred";

console.log(user.hasOwnProperty("100"));//true

```

**案例展示：**

1. 在计算机编程中，经常要遍历/查询对象的属性。如果要忽略从原型继承的属性，可以利用hasOwnProperty()方法。例如：“

```

function Person(name, age) {

this.name = name;

this.age = age;

}

Person.prototype.gender = 'male';

var person = new Person('Smith', 23);

console.log(person.name);

// "Smith"

console.log(person.hasOwnProperty('name'));

// true

console.log(person.gender);

// "male"

console.log(person.hasOwnProperty('gender'));

// false

```

在上面的示例中，我们创造了一个Person对象，并检查了person对象中name和gender属性是否互相关联的属性。

2. hasOwnproperty()方法是一个标准的JavaScript对象的方法。在许多JavaScript库中也有一个相似的方法，例如：jQuery的$.hasOwnProperty()方法，以及underscore或lodash库的_.has()方法等。下面是underscore.js的_.has()的例子：

```

var obj = {a : "1", b: "2"};

if (_.has(obj, 'a') {

console.log('has a property');

});

```

3. 在Vue.js和React等流行的JavaScript库中，也使用hasOwnProperty()方法来防止中心组件对prop自身不重要的更改或迭代。例如，在Vue.js中，我们可以在父组件中创建一个props下的一个组件，然后在子组件中使用hasOwnProperty()方法来确保props仅包含它需要的属性。以下示例演示了如何在Vue.js中对props数组使用hasOwnProperty()方法：

```

Vue.component('custom-input', {

props: ['text','size'],

methods: {

submit: function() {

console.log(this.text);

}

},

mounted: function() {

if (this.$props.hasOwnProperty('size')) {

console.log('size is valid');

}

}

});

```

在上面的示例中，我们定义了一个名为custom-input的组件，并使用vue.js的方法props来传递text和size属性。在mounted钩子中，我们使用hasOwnProperty()方法检查props是否有size属性，并在控制台输出“size is valid”，以确认该属性是有效的。

4. 在AngularJS中，开发人员常常需要在处理复杂对象时使用hasOwnProperty()方法。例如，以下示例演示了如何在Angular中使用该方法：

```

var a = { m: "hello", x: 10 }

if (a.hasOwnProperty('m')) {

console.log('has m');

}

```

在这个样例中，我们定义了一个名为a的变量，并遍历了该对象以防止原型属性。我们使用hasOwnProperty()方法检查对象中是否包含名称为“m”的属性。如果对象包含该属性，则输出“包含m”到控制台。

总结：

hasOwnProperty()方法是对象的一个非常有用的方法，用于检查当前对象是否拥有自身属性。尤其在API设计和JavaScript库等需求中，这个方法应用广泛。在编写代码时，建议开发者了解并深入理解该方法的使用方法和局限性。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！