JavaScript basics explained-JS Tutorial-php.cn

————————————————————————————————————————————

变量

全局变量：在函数体外声明，全局可以使用
局部变量：通过关键字var来声明

变量类型

 1     <script type="text/javascript"> 2     var a; 3     // 十进制 4     a = 1; 5     a = 1.2; 6     a = -23; 7     a = .23e4; 8     a = 3e-2; 9     // 十六进制10     a = 0xABCDE;11     a = 0Xff;12     // 八进制13     a = 0123;14     a = 01234567;15     // 正负无穷大16     a = 1.79e310;17     a = -1.79e310;18     // NaN:不是一个数字19     // p.s.NaN不能和自身比较,NaN!=NaN20     a = 0 / 0;21     // alert(a);22     // alert(isNaN(a));23     var str1 = "hello";24     var str2 = "world";25     var str = str1 + str2;26     // 转义字符,如果定界符用',内部是可以用"的 27     var strCh = 'a\nb\rc\t"d\\';28     // alert(strCh);29     // 赋不存在的值30     var emptyValue;31     // alert(emptyValue);32     // 赋空置33     var nullValue = null;34     alert(nullValue);35     </script>

Copy after login

在内存中的存储与释放（无用存储单元）

收集方式：自动进行收集，可以创建任何需要的无用对象，系统会自动进行清除
收集内容：收集器确定安全回收内存单元的时机，回收那些不再会被使用的值
回收算法：标记和清除无用存储单元的回收算法，通过回收器周期性遍历所有变量并且给变量所引用的值做标记，如果被引用的值是对象或数组，那么会以递归的形式做标记，如果值是数或图，回收器会找到对应的值。如果没有找到对应的值，则通过回收算法来回收。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

引用JS

 1     <!DOCTYPE html> 2     <html> 3      4     <head> 5         <!-- 调用外部文件 --> 6         <script type="text/javascript" src="./test.js?1.1.11"></script> 7         <!-- 使用代码屏蔽 --> 8         <script type="text/javascript"> 9         <!--10         alert("浏览器支持js,如果不支持则不显示该内容");11         // 向控制台书写内容12         console.log("hello");13         //-->14         </script>15         <!-- 在浏览器不支持js时显示该行字 -->16         <noscript>17             您的浏览器不支持js,建议更换高版本的浏览器以保证您的用户体验18         </noscript>19     </head>20     21     <body>22         <!-- 写在href中的js -->23         <p><a href="javascript:confirm(&#39;您确定么?&#39;)">报名</a></p>24         <!-- 写在onclick中的js -->25         <p onclick="javascript:alert(&#39;onclick&#39;)">点击</p>26     </body>27     28 </html>

Copy after login

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

隐式转换

显式转换

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

参数调用的arguments的方法

 1     <script type="text/javascript"> 2     // arguments数据类型是一个数组,可以得到我们传入的参数 3     function calc(x, y) { 4         alert(arguments[0]); 5         alert(arguments[1]); 6         alert(typeof arguments); 7     } 8     // alert(1, 2); 9 10     // 通过arguments.length获取参数的个数11     // 在这里调用的实参有5个,函数形参有4个,自动忽略一个,但arguments.lenth为512     // 通过arguments实现可变参数13     function test(a, b, c, d) {14         arguments[2] = 100;15         var paramsNum = arguments.length;16         var sum = 0;17         for (var i = arguments.length - 1; i >= 0; i--) {18             sum += arguments[i];19         }20         alert(sum);21     }22     test(1, 2, 3, 4, 5, 6);23     </script>

Copy after login

————————————————————————————————————————————

函数

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

全局函数：见手册

