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

Posted 叫我小龙哥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js对象4-js原型--杂志相关的知识,希望对你有一定的参考价值。

提问:在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的优先级

 






以上是关于js对象4-js原型--杂志的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js对象1--杂志

js对象2--工厂模式的由来--杂志

js对象3.1--什么是类,对象--杂志

关于js的对象原型继承