JavaScript 原型介绍及使用方法

最新推荐文章于 2024-03-14 22:53:16 发布

程佳麒

最新推荐文章于 2024-03-14 22:53:16 发布

阅读量219

点赞数 1

本文链接：https://blog.csdn.net/weixin_42194172/article/details/80322250

版权

什么是原型？

构造函数中有一个属性prototype,是原型，程序员使用的

实例对象中有一个属性__proto__,是原型,浏览器使用的，不是很标准

实例对象中的__proto__指向的就是该实例对象中的构造函数中的prototype

构造函数中的prototype里面的属性或者方法，可以直接通过实例对象调用

写法：实例对象.__proto__才能访问到构造函数中的prototype中的属性或者方法或者对象.原型中的方法（per.eat()）

原型就是属性，而这个属性也是一个对象

通过原型添加方法：

<script>
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    Person.prototype.eat=function(){
        console.log("sssssss");
    };
    //节省内存空间，数据共享 

</script>

原型中的方法可以互相调用：

<script>
    function Person(age){
        this.age=age;
        this.sayHi=function(){
            console.log("hi");
            this.eat();//可以互相调用
        }
        this.eat=function(){
            console.log("chi");
        }
    }
    var per=new Person(60);//实例化
    per.sayHi();
</script>

原型对象中的方法可以互相调用：

<script>
    function Aniaml(name,age){
        this.name=name;
        this.age=age;
    }
    //原型中添加方法
    Aniaml.prototype.eat=function(){
        console.log("chichichi");
        this.play();
    }
    Aniaml.prototype.play=function(){
        console.log("wanwnawan");
        this.sleep();
    }
    Aniaml.prototype.sleep=function(){
        console.log("shuishuishui");
    }
    var dog=new Aniaml("llal",20)
    dog.eat();
    //原型对象中的方法可以互相调用
</script>

为什么要用原型？

本身在构造函数中定义的属性和方法，当实例化对象的时候，实例对象中的属性和方法都是在在即的空间中存在的，如果是多个对象。这些属性和方法都会在单独的空间中存在，浪费内存空间，所以，为了数据共享，把想要节省空间的属性或者方法写在原型对象中，达到了数据共享，实现了节约内存空间。

<!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>原型</title>
    <style>
        #dv{
            width: 300px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="dv"></div>
<button id="btn">改变</button>
<script>
    function ChangeStyle(btnObj,dvObj,json){
        this.btnObj=btnObj;
        this.dvObj=dvObj;
        this.json=json;
    };
    ChangeStyle.prototype.init=function(){
        var that =this;
        this.btnObj.οnclick=function(){
            for(var key in that.json){
                that.dvObj.style[key]=that.json[key];
            }
        };
    };
    var json={"width":"500px","height":"800px","backgroundColor":"blue","opacity":"0.2"};
    var cs=new ChangeStyle(document.getElementById("btn"),document.getElementById("dv"),json);
    cs.init();
</script>
</body>
</html>