JavaScript Function函数类型介绍

 // 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法;

// 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针;

一 函数的声明方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.函数声明方式
function box(num1,num2){
return num1+num2;
}
 
2.函数表达式定义函数
var box = function(num1,num2){  // 通过变量box即可引用函数;
return num1+num2;
};                  // 注意函数末尾有一个分号,就像声明其他变量时一样;
  var another = box;         // 使用不带圆括号的函数名是访问函数指针;而非调用函数;
    console.log(another(10,10));  
3.使用Function构造函数
var box = new Function('num1','num2','return num1+num2');
// 第三种方式不推荐,这种语法会导致解析两次代码(第一次解析常规JS代码,第二次解析传入构造函数中的字符串),从而影响性能;
// 可以通过这种语法来理解"函数是对象,函数名是指针"的概念;

二 作为值的函数

1
2
3
4
5
6
7
8
9
10
11

// JS中的函数名本身就是变量,所以函数也可以作为值来使用;
// 也就是说,不仅可以像传参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回;
function box(sumFunction,num){    // 无论第一个参数传递进来的是什么函数,
return sumFunction(num);     // 它都会返回执行第一参数后的结果;
}
function sum(num){
return num+10;
}
// 传递函数到另一个函数里;
    // 要访问函数的指针不执行函数的话,须去掉函数名后的圆括号;
var result = box(sum,10); // =>20;

三 函数内部属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 函数内部有两个特殊的对象:arguments和this;
 
// 1.arguments:是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数;
// arguments这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数;
function box(num){
if(num<=1){
return 1;
}else{
return num*arguments.callee(num-1); // 使用arguments.callee来执行box本身;
}
}
 
// 2.this:引用的是函数据以操作的对象,或者说函数调用语句所处的作用域;
// 当在全局作用域调用函数时,this对象引用的就是window;
window.color = "red";
alert(this.color); // 打印全局的color;=>red;
var box = {
color:'blue',
sayColor:function(){
alert(this.color); // 打印局部的color;=>blue;
}
};

四 函数属性和方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// JS中的函数是对象,因此函数也有属性和方法;包含length和prototype;
 
// length属性:表示函数希望接收到命名参数的个数;
function box(name,age){
alert(name+age);
}
alert(box.length); // 2s
 
// prototype属性:它是保存所有实例方法的真正所在,也就是原型;
// prototype包含两个方法:apply()和call(),每个函数都包含这两个非继承而来的方法;
// 这两个方法的用途都在特定的作用域中调用函数,实际上等于设置函数体内this对象的值;
var color = 'red';
var box = {
color = 'blue';
}
function sayColor({
alert(this.color);
});
sayColor(); // 作用域在window;
sayColor.call(this); // 作用域在window;
sayColor.call(window); // 作用域在window;
sayColor.call(box); // 作用域在box,对象冒充;=>red;
// 使用call(box)方法的时候,sayColor()方法的运行环境已经变成了box对象里了;
// 使用call()或apply()来扩充作用域的最大好处,就是对象不需要与方法发生任何耦合关系;
// 耦合:相互关联的意思,扩展和维护会发生连锁反应;
// 也就是说,box对象和sayColor()方法之间不会有多余的关联操作,比如:box.sayColor = sayColor;
 
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
function Cat(){
this.name = "Cat";
}
var animal = new Animal();
var cat = new Cat();
//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用。
//输入结果为"Cat"
animal.showName.call(cat,",");
//animal.showName.apply(cat,[]);

五 小结
1 // 函数实际上是Function类型的实例,因此函数也是对象;而这一点正式JavaScript最有特色的地方;
2 // 由于函数对象,所以函数也拥有方法,可以用来增强其行为;

时间: 2024-09-23 12:22:19

JavaScript Function函数类型介绍的相关文章

JavaScript Function函数类型介绍_javascript技巧

// 在JS中,Function(函数)类型实际上是对象;每个函数都是Function类型的实例;而且都与其他引用类型一样具有属性和方法; // 由于函数是对象,因此函数名实际上也是一个指向函数对象的指针; 一 函数的声明方式 1.函数声明方式 function box(num1,num2){ return num1+num2; } 2.函数表达式定义函数 var box = function(num1,num2){ // 通过变量box即可引用函数; return num1+num2; };

JavaScript function函数种类详解_javascript技巧

本篇主要介绍普通函数.匿名函数.闭包函数 目录 普通函数:介绍普通函数的特性:同名覆盖.arguments对象.默认返回值等. 匿名函数:介绍匿名函数的特性:变量匿名函数.无名称匿名函数. 闭包函数:介绍闭包函数的特性.   1. 普通函数1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 =

JavaScript function函数种类

原文:JavaScript function函数种类 本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 function ShowName(name) { alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. var n1 = 1; function add(value1) { return n1 + 1; } alert(add(n1));//调用

javascript基本包装类型介绍_javascript技巧

为了便于操作基本类型值,ECMAScript 提供了 3 个特殊的引用类型:Boolean.Number和 String.这些类型与其他引用类型相似,但同时也具有与各自的基本类型相应的特殊行为.实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而能够调用一些方法来操作这些数据. 一.基本包装类型概述 var box = 'Mr. Lee';//定义一个字符串 var box2 = box.substring(2);//截掉字符串前两位 alert(box2);//

浅谈JavaScript function函数种类_基础知识

本篇主要介绍普通函数.匿名函数.闭包函数 1.普通函数介绍 1.1 示例 复制代码 代码如下: function ShowName(name) {     alert(name); } 1.2 Js中同名函数的覆盖 在Js中函数是没有重载,定义相同函数名.不同参数签名的函数,后面的函数会覆盖前面的函数.调用时,只会调用后面的函数. 复制代码 代码如下: var n1 = 1;   function add(value1) {     return n1 + 1; } alert(add(n1))

Javascript 判断函数类型完美解决方案_javascript技巧

但是,有一些细节并不为我们所熟知.John Resig 在分析了这些细节之后,为我们提供了一个完美的解决方案,本文将作详细介绍: 一.传统方法不为人所知的细节 毫无疑问,在判断函数类型时,我们使用的是typeof方法,比如: 复制代码 代码如下: function fn(){ //content } alert(typeof fn)//结果是"function". 但是,该方法在一些浏览器中并不是像我们想像的那样工作. 1.Firefox2和Firefox3 在这两个浏览器中,用typ

javascript中函数用法介绍(匿名函数,函数传值,参数)(1/2)

第一课 -- 匿名函数 一.什么是匿名函数? 在Javascript定义一个函数一般有如下三种方式: 1.函数关键字(function)语句:  代码如下 复制代码 function fnMethodName(x){alert(x);} 2.函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} 3.Function()构造函数: var fnMethodName = new Function('x','alert(

javascript时间函数基础介绍_javascript技巧

javascript时间函数 javascript提供了Date对象来进行时间和日期的计算. Date对象有多种构造函数: new Date() //当前时间new Date(milliseconds) //距离起始时间1970年1月1日的毫秒数new Date(datestring) //字符串代表的日期与时间.此字符串可以使用Date.parse()转换,比如"Jannuary 1, 1998 20:13:15"new Date(year, month, day, hours, m

javascript基本包装类型介绍

 为了便于操作基本类型值,ECMAScript 提供了 3 个特殊的引用类型:Boolean.Number和 String.这些类型与其他引用类型相似,但同时也具有与各自的基本类型相应的特殊行为.实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而能够调用一些方法来操作这些数据. 一.基本包装类型概述 1 2 3 var box = 'Mr. Lee';//定义一个字符串 var box2 = box.substring(2);//截掉字符串前两位 alert(b