JavaScript函数中的参数类型

标签： javascript

2016-06-05 10:03 103人阅读 评论(0) 收藏 举报

 分类：

JavaScript（16） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

JavaScript是一种弱类型语言，由于声明形参无须定义数据类型，所以导致调用这些函数时可能出现问题。比如：

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"> <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">changeAge</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(p)</span>{</span>     p.setAge(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span>); }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

由于，javascript不需要声明参数类型，所以调用函数时，传入的参数p完全可以是整型变量或者是布尔型变量，这些类型的数据都没有setAge（）方法，但程序强制调用该方法，肯定会导致程序出现错误，非正常中止。为了解决弱类型语言所存在的问题，弱类型语言方面的专家提出了“鸭子类型”的概念。“鸭子类型”的理论认为：如果弱类型语言的函数需要接受参数，则应先判断参数类型，并判断参数是否包含了需要访问的属性、方法。只有当这些条件都满足时，程序才开始真正处理调用参数的属性、方法。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//定义函数changeAge，函数需要一个参数</span>    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">changeAge</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(person)</span>{</span>        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//首先要求person必须是对象，而且person的age属性为number</span>        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> person==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'object'</span>&& <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> person.age==<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'number'</span>){            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//执行函数所需的逻辑操作</span>            document.write(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"函数执行前person的age值为："</span>+person.age+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<br/>"</span>);            person.age=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>;            document.write(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"函数执行后person的age值为："</span>+person.age+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<br/>"</span>);        }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span>{            document.writeln(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"参数类型不符合"</span>+<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> person+<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<br/>"</span>);        }    }    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//分别采用不同的方式调用函数</span>    chageAge();    changeAge(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"xxx');    changeAge(true);    //采用JSON语法创建第一个对象    p={abc:34};    changeAge(p);    //采用JSON语法创建第二个对象    person={age:20};    chageAge(person);</span></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li></ul>