`
huangyongxing310
  • 浏览: 494079 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

Javascript函数

阅读更多
Javascript函数


定义函数
使用function关键字来定义函数,分为两种形式:
1.声明式函数定义
function add(m,n) {
    alert(m+n);
}

这种方式等同于构造一个Function类的实例的方式:
var add = new Function("m", "n", "alert(m+n);");


2.函数表达式
//将一个匿名函数赋值给变量add
var add = function(m, n) {
	alert(m + n);
};
add(1, 2);//3


//函数表达式作为参数传递给其他函数
var arr = [1, 3, 4, 2];
arr = arr.sort(function(a, b) {
	return a - b;
});
alert(arr);//1,2,3,4


//定义后立即调用
alert( function(m, n) {
	return m + n;
}(1, 2));


//函数表达式也可以定义名称(如用于递归)
var f=function fact(x){
	if(x<1) {
		return 1;
	}else{
		return x*fact(x-1);
	}
};




声明式函数定义和函数表达式的区别
1.声明式函数,定义语句属于顶级作用域范围,函数调用语句可写在函数声明语句之前(意思就是声明式函数是Javascript运行前进行运行环境)
add(1, 2);//3
function add(m, n) {
    alert(m + n);
}


2.函数表达式定义的函数在定义之前无法调用
//TypeError: add is not a function
add(1, 2);
var add = function(m, n) {
    alert(m + n);
};




函数的返回值
1.Javascript中的函数不需要声明返回类型,使用return关键字返回一个值。
2.若函数不包含return语句,或者直接使用"return;",则函数的返回值为undefined。



嵌套函数
function add(m, n) {
    function d(x) {
        return x * 2;
    }

    return d(m) + d(n);
}

alert(add(1, 2));//6




调用函数
1.普通的函数调用
var result = add(1, 2);


2.方法调用
所谓方法就是将一个函数赋给一个对象的属性:
//定义一个函数
function hello(name) {
	alert('hello,' + name);
};
var user = {};

//赋值给user的sayHi属性
user.sayHi = hello;

//方法调用
user.sayHi('张三');



JavaScript函数预编译期与执行期
1.事实上,JS的解析过程分为两个阶段:预编译期(预处理)与执行期。
2.预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理
函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。
<script type="text/javascript">
     Fn();  //执行结果:"执行了函数2",同名函数后者会覆盖前者
     function Fn(){ //函数1
        alert("执行了函数1");
     }

     function Fn(){  //函数2
        alert("执行了函数2");
     }
</script>


<script type="text/javascript">
      Fn();  //执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使Fn()调用函数放在声明函数前也能执行。
      function Fn(){ //声明式函数
         alert("执行了声明式函数");
      }

      var Fn = function(){  //赋值式函数
         alert("执行了赋值式函数");
      }
</script>


//代码块一
<script type="text/javascript">
      alert(str);//浏览器报错,但并没有弹出信息窗
</script>
//代码块二
<script type="text/javascript">
      alert(str); //弹窗"undefined"
      var str = "aaa";
</script>
//js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值,所以导致代码块二中的变量是unfiened的,而代码一中的变量是完全不存在的,所以浏览器报错。



<script type="text/javascript">
      Fn();  //浏览器报错:"undefined"
</script>
<script type="text/javascript">
      function Fn(){ //函数1
          alert("执行了函数1");
      }
</script>

1.为什么运行上面的代码浏览器会报错呢?声明函数不是会在预处理期就会被处理了吗,怎么还会找不到Fn()函数呢?
其实这是一个理解误点,我们上面说了JS引擎是按照代码块来顺序执行的,其实完整的说应该是按照代码块来进行预处
理和执行的,也就是说预处理的只是执行到的代码块的声明函数和变量,而对于还未加载的代码块,是没法进行预处理
的,这也是边编译边处理的核心所在。



嵌套函数中的this
1.嵌套函数中,内层函数不会继承外层函数的this,即当内层函数作为方法调用时,内层函数的this指向当前调用对象;
2.当内层函数作为函数调用时,this的值为全局对象(非严格模式)或者undefined(严格模式)。
3.怎样在内层函数中访问外层函数的this呢?通常将this保存在一个局部变量中,通过变量来访问。
var obj = {
	f : function() {//作为方法调用
		var self = this;
		console.log(this === obj);//true,this指向当前对象

		f1();//作为函数调用

		function f1() {
		console.log(this === obj);//false,this为全局对象或者undefined
		console.log(self === obj);//true,self指向外层this,即当前对象
		}
	}
};



构造函数调用
1.当使用new关键字创建一个对象时,即调用了构造函数。构造函数若没有形参,可以省略圆括号
var obj = new Object();
//等价于
var obj = new Object;


2.调用构造函数,创建了一个新对象,这个新对象会成为该构造函数的调用上下文(this的值):
function User(name) {
    this.name=name;
    console.debug(this);
}

var user = new User('张三');




call() 和 apply() 间接调用
1.Javascript中函数也是对象,也拥有方法。其中 call() 和 apply() 可以用来间接调用函数。
2.call() 的第一个参数用来指定调用上下文(即this的值),后面的参数是传入调用函数的实参。
var name = 'A';
var user = {
	name : 'B'
};

function showName() {
	alert(this.name);
}

showName();//A,this为全局对象
showName.call(user);//B,this为user对象


apply() 和 call() 类似,区别在于,后面的实参需要以数组的形式传递



参考原文:http://www.admin10000.com/document/3752.html
参考原文:http://www.cnblogs.com/luotaoyeah/p/3823294.html
分享到:
评论

相关推荐

    javascript函数式编程

    JavaScript函数式编程是利用JavaScript语言编写函数式风格代码的一种编程范式。函数式编程强调使用纯函数、避免副作用、函数的不可变性以及利用高阶函数等概念。通过阅读《JavaScript函数式编程指南》,读者可以了解...

    JavaScript函数式编程.pdf

    不过,由于【标题】中提供了文档的名称——"JavaScript函数式编程.pdf",我可以根据这个名称扩展出关于JavaScript函数式编程的知识点。 JavaScript函数式编程的知识点非常丰富,涉及很多方面的内容,下面将详细介绍...

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    C#与JAVASCRIPT函数的相互调用 C#调用JAVASCRIPT函数的调用 JAVASCRIPT调用C#函数的调用

    javascript函数速查

    JavaScript函数是编程语言的核心组成部分,它是一段可重复使用的代码块,可以接受参数并返回值。在JavaScript中,函数不仅可以作为表达式,还能作为变量赋值、作为参数传递以及作为返回值。本速查指南将深入探讨...

    javascript函数速查手册

    JavaScript函数是编程语言的核心组成部分,尤其在Web开发中起着至关重要的作用。这份"JavaScript函数速查手册"涵盖了JavaScript函数的各个方面,旨在帮助开发者快速查找和理解各种函数的用法和特性。 一、函数基础 ...

    QT和网页中的JavaScript函数进行相互调用的实现

    - 这里的回调函数用于处理JavaScript函数的异步返回结果,如果需要同步获取结果,可以使用`QWebEngineScript`来注册一个全局JavaScript对象,然后通过该对象调用JavaScript函数。 2. **JavaScript调用QT函数**: ...

    javascript 函数教程(由浅入深)

    以下是关于JavaScript函数的详细讲解: 1. **函数定义**: - 无参函数定义:`function 函数名 () { 代码... }` - 有参函数定义:`function 函数名 (参数列表) { 代码... }` - 参数列表中的参数可以是变量、常量...

    JavaScript函数式编程pdf

    JavaScript函数式编程是一种编程范式,它将计算视为数据处理,并强调使用无副作用的纯函数。在JavaScript中,函数式编程允许我们写出更简洁、可读性更强的代码,同时提高了代码的复用性和测试性。《JavaScript函数式...

    javascript函数式编程 underscore.js

    JavaScript函数式编程是一种编程范式,它强调使用函数来组织代码,将计算视为一系列惰性求值的操作。Underscore.js是一个轻量级的JavaScript实用库,它为开发者提供了大量函数式编程工具,使得在JavaScript中实践...

    JavaScript函数(源代码)

    JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)JavaScript函数(源代码)...

    JavaScript 函数式编程 (英文版)

    JavaScript函数式编程是一种编程范式,它强调将计算视为对数据进行操作的纯函数,而不是通过改变状态或显式指令来控制程序流程。在JavaScript中,函数式编程可以帮助我们写出更简洁、可读性强且易于测试的代码。下面...

    JavaScript函数式编程

    JavaScript函数式编程

    javascript指南和函数式编程

    而《JavaScript函数式.zip》可能是一份关于JavaScript函数式编程的资料集合,函数式编程是一种编程范式,强调使用函数和避免改变状态。其中可能涵盖以下知识点: 1. **纯函数**:理解纯函数的定义,即给定相同的...

    第7节 JavaScript函数及应用.rar

    第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数...

Global site tag (gtag.js) - Google Analytics