prototype原形的使用

最新推荐文章于 2022-02-28 11:42:55 发布

南无与青

最新推荐文章于 2022-02-28 11:42:55 发布

阅读量666

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_32810963/article/details/121434965

版权

在ES6之前，我们一般通过构造函数来模仿类创建对象，但是通过构造函数创建的对象存在一个问题。

  function Person(name,age) {
            this.name =name;
            this.age =age;
            this.sing = function(){
                console.log('我在唱歌');
             }
        }
        var xm = new Person('小明',18);
        var xh = new Person('小红',19);
        xm.sing();
        xh.sing();
        console.log(xm.sing === xh.sing);

我们通过构造函数来创建一个Person对象，并为其赋予name属性，age属性以及sing函数方法。

接着我们实例化两个Person对象，分别给他们赋值，然后调用他们的sing方法并判断他们的地址是否相同。

通过查看控制台，我们可以发现，虽然他们输出的结果是相同的，但是它们的地址却不相同。

这是因为他们两个的sing函数被分别放到了不同的内存中去，从而导致了它们的地址不相同，这种存放方式同时页导致了内存的浪费。

为了避免内存的浪费，我们可以将相同的函数放入原型prototype当中，

console.dir(Person);

我们可以先在控制台中查看Person对象的相关属性

我们可以看到其中的prototype属性，prototype其实就是一个对象，我们也称为原型对象

  Person.prototype.sing=function(){ 
            console.log('我在唱歌');
            
        }

我们将之前的sing函数注释掉，在构造函数外为Person对象中的原型对象添加sing方法

然后查看控制台的打印结果

可以看到同样也能实现之前的效果，而且现在两个实例化对象的sing函数的地址也相同，这样就节约了内存。

以上就是prototype的相关介绍，以下为全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Person(name,age) {
            this.name =name;
            this.age =age;
            // this.sing = function(){
            //     console.log('我在唱歌');
            //  }
        }
        console.dir(Person);
        Person.prototype.sing=function(){ 
            console.log('我在唱歌');
            
        }
        var xm = new Person('小明',18);
        var xh = new Person('小红',19);
        xm.sing();
        xh.sing();
        console.log(xm.sing === xh.sing);
    </script>
</body>
</html>