学好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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
js a标签点击事件
Mar 30 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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 无限级分类
2017/05/04 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js实现图片实时时钟
2020/01/15 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python redis 删除key脚本的实例
2019/02/19 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python调用C语言程序方法解析
2020/07/07 Python
物流管理专业职业生涯规划书
2014/01/06 职场文书
大学生志愿者感言
2014/01/15 职场文书
国际会议邀请函范文
2014/01/16 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
洗车工岗位职责
2014/03/15 职场文书
护士个人自我鉴定
2014/03/24 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
离婚协议书格式
2014/11/21 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang