学好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 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
Jquery 设置标题的自动翻转
Oct 03 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
原生JS实现烟花效果
Mar 10 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缓存设计实现代码
2011/09/30 PHP
PHP编码转换
2012/11/05 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
详解Python中的join()函数的用法
2015/04/07 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python读写文件基础知识点
2019/06/10 Python
Python字符串对象实现原理详解
2019/07/01 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
财务主管的岗位职责
2013/12/30 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
销售员试用期自我评价
2014/09/15 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
教师工作表现评语
2014/12/31 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Vue的生命周期一起来看看
2022/02/24 Vue.js