代码样例

 1     <script type="text/javascript"> 2     /*********************************** 3      * encodeURI() 4      * decodeURI() 5      * encodeURIComponent() 6      * decodeURIComponent() 7      ***********************************/ 8     // encodeURIComponent 在转义时会将整个URI中的所有标点符号都转义,包括分隔符/ 9     var str = "http://www.hughdong.com/Hugh Dong,/";10     document.write(encodeURI(str) + "</br>");11     document.write(encodeURIComponent(str) + "</br>");12     // decodeURI 无法完全解开encodeURIComponent的编码,需要对应decodeURIComponent来就解码13     document.write(decodeURI(encodeURIComponent(str)) + "</br>");14     document.write(decodeURIComponent(encodeURIComponent(str)) + "</br>");15     document.write("<hr>")16     /***********************************17      * escape()18      * unescape()19      ***********************************/20     // 对字符进行转义21     str = "(?!=()#%&))";22     document.write(escape(str) + "</br>");23     document.write(unescape(escape(str)) + "</br>");24     document.write("<hr>")25     /***********************************26      * eval()27      ***********************************/28     // 计算某个字符串,并执行其中的JavaScript代码29     eval("document.write('eval() is called')");30     document.write("<hr>")31     /***********************************32      * getClass(javaobj)33      * 未理解,略34      ***********************************/35     document.write("<hr>")36     /***********************************37      * isFinite()38      * isNan()39      ***********************************/40     // isFinite 判断不是无穷大时true41     document.write(isFinite(1.79e390) + "</br>")42     document.write(isFinite(-1.79e390) + "</br>")43     document.write(isFinite(2) + "</br>")44     // isNaN 判断不是数字时true45     document.write(isNaN("hello") + "</br>")46     document.write(isNaN(1.79e390) + "</br>")47     document.write("<hr>")48     /***********************************49      * Number()50      * parseFloat()51      * parseInt()52      * String53      * 数据类型转换,略54      ***********************************/55     document.write("<hr>")56     </script>

Copy after login

实现效果

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

匿名函数：没有函数名的函数

函数表达式可以存储在变量中，变量也可以作为一个函数使用
可以将匿名函数作为参数传递给其他函数，接收方函数就可以通过所传递进来的函数完成某些功能
可以通过匿名函数来执行某些一次性的任务

回调函数：将函数的返回值作为参数调用来实现功能

回调函数调用的函数

call()
apply()

可以让我们在不做命名的情况下传递参数，这样可以节省全局变量
我们可以讲一个函数调用操作委托给另一个函数，节省代码编写
有助于提升性能

自调函数：不需要调用，自动执行的函数

使用自调函数不会产生任何全局变量
函数无法重复执行，适合执行一些一次性或初始化的任务

内部（私有）函数

确保全局名字空间的纯净性，防止命名出现冲突
只将一些必要的函数暴露给外部，并保留属于自己的函数，使其不被其他应用程序所调用

返回函数的函数

闭包（作用域链）

实现代码：

 1     <script type="text/javascript"> 2     var Test = function Calc(a, b) { 3         return a + b; 4     } 5     document.write(Test(1, 2) + "</br>"); 6     var Test1 = Test; 7     document.write(Test1(1, 2) + "</br>"); 8     /******************************* 9      * 匿名函数,没有函数名10      *******************************/11     var Test2 = function(x, y) {12         return x * y;13     }14     var Test3 = Test2;15     document.write(Test2(3, 4) + "</br>");16     document.write(Test3(4, 5) + "</br>");17     /*******************************18      * 回调函数(匿名函数的应用)19      *******************************/20     // Demo121     // 通过Calc2调用T1和T2函数22     function Calc2(x, y) {23         return x() + y();24     }25     function T1() {26         return 5;27     }28     function T2() {29         return 6;30     }31     document.write(Calc2(T1, T2) + "</br>");32     // Demo233     // 调用Func1,在for循环中将abc的值先*2传入CallBack函数AddOne,将返回值存入arr数组并打印34     function Func1(a, b, c, CallBack) {35         var i, arr = [];36         for (i = 0; i < 3; i++) {37             arr[i] = CallBack(arguments[i] * 2);38         }39         return arr;40     }41     function AddOne(num) {42         return num + 1;43     }44     document.write(Func1(3, 4, 5, AddOne) + "</br>");45     // Demo346     // 或者使用匿名函数作为回调函数,同Demo247     function Func2(a, b, c, CallBack) {48         var i, arr = [];49         for (i = 0; i < 3; i++) {50             arr[i] = CallBack(arguments[i] * 2);51         }52         return arr;53     }54     document.write(Func2(5, 6, 7, function(a) { return a + 1 }) + "</br>");55     // Demo456     // 使用系统的call()方法57     function Func4(a, b, c) {58         return a * b * c;59     }60     document.write(Func4.call(this, 2, 2, 2) + "</br>");61     // Demo562     // apply()方法63     function Func5(a, b, c) {64         return a + b + c;65     }66     var params = [4, 5, 9]67     document.write(Func5.apply(this, params) + "</br>");68     /*******************************69      * 自调函数70      *******************************/71     (function(a, b) {72         document.write("函数自调用" + a + b);73     })(3, 5);74     </script>

Copy after login

The above is the detailed content of JavaScript basics explained. For more information, please follow other related articles on the PHP Chinese website!