浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序


Posted in Javascript onFebruary 19, 2017

在Javascript定义一个函数一般有如下三种方式:

函数关键字(function)语句:

function fnMethodName(x){alert(x);}

函数字面量(Function Literals):

var fnMethodName = function(x){alert(x);}

Function()构造函数:

var fnMethodName = new Function(‘x','alert(x);') // 由Function构造函数的参数个数可变。最后一个参数写函数体,前面的参数写入参。

上面三种方法定义了同一个方法函数fnMethodName,第1种就是最常用的方法,后两种都是把一个函数复制给变量fnMethodName,而这个函数是没有名字的,即匿名函数。

函数的执行顺序:

例1.

test1();

function test1() {  //函数声明

  alert("1111");

}

test2();

var test2 = function(){   //函数字面量

  alert("2222");

}

test3();
var test3 = new Function("alert(3333);");  //运行时,初始化函数体

执行结果:弹出1111,但是没有弹出222, 3333

原理:弹出1111 是因为JS函数声明提前

没有弹出2222, 3333,是因为函数字面量不是函数声明,函数字面量表示方法是在运行时解析的,在调用test2()之前,函数字面量的函数体还没有声明。

例2.

function f(){return 1;}  
console.log(f());   // 第四个函数把第一个函数覆盖
var f = new Function("return 2;");
console.log(f());   // 第二个函数把第四个函数覆盖
var f = function() {return 3;}
console.log(f());   // 第三个函数把第二个函数覆盖
function f(){return 4;}
console.log(f());   // 第四个函数已经被覆盖
var f = new Function("return 5;");
console.log(f());   // 第五个函数把第三个函数覆盖
var f = function(){return 6;}
console.log(f());   // 第六个函数把第五个函数覆盖

执行结果: 4 2 3 3 5 6

原理: 先找出函数声明,“返回值是4的函数声明”覆盖了“返回值是1的函数声明”。所以第一个f()的结果是4 。

函数作用域:

var k = 4;
 window.onload=function() {

   var k=1;
   function t1() {
     var k = 2;

     function test(){return k;}
     console.info(test()); // 弹出 2

     var test = function(){return k;};
     console.info(test());  // 弹出 2

     var test = new Function("return k;");  // 每次执行的时候,动态的new,顶级作用域,无法获得局部变量
     console.info(test());  // 弹出 4

   }
   t1();
};

二、函数字面量和Function()构造函数的区别

虽然函数字面量是一个匿名函数,但语法允许为其指定任意一个函数名,当写递归函数时可以调用它自己,使用Function()构造函数则不行。

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

Function()构造函数允许运行时Javascript代码动态的创建和编译。在这个方式上它类似全局函数eval()。

Function()构造函数每次执行时都解析函数主体,并创建一个新的函数对象。所以当在一个循环或者频繁执行的函数中调用Function()构造函数的效率是非常低的。相反,函数字面量却不是每次遇到都重新编译的。

用Function()构造函数创建一个函数时并不遵循典型的作用域,它一直把它当作是顶级函数来执行。

var y = “global”;

function constructFunction() {

var y = “local”;

return new Function(“return y”); // 无法获取局部变量  }

alert(constructFunction()()); // 输出 “global”

函数直接量:

只要是表达式语法,脚本宿主就认为 function 是一个直接量函数,如果什么都不加,光以 function 开头的话则认为是一个函数声明,把 function 写进一个表达式内部,比如四则运算,宿主也会将其当作是一个直接量,如下:

var a = 10 + function(){
return 5;
}();

夸张一点,如下:

(function(){
alert(1);
} ) ( );
( function(){
alert(2);
} ( ) );
void function(){
alert(3);
}()
0, function(){
alert(4);
}();
-function(){
alert(5);
}();
+function(){
alert(6);
}();
!function(){
alert(7);
}();
~function(){
alert(8);
}();
typeof function(){
alert(9);
}();

js中定义函数的方式有多种,函数直接量就是其中一种。如var fun = function(){}, 这里function如果不赋值给fun那么它就是一个匿名函数。

好,看看匿名函数的如何被调用。

1、执行后得到返回值的函数调用

//方式一,调用函数,得到返回值。强制运算符使函数调用执行
(function(x,y){
alert(x+y);
return x+y;
}(3,4));

//方式二,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用在去调用执行
(function(x,y){
alert(x+y);
return x+y;
})(3,4);

2、执行后忽略返回值

//方式三,调用函数,忽略返回值
void function(x) {
x = x-1;
alert(x);
}(9);

嗯,最后看看错误的调用方式

//错误的调用方式
function(x,y){
alert(x+y);
return x+y;
}(3,4);

三、应用实例的一些说明

对象直接量创建一个对象:

var obj = {x:[1,2],y:23};

代码跟下面是一样的。

var obj=new Object();
obj.x=new Array(1,2);
obj.y=23;

测试:

for(var i in obj) alert(obj[i]);

函数直接量:它是一个表达式而不是语句。
(function(){})()

如下例:

(function(){
document.write(“some script code”);
})()

var a=(function(s){return s})(“abc”);
alert(a);
var b=function(s){return s};
alert(b(“abc”));

这个如何解释呢

大家应该记得这种写法

var a=function (){}

那么怎么运行a呢,那么就是a()

同样的道理,我们不通过a这个变量来存那么是如何写法,就是

function(){}()

但是你会发现这样是错的

因为解析引擎解析的时候,解析的时候发现}判断到了函数结束了

并没有把那个函数作为块来运行

那么加上()是强制把function那块作为块

JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式

1. 方法调用模式:

先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来执行方法,this即指当前的myobject对象。

var blogInfo={
blogId:123,

blogName:"werwr",

showBlog:function(){alert(this.blogId);}
};

blogInfo.showBlog();

2.函数调用模式

定义一个函数,设置一个变量名保存函数,这时this指向到window对象。

var myfunc = function(a,b){
return a+b;
}

alert(myfunc(3,4));

3.构造器调用模式

定义一个函数对象,在对象中定义属性,在其原型对象中定义方法。在使用prototype的方法时,必须实例化该对象才能调用其方法。

var myfunc = function(a){
this.a = a;
};
myfunc.prototype = {

show:function(){alert(this.a);}
}

var newfunc = new myfunc("123123123");
newfunc.show();

4.apply,call调用模式

var myobject={};
var sum = function(a,b){
return a+b;
};
var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]); 
alert(sum2);

以上这篇浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
layui表格实现代码
May 20 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
详解Vue之事件处理
Jul 10 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 #Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 #Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 #Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 #Javascript
jQuery实现一个简单的轮播图
Feb 19 #Javascript
js 博客内容进度插件详解
Feb 19 #Javascript
ajax接收后台数据在html页面显示
Feb 19 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
php无限级分类实现方法分析
2016/10/19 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
Three.js快速入门教程
2016/09/09 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python迭代和迭代器详解
2016/11/10 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
Python多进程fork()函数详解
2019/02/22 Python
python队列Queue的详解
2019/05/10 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
AJax面试题
2014/11/25 面试题
营销专业应届生求职信
2013/11/26 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年技术员工作总结
2015/04/10 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers