js原型

什么是js原型

js原型也叫做js原型对象是一种对象属性，
在Javascript中，每一个函数，系统都会给这个函数一个属性，这个属性就是prototype。

prototype的作用

prototype对象属性多用于构造函数中，
因为在构造函数中构造函数的每个方法都是需要在实际运用的对象中重新创建一遍，不能重复使用的。
这样会对代码的编写会非常的麻烦和对内存资源造成浪费。
然而，使用prototype原型对象给构造函数添加方法就可以解决这个问题，添加到prototype原型上的方法
会被该构造函数，所构造出来的所有对象共享。

不使用prototype

    <script>
        var arr = new Array(1,2,3,4,5);
        //设置一个求和的函数
        arr.sum = function(){
            var res = 0;//用来记录求和的值
            for(var i =0; i < this.length; i++){
                res += this[i];
            }
            return res;
            }
            alert(arr.sum());//15
            
            var arr2 = new Array(10,20,30,40,50);
           // alert(arr2.sum());//会报错，因为匹配不到这个方法
          
            
            arr2.sum = function(){
                var res = 0;
                for(var i =0; i < this.length; i++){
                    res += this[i];
                }
                return res;
            }
            alert(arr2.sum());//150
            alert(arr.sum == arr2.sum);//false
    </script>

使用prototype

    <script>
        Array.prototype.sum = funtion(){
            var res = 0 //记录求和
            for(var i = 0; i < this.length; i++){
                res += this[i];
            }
            return res;
        }
        
        var arr1 = new Array(1,2,3,4,5);
        var arr2 = new Array(10,20,30,40,50);
        
        alert(arr1.sum());//15
        alert(arr2.sum());//150
        
        alert(arr1.sum == arr2.sum); //true
    </script>

以上就是prototype在构造函数中的作用和运用，有了prototype后写构造函数的方法就方便容易了许多。

原型链

说到原型就肯定要说到一下原型链这个和原型息息相关的东西了

什么是原型链？

构造函数构造出来的对象，拥有一个__proto__的这么一个属性，这个__proto__还可以有它自己的__proto__，以此类推，就形成了一个原型链。
简单来说就是构造函数构造出来的对象有__proto__属性，构造出来的函数有prototype属性
然后在生成对象的时候，所生成的对象的__proto__属性是指向函数的prototype属性。
阅读起来可能有点晕晕乎乎的感觉所以我们还是用代码来比较直观

<script>     
    function Person(name, sex){
         this.name = name;
        this.sex = sex;
        }
    Person.prototype.showName = function(){
        lert("我的名字叫：" + this.name);
            }
    Person.prototype.showSex = function(){
        alert("我的性别是：" + this.sex);
            }
    //继承于Person创建一个新的构造函数叫做Worker
    function Worker(name, sex, job){
        //继承属性  这里也可以叫做构造函数的伪装
        Person.apply(this, [name, sex]);
            this.job = job;
            }
    //继承方法  添加新的方法
    Worker.prototype = Object.create(Person.prototype);
    Worker.prototype.showJob = function(){
        alert("我的工作是" + this.job);
         }
   var w1 = new Worker("小明", "男", "演员");
   w1.showName();//我的名字叫：小明
   w1.showSex();//我的性别是：男
   w1.showJob();//我的工作是演员
   alert(w1.__proto__ == Worker.prototype); //true
   alert(w1.__proto__.showName == Worker.prototype.showName); //true
   
   var w2 = new Worker("小白", "女", "画家");
   alert(w2.__proto__.showSex == Worker.prototype.showSex); //true
   alert(w1.__proto__ == w2.__proto__); //true
   alert(w1.__proto__.showName == w2.__proto__.showName); //true
   alert(w1.showName == w2.showName); //true
   alert(w2.__proto__.showSex == Person.prototype.showSex);//true
</script>

prototype和__proto__的区别

通过上面的代码会发现prototype和__proto__有很多相似之处，但是它们还是有区别的。
prototype是函数独有的属性，在对象上没有这个属性

    <script>
      
            function Person(){
                alert(我是一个程序员);
            }；
            var arr =[1,2,3];

            console.log(Person.prototype);//[object Object]
            console.log(arr.prototype);//undefined
            
    </script>

但是在函数上有__proto__这个属性，因为在Javascript中函数也是一种对象

  <script>
       
            function Person(name, sex){
                this.name = name;
                this.sex = sex;
            }
            Person.prototype.showName = function(){
                alert("我的名字叫：" + this.name);
            }
            Person.prototype.showSex = function(){
                alert("我的性别是：" + this.sex);
            } 
            var p1 = new Person('小白','男');
   
            console.log(Person.__proto__);//  ƒ () { [native code] }
            console.log(p1.__proto__);//Object
  </script>

prototype和__proto__的一点相似之处

prototype和__proto__也是有一点非常类似的地方就是它们的作用都是指向原型对象的，而区别在于 prototype 是针对函数，而__proto__针对的是对象。

    <script>
        
            function Person(name, sex){
                this.name = name;
                this.sex = sex;
            }
            Person.prototype.showName = function(){
                alert("我的名字叫：" + this.name);
            }
            Person.prototype.showSex = function(){
                alert("我的性别是：" + this.sex);
            } 
            var p1 = new Person('小白','男');
    
        console.log(Person.prototype);//Object
        console.log(p1.__proto__);//Object
        alert(Person.prototype === p1.__proto__);//true
    </script>

以上就是我个人对js原型的一些简单的理解,希望能有所帮助。