学好js,这些js函数概念一定要知道【推荐】


Posted in Javascript onJanuary 19, 2017

函数创建方式

 1.声明方式 例如:function consoleTip (){ console.log("tip!"); }

 2.表达式方式 例如:var consoleTip = function(){ console.log("tip!"); }

两种方式的区别:

 1.表达式方式适合用来定义只使用一次的函数,声明方式定义的函数没有这个限制,当然也不是绝对的,这个区别只适用于编码规范上;

 2.声明方式定义的函数可以在函数调用之前定义也可以在函数调用之后定义,而表达式方式定义的函数只能在函数调用之前定义;

函数参数

函数参数包括形参,实参,形参就是函数定义时的参数;实参就是函数调用时传入的参数。由于js是弱类型语言,所以js函数的形参不指定类型。

js函数的形参和实参个数可以不一致。形参个数小于实参时,未传的形参值都是undefined,注意形参可以指定默认值,但是只能在函数体内部指定;形参个数小于实参时,在函数体内引用多余实参,必须通过实参对象arguments来获取实参,在函数体内部arguments就是实参对象的引用,并且此时的实参对象是一个数组对象,数组对象每一项对应着函数调用时传入的参数。

PS:实参对象有两个特殊属性callee和caller,其中callee属性代指当前正在执行的函数,caller属性代指调用当前正在执行的函数的函数,caller属性不是标准属性,不是所有浏览器都支持。使用callee属性的典型例子就是匿名函数的递归调用,例如定义一个阶乘函数:

var fact = function(x){ 
 if(x <= 1) {
  return 1;
 }else{
  return arguments.callee(x-1)*x;
 }
};

函数作用域

在函数中声明的变量(包括函数形参)在整个函数体内都是可见的,包括嵌套的函数中,在函数外部是不可见的;函数体内部定义的变量会覆盖同名的全局变量;

函数作用域中有个特性很重要,就是“声明提前”,意思就是在函数内部任意位置声明的变量,在函数体内部任意位置都是可见的,这是因为js引擎在预编译js时会把函数中所有的变量声明都提前至函数体顶部。

例如:

var scope = "outter";
!function(){
 console.log(scope); //undefined
 var scope = "inner";
 console.log(scope); //inner
}();
console.log(scope);  //outter

说明:

undefined 由于函数作用域的声明提前特性,这里的scope已经在函数顶部声明,但是没有被赋值,所以scope值为undefined

inner scope在函数体内部声明,并且有赋值

outter  函数体内部定义的变量会覆盖同名的全局变量,但是不影响全局变量的值

构造函数

构造函数的用处就是用来初始化新创建的对象,例子:var ary = new Array();

构造函数与普通函数的区别:

 1.函数命名上有区别,构造函数命名时通常是首字符大写,普通函数命名时首字符小写;

 2.调用方式的区别,构造函数是通过new关键字调用,而普通函数直接调用。

立即执行函数

把函数定义和函数执行结合到一起就是立即执行函数,也叫自执行函数。

这里需要注意两点:1.函数定义仅限于表达式方式定义的函数;2.函数执行实际上就是对函数表达式做一次运算,所以一元运算符都可以让函数执行。

这样的话,立即执行函数就会有多种写法:

(function(){console.log("IIFE");}());
(function(){console.log("IIFE");})();
!function(){console.log("IIFE");}();
void function(){console.log("IIFE");}();
~function(){console.log("IIFE");}();
....

立即执行函数可以接受参数,上面的写法都是可以的,但是编码规范推荐第一种写法,jQuery库使用的就是第一种写法。

那么自执行函数的用处有哪些呢?总结起来常用也就两种:1.保存参数上下文环境;2.作为命名空间。

用处1的适用场景:循环中执行异步函数,并且函数参数随循环变化。

/**
* 实例一
* 错误写法,因为jQuery的post方法是异步的,循环十次,post方法并行跑十次,
* 循环比post方法执行要快,最终传过去的i值都变成了10,即服务端收到index的都是10
*/
for(var i=0; i<10; i++){
 $.post(url,{index:i},function(){});
}
/**
* 正确写法,这样对于循环体中的立即执行函数来说,每次循环得到的参数都不同。立即执行函数
* 每执行一次都会创建一个函数上下文环境,在这个上下文环境中的变量值不受外界影响,
* 循环十次就会创建十个上下文环境,并且每个上下文环境的i值都不一样。这样的话,
* 虽然post方法是异步方法,但是是在每一个上下文环境中执行的,也就是说循环十次,
* post方法在十个上下文环境中分别执行了一次,post方法中使用的index参数每次都不一样,
* 最终服务端收到的index值就是从0到9十个数值
*/
for(var i=0; i<10; i++){
 (function(index){$.post(url,{index:index},function(){});}(i));
}
/**
* 实例二 
* 错误写法,最终会输出十个10,因为循环体的语句会延时执行
*/
for(var i=0; i<10; i++){
 setTimeout(function(){console.log(i);},100);
}
//正确写法,最终会输出0到9十个数值,原理同上
for(var i=0; i<10; i++){
 (function(x){setTimeout(function(){console.log(x);},100);}(i));
}

用处2的适用场景:你需要写一个公共模块,这个公共模块在很多地方都会使用,但是要保证公共模块中使用的变量和函数不会对其它模块造成污染,这样的话这个公共模块就需要一个单独的不同于其它模块的命名空间。

案例1:创建jQuery插件,保证创建的jQuery插件在jQuery的命名空间内都是有效的,这样每个jQuery对象才可以使用。

(function($){
 $.fn.changeStyle = function(colorStr){
  this.css("color",colorStr);  
  return this;
 }
}(jQuery));

案例2:创建一个带有私有变量和私有方法的对象。

var obj = (function(){
 var privateAttr,
  publicAttr;  
 function _setPriAttr(){
  privateAttr = "private";
 }  
 function getPriAttr(){
  return privateAttr;
 }  
 return {
  attr:publicAttr,   
  getAttr:function(){
   getPriAttr();
  }
 }
}());

通过这种方式创建的对象,利用立即执行函数的return语句对外暴露属性以及方法,并且可以保证没有对外暴露对象的属性和方法,在对象外边是无法访问到的。

总结:其实用处1和用处2的原理都是一样的,都是利用了函数作用域的概念,请仔细体会。

参考资料: js权威指南

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
十个优秀的Ajax/Javascript实例网站收集
Mar 31 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
图解JavaScript中的this关键字
May 28 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
angular 服务随记小结
May 06 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 #Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 #Javascript
react.js 翻页插件实例代码
Jan 19 #Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 #Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 #Javascript
创建一般js对象的几种方式
Jan 19 #Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 #Javascript
You might like
PHP的简易冒泡法代码分享
2012/08/28 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
javascript 三种编解码方式
2010/02/01 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
基于hashlib模块--加密(详解)
2017/06/21 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
TensorFlow损失函数专题详解
2018/04/26 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python多任务之协程的使用详解
2019/08/26 Python
pytorch进行上采样的种类实例
2020/02/18 Python
艺术专业大学生自我评价
2013/09/22 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
房屋出租协议书
2014/04/10 职场文书
教师党员个人总结
2015/02/10 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技