JavaScript基础知识-原型(prototype)

本文涉及的产品
应用实时监控服务-应用监控,每月50GB免费额度
应用实时监控服务-用户体验监控,每月100OCU免费额度
简介: 关于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>.浏览器打开以上代码渲染结果

相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
目录
相关文章
|
3月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
31 0
|
2月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
|
1月前
|
JavaScript 前端开发
JavaScript - 测试 Prototype
JavaScript - 测试 Prototype
12 0
|
2月前
|
JavaScript 前端开发
JavaScript prototype(原型对象)
JavaScript prototype(原型对象)
32 0
|
3月前
|
JavaScript 前端开发
JavaScript中什么是原型?有什么用?
JavaScript中什么是原型?有什么用?
23 1
|
3月前
|
JavaScript 前端开发 Java
什么是JavaScript原型对象
【8月更文挑战第2天】什么是JavaScript原型对象
61 9
|
5月前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
137 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
3月前
|
设计模式 JavaScript 前端开发
js对原型和继承的理解
了解JavaScript中原型和继承的概念对于编写优雅高效的代码、理解库和框架的内部机制以及执行高级设计模式都有着重要的意义。
45 0
|
3月前
|
JavaScript 前端开发
详细讲解!JavaScript原型 !
详细讲解!JavaScript原型 !
|
5月前
|
JavaScript
js奥义:原型与原型链(1)
js奥义:原型与原型链(1)