学好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 相关文章推荐
JQuery中getJSON的使用方法
Dec 13 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
js验证框架实现代码分享
May 18 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jquery 简单的进度条实现代码
2010/03/11 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
python开发之thread线程基础实例入门
2015/11/11 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python基础 range的用法解析
2019/08/23 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
调解员先进事迹材料
2014/02/07 职场文书
诚信承诺书模板
2014/05/26 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
2015员工年度考核评语
2015/03/25 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python