js对象4-js原型--杂志

Posted 2020-08-19 叫我小龙哥

提问：在js中什么是原型 prototype

每个学js的人都有自己的解释，网上一大堆的解释与应用，但是看了他们的解释表示还是不理解怎么办？（原因是他们说的太天花乱坠了）

官方手册解释：prototype 属性使您有能力向对象添加属性和方法。

　　1.prototype是对象的一个属性

　　2.使用它可以给对象添加方法

 

小龙哥来解释：解释前还是来看一个非常简单的案例

先来讨论一下css（做前端的都会这个--简单吧）

当我们给元素添加样式的时候经常的方式是不是

　　1.使用 class   （改变一类元素的样式）

　　2.使用行间样式    （给单个元素改变样式）  （给单个对象添加方法）   

.box1 { background: red}
<div>
    <div style=‘background: red‘ class=‘box1‘></div>
    <div class=‘box2‘></div>
    <div class=‘box2‘></div>
    <div class=‘box2‘></div>
    <div class=‘box2‘></div>
</div>

 

还记得上一章中的这个案例  只能给单个的数组对象求和 （类似于css行间样式）

 1 var arr1 = new Array(22,44,1,6,7);   //也可以使用直接量创建    var arr1 = [22,44,1,6,7];
 2     arr1.sum = function(){    //给数组arr1添加一个方法sum   （类似于css行间样式）
 3         var result = 0  //求和
 4         var i = 0;   //一个小的性能优化 不用每次for循环的时候都声明并初始化一个变量 i = 0
 5         for(i = 0; i<this.length; i++){    //this 代表调用函数的对象为arr1
 6             result+= this[i];
 7         }
 8         return result;
 9     }
10     alert(arr1.sum());   //80

 

给Array类的原型上添加一个方法.你有多少个数组都可以给这些数组求和  类似于css中的class

 

var arr1 = new Array(22,44,1,6,7);   //也可以使用直接量创建    var arr1 = [22,44,1,6,7];
var arr2 = new Array(1,24,5,6);
    Array.prototype.sum = function(){    //给Array类的原型上添加一个方法sum
        var result = 0  //求和
        var i = 0;   //一个小的性能优化 不用每次for循环的时候都声明并初始化一个变量 i = 0
        for(i = 0; i<this.length; i++){    //this 代表调用函数的对象为arr1
            result+= this[i];
        } 
        return result;
    }
    alert(arr1.sum());   //80
    alert(arr2.sum());   //36
    alert(arr1.sum == arr2.sum )    //true  因为他们都是来自同一个原型上的方法   解决浪费

简单的总结：给一个类的原型上添加一个方法，那么通过这个类创建出来的对象都可以使用这个方法

1.使用 class   （改变一类元素的样式）     （类似于：在类的原型上添加方法）

2.使用行间样式    （给单个元素改变样式）  （给单个对象添加方法） 

现在可以给前面的实例填上原型

<script type="text/javascript">
    function CreatePreason(name,sex){   //构造函数
    　　  //假想系统内部自动构造出一个对象，这个对象赋值给了this
         //var this = new Object();
　　　　　
         //属性　　　
    　　　this.name = name;  //给对象添加一个name属性
    　　　this.sex = sex;  //给对象添加一个sex属性

           //假想系统内部自动返回了
          // return this;   
    }
  
//方法
CreatePreason.prototype.sayName= function(){
    　　　　alert("大家好我是："+this.name);   // 打印出：传进来的参数name的真正值           这里的this代表调用该方法的对象
 }

CreatePreason.prototype.saySex= function(){
    　　　　alert("性别："+this.sex);   // 打印出：传进来的参数sex的真正值           这里的this代表调用该方法的对象
}

    var p1 = new CreatePreason("小龙哥","男");   
    var p2 =new CreatePreason("小龙女","女");   
    p1.sayName();  //打印出  大家好我是：小龙哥
    p1.saySex();   //打印出  性别：男
    p2.sayName();  //打印出  大家好我是：小龙女
    p2.saySex();   //打印出  性别：女
    alert(  p1.sayName ==   p2.sayName)  //true   
</script>

总结：1.构造函数名首字母大写

　　　2.在构造函数里面添加属性（不相同的添加到构造函数里面）

　　　3.在构造函数的原型prototype上添加方法  （相同的添加到原型上）

　　　4.以后要是想不起来原型是干嘛的，就想想css吧

 

讨论原型与单个对象的优先级

Array.prototype.a = 12 //原型上添加类似于class
var arr1 = [1,33,4,77];
alert(arr1.a) //12

arr1.a = 5;
alert(arr1.a) //5 //单个对象上添加 类似于行间样式

在css中行间样式的优先级大于class的优先级