JavaScript之prototype原型

最新推荐文章于 2024-08-08 16:04:51 发布

JZJZY

最新推荐文章于 2024-08-08 16:04:51 发布

阅读量169

点赞数

文章标签： javascript 前端 prototype 原型对象

本文链接：https://blog.csdn.net/weixin_43772533/article/details/107027960

版权

Prototype原型
在构造函数中有一个属性叫prototype
可以通过prototype来添加新的属性和方法，并且新增内容为该构造函数的所有对象所共有
由该构造函数创建的对象会默认连接到该属性上

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Student(name, age) {
            this.name = name;
            this.age = age;
            this.show = function () {
                console.log("我是一个学生，姓名：" + this.name + ",年龄：" + this.age);
            };
            this.sayHello = function () {
                console.log("您好，我是一个学生！");
            };
            this.sayGoodbye = function () {
                console.log("再见！");
            };
        }

        console.log(Student.prototype);

        var stu1 = new Student("张三", 24);
        stu1.show();
        stu1.sayHello();
        stu1.sayGoodbye();

        var stu2 = new Student("李四", 25);
        stu2.show();
        stu2.sayHello();
        stu2.sayGoodbye();

        console.log(stu1 === stu2); //false
        console.log(stu1.name === stu2.name); //false
        console.log(stu1.sayHello === stu2.sayHello); //flase
        console.log(stu1.sayGoodbye === stu2.sayGoodbye); //false
        console.log(stu1.prototype === stu2.prototype);
    </script>
</head>

<body>

</body>

</html>

所有函数都具有一个prototype属性
在这里插入图片描述

作用
对象间共享数据
为“类”增加新的属性，方法，并且新增内容对于当前页面中已经创建的对象页有效

prototype是一个对象属性，其属性值为对象，称为原型对象

prototype的用法
构造函数.prototype.属性名 = 值;
构造函数.prototype.方法名 = function(){方法定义体};

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //stu1.sayHello和stu2.sayHello分别使用不同的内存空间，都要占用资源
        //但是其内容是完全相同的，为了节省内存空间，希望能够共用
        function Student(name, age) {
            this.name = name;
            this.age = age;
            this.show = function () {
                console.log("我是一个学生，姓名：" + this.name + ",年龄：" + this.age);
            };
        }

        //可以通过prototype来添加新的属性(方法)，并且新增内容为该构造函数的所有对象所共有
        Student.prototype.sayHello = function () {
            console.log("您好，我是一个学生！");
        };
        Student.prototype.sayGoodbye = function () {
            console.log("再见！");
        };

        //由该构造函数创建的对象会默认链接到该属性上
        var stu1 = new Student("tom", 20);
        stu1.sayHello();
        var stu2 = new Student("jack", 24);
        stu2.sayHello();
        console.log(stu1.sayHello === stu2.sayHello); //true
    </script>
</head>

<body>

</body>

</html>

在这里插入图片描述

在访问对象的属性(方法)时，首先在当前对象中查找，如果没有，就回到该对象关联的构造函数的prototype属性中找，即到原型对象中查找。

  <script>
        //stu1.sayHello和stu2.sayHello分别使用不同的内存空间，都要占用资源
        //但是其内容是完全相同的，为了节省内存空间，希望能够共用
        function Student(name, age) {
            this.name = name;
            this.age = age;
            this.show = function () {
                console.log("我是一个学生，姓名：" + this.name + ",年龄：" + this.age);
            };
        }

        Student.prototype.sex = "男"; //共享的属性
        stu1.sex = "女"; //stu1私有的属性
        console.log(stu1.sex);
        console.log(stu2.sex);
        console.log(stu2.hobby);
    </script>

在这里插入图片描述

可以给Array类型添加新的属性和方法，这样新建的每一个数组就都拥有这些方法了。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //扩展Array类型，为Array类型添加新的属性(方法)
        Array.prototype.reverseSort = function () { //实现倒序排列的功能
            this.sort(); //this表示当前对象，即要操作的数组
            this.reverse();
        };
        Array.prototype.show = function () { //实现输出数组中元素的功能
            console.log("数组中共有：" + this.length + "个元素，分别如下：");
            for (var i = 0; i < this.length; i++) {
                console.log("第" + (i + 1) + "个元素为：" + this[i]);
            }
        };

        var names = new Array("tom", "jack", "alice", "mike");
        names.reverseSort();
        console.log(names);

        names.show();
        var nums = [12, 3, 98, 24, 2, 45, 70];
        nums.show();
    </script>
</head>

<body>

</body>

</html>