JavaScript基础知识-原型(prototype)

　　　　　　　　　JavaScript基础知识-原型(prototype)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.原型(prototype)对象初体验

1>.JavaScript源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型对象</title>

    <script type="text/javascript">

        /**
         *  原型(prototype)对象:
         *      (1)我们所创建的每一个函数，解析器都会向函数中添加一个prototype属性，该属性对应着一个对象，我们称之为"原型"对象。
         *      (2)原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象；
         *      (3)综上所述，以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中。
         *
         *  访问对象属性的查找顺序:
         *      (1)当我们访问对象的一个属性或方法时，它会现在对象中自身中寻找，如果有则直接使用;
         *      (2)如果上一步未找到的，就会去原型对象中寻找，如果找到则直接使用;
         *
         *  温馨提示:
         *      (1)如果函数作为普通函数调用prototype属性没有任何作用;
         *      (2)如果函数作为构造函数的形式调用时(即使用"new"关键字)，它所创建的对象中都会有一个隐含的属性指向该构造函数的原型;
         *      (3)一个构造函数(即"类")对象的实例对象可以通过"__proto__"来访问其原型(prototype)属性。
         */
        function Person(name,age,address) {
            this.name = name;
            this.age = age;
            this.address = address;
        }

        // 向Person类的原型中动态注入sayHello方法，让所有Person类的所有实例共享原型属性。
        Person.prototype.sayHello =  function(){
            console.log("I'm %s, and have %d years old. By the way, I live in %s",this.name,this.age,this.address);
        }

        // 向Person类的原型中动态注入arms属性
        Person.prototype.arms = "冲锋枪";

        // 注意构造函数的调用方式需要加一个new关键字哟~
        var p1 = new  Person("孙悟空",500,"花果山");
        var p2 = new  Person("蜘蛛精",300,"盘丝洞");
        var p3 = new  Person("如来佛祖",1000,"大雷音寺");

        // 注意访问对象属性的查找顺序哟~先查找对象属性本身，而后再去查找原型对象中的属性。
        console.log(p1.arms);
        console.log(p2.arms);
        console.log(p3.arms);

        // 向p1对象中动态注入arms属性
        p1.arms = "如意金箍棒";

        console.log(p1.arms);
        console.log(p2.arms);
        console.log(p3.arms);

        p1.sayHello();
        p2.sayHello();
        p2.sayHello();

        console.log(Person.prototype)
        console.log(p1.__proto__)
        console.log(p1.__proto__  == Person.prototype)

    </script>
</head>
<body>

</body>
</html>

2>.浏览器打开以上代码渲染结果

二.检查非原型(prototype)对象中的属性

1>.JavaScript源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问原型对象中的属性</title>

    <script type="text/javascript">

        function Person(name,age,address) {
            this.name = name;
            this.age = age;
            this.address = address;
        }

        Person.prototype.sayHello =  function(){
            console.log("I'm %s, and have %d years old. By the way, I live in %s",this.name,this.age,this.address);
        }

        Person.prototype.arms = "冲锋枪";

        var p1 = new  Person("孙悟空",500,"花果山");

        /**
         *  使用"in"关键字检查对象中是否含有某个对象属性时，如果对象中没有单原型中有，也会返回true。
         */
        console.log("name" in p1)
        console.log("arms" in p1)
        console.log("sayHello" in p1)

        /**
         *  对象的属性访问属性如下所示:
         *      (1)原型对象也是对象，所以他也有原型，当我们使用一个对象的属性或方法时，会先在自身中寻找，自身中如果有就直接使用;
         *      (2)如果上一步中未找到属性或方法时，则再去原型对象中寻找，如果原型对象中有则使用;
         *      (3)如果上一步中未找到属性或方法时，就再去原型中的原型去寻找属性或方法，直到找到Object对象的原型;
         *      (4)Object对象的原型的原型并不存在(默认值为null)，如果在Object原型中依然没有找到属性或方法，则返回"undefined";
         *      综上所述，方法和属性的查找顺序如下图所示。
         *
         */
        console.log(p1.sayHello)
        console.log(p1.Hello)


        /**
         *  可以使用对象的hasOwnProperty方法来检查对象自身中是否含有某个属性，如果有相应的属性或方法才会返回true。
         */
        console.log(p1.hasOwnProperty("name"))
        console.log(p1.hasOwnProperty("arms"))  // 该属性属于原型对象，而非对象本身的属性哟~
        console.log(p1.hasOwnProperty("sayHello"))


        /**
         *  Object对象是所有对象的祖先，因此object对象的原型并不存在，如果你非要查看，则object的原型为null。
         */
        console.log(p1.__proto__)  // p1对象的原型
        console.log(p1.__proto__.__proto__)  // p1对象的原型的原型是object对象哟~
        console.log(p1.__proto__.__proto__.__proto__)  // object的原型为null
        console.log(typeof p1.__proto__.__proto__.__proto__)


        console.log(p1.hasOwnProperty("hasOwnProperty"))
        console.log(p1.__proto__.hasOwnProperty("hasOwnProperty"))
        console.log(p1.__proto__.__proto__.hasOwnProperty("hasOwnProperty"))



    </script>
</head>
<body>

</body>
</html>

2>.浏览器打开以上代码渲染结果

posted @ 2020-12-19 23:32 尹正杰阅读(256) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

尹正杰

JavaScript基础知识-原型(prototype)

公告