这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇浅谈 js 函数三种定义方式 & 四种调用方式 & 调用顺序。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在 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 函数三种定义方式 & 四种调用方式 & 调用顺序就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0526/327487.html