hasOwnProperty和in属性操作

最新推荐文章于 2023-09-20 16:58:25 发布

原创最新推荐文章于 2023-09-20 16:58:25 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#prototype

原型链、面向对象专栏收录该内容

3 篇文章

订阅专栏

本文详细探讨了JavaScript中用于检查对象属性的hasOwnProperty方法和in操作符的区别与用法。通过实例解析，阐述了它们在检测原型链上的属性及自身属性时的不同行为，帮助开发者更好地理解和运用这两种属性检查手段。

hasOwnProperty和in属性操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        /* 基本使用 */
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.showName = function() {
            console.log("姓名：" + this.name);

        }
        var p = new Person();

        /* in关键字 ：for..in循环遍历对象 + 检查对象中是否存在的属性 */
        /* in 检查属性 (实例成员 && 原型成员) */
        var o = {
            address: "北京",
            className: "H5"
        };
        console.log("address" in o); //true
        console.log("id" in o); //false
        console.log("name" in p, "age" in p, "showName" in p); //true true true

        /* o.hasOwnProperty("成员名字")  检查对象中是否存在指定的属性*/
        /* 区别：hasOwnProperty 检查属性 (实例成员) */
        console.log(p.hasOwnProperty("name"));
        console.log(p.hasOwnProperty("age"));
        console.log(p.hasOwnProperty("showName"));
    </script>
</body>

</html>