JavaScript 原型介绍及使用方法

什么是原型?

    构造函数中有一个属性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.onclick=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>

注意:

    构造函数.prototype={

        如果这种写法,要将构造器加上

        constructor:实例化对象的函数名

    }

通过原型为内置对象添加原型的属性或者方法

    系统的内置对象的属性和方法不能不满足现在的需求,所以,可以通过原型的方式加入属性或者方法,为了方便开发

    为内置对象的原型中添加的属性和方法,那么这个内置对象的实例对象就可以直接使用了

    String.prototype.方法=匿名函数;

    var str="xxx"

    str.方法();  //实例对象可以直接调用原型中的属性或者方法

    

阅读更多
上一篇JavaScript 面向对象编程思想,对象的使用方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