欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

原型

程序员文章站 2022-05-08 16:46:11
...

原型和原型链

    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //构造函数
       function Person(name,age){
           this.name=name;
           this.age=age;
       }
       //通过原型来添加方法,解决数据共享,节省内存空间
       Person.prototype.sayHi=function(){
           console.log("您好!");
       };

       var p1=new Person("小明",20); //实例对象
       var p2=new Person("小红",19); //实例对象
       console.log(p1.sayHi==p2.sayHi);

       //console.dir()可以显示一个对象的所有属性和方法
       console.dir(p1);
       console.dir(p2);
       console.dir(Person);

输出结果:

原型

从输出结果可以看出:

1、写在构造函数中的属性

实例对象中有两个属性,name和age,是通过构造函数来获取的。

构造函数中并没有name和age这两个属性。

2、原型:__proto__或者prototype,都是原型对象。

实例对象中有个属性,__proto__,也是对象,叫原型,但不是标准的属性,是浏览器使用的,在IE8中不支持。

构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用的。

3、原型的作用:共享数据,节省内存空间,因此,不需要共享的数据就写在构造函数里,需要共享的数据就写在原型中。

构造函数、实例对象以及原型之间的关系

1、构造函数可以实例化对象。

2、构造函数中有一个属性叫prototype,是构造函数的原型对象。

3、构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数。

4、实例对象的原型对象(__proto__)指向的是该构造函数的原型对象(prototype)。

5、构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的。

6、实例对象的原型对象(__proto__)和构造函数的原型对象(prototype)指向是相同的

即:console.log(实例对象.__proto__ ==  构造函数.prototype); 输出结果为:true。

7、实例对象中的__proto__,是原型,但不是标准的属性,是浏览器使用的,在IE8中不支持。

8、构造函数中的prototype,是原型,是标准属性,程序员使用的。

9、原型链:是一种关系,实例对象和原型对象之间的关系,这种关系是通过原型(__proto__)来联系的。

常规原型对象添加方法的写法

    //构造函数
    function Student(name,age,sex,score){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.score=score;
    }
    //原型对象
    Student.prototype.height = "180cm";
    Student.prototype.weight = "50kg";
    Student.prototype.study = function(){
        console.log("学无止境");
    };
    Student.prototype.play = function(){
        console.log("打乒乓球");
    };
    Student.prototype.eat = function(){
        console.log("天天在食堂吃饭");
    };
    //实例化对象,并初始化
    var student = new Student("小明",22,"男","100分");
    console.dir(student);
    console.dir(Student);

原型

简单的原型写法:

这种写法需要手动添加构造器的指向,否则,实例对象和构造函数中都没有constructor属性

    //构造函数
    function Student(name,age,sex,score){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.score=score;
    }
    //简单的原型写法
    Student.prototype = {
        //需要手动修改构造器的指向
        constructor:Student,
        height : "180cm",
        weight : "50kg",
        study : function(){
            console.log("学无止境");
        },
        play : function(){
            console.log("打乒乓球");
        },
        eat : function(){
            console.log("天天在食堂吃饭");
        }
    };
    //实例化对象,并初始化
    var student = new Student("小明",22,"男","100分");
    student.study();
    console.dir(student);
    console.dir(Student);

原型

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

    //构造函数
    function Student(name,age,sex){
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    //原型对象添加方法
    Student.prototype.study = function(){
        console.log("学无止境");
        this.play();
    };
    Student.prototype.play = function(){
        console.log("打乒乓球");
        this.eat();
    };
    Student.prototype.eat = function(){
        console.log("天天在食堂吃饭");
    };
    //实例化对象,并初始化
    var student = new Student("小明",22,"男");
    student.study();

输出结果:

原型

实例对象中使用的属性和方法,先在实例对象中查找,找到了就直接使用,找不到的话,就去实例对象的__proto__属性指向的原型对象prototype中查找,找到了就使用,找不到则报错。

    //构造函数
    function Student(name,age,sex,score){
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.score=score;
    }
    //原型对象
    Student.prototype.weight = "50kg";
    Student.prototype.sex= "女";
    Student.prototype.study = function(){
        console.log("学无止境");
    };

    //实例化对象,并初始化
    var student = new Student("小明",22,"男","100分");
    console.log(student.sex);
    console.log(student.weight);
原型

为内置对象的原型对象添加方法

例如:为String的原型对象添加一个倒序字符串的方法

    String.prototype.myReverse = function(){
        var string=[];
        for(var i=this.length-1; i>=0; i--){
            string[string.length] = this[i];
        }
        return string.join("");
    };

    var str="abcdefg";
    var s1=str.myReverse();
    console.log(s1);

例如:为Array的原型对象添加一个从小到大排序的方法

    //从小到大排序
    Array.prototype.mySort = function(){
        for(var i=0;i<this.length-1;i++){
            for(var j=0;j<this.length-1-i;j++)
                if(this[j]>this[j+1]){
                    var temp=this[j];
                    this[j]=this[j+1];
                    this[j+1]=temp;
                }
        }
    };
     var arr=[12,5,8,3,9,10,16,11,22,17];
     arr.mySort();
     console.log(arr);
    var arr1=["Tom","Jack","An"];
    arr1.mySort();
    console.log(arr1);

输出结果:

原型

相关标签: 原型