函数

定义函数

JS中有3种定义函数的方法:

函数声明

用函数声明定义函数的方式如下:

function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}

上述abs()函数的定义如下:

  • function指出这是一个函数定义;
  • abs是函数的名称;
  • (x)括号内列出函数的参数,多个参数以,分隔;
  • { ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。

注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。

函数表达式

用函数表达式定义函数的方式如下:

var abs = function(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}

在这种方式下,function (x) { ... }是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量abs,所以,通过变量abs就可以调用该函数。

函数构造法

// 参数必须加引号
var add = new Function('x','y','return x+y');
add(2,3); // 5

一般不推荐用这种方法定义函数,因为这种语法会导致解析两次代码(第一次是解析常规ECMAScript代码,第二次是解析传入构造函数中的字符串),从而影响性能。

函数声明和函数表达式的差别

对于函数声明,JS解析器会在预解析阶段优先读取函数声明的代码,以确保函数能够被引用到;而对于函数表达式,只有在执行到相应的语句时才进行解析。在实际中,具体表现在:当使用函数声明的形式来定义函数时,可将调用放在函数声明之前,而使用函数表达式,这样做的话会报错。

add(1,2); // 3
function add(x, y) {
return x + y;
}
add(2,3); // 5
add(1,2); // 报错
var add = function(x, y) {
return x + y;
}
add(2,3); // 5

调用函数方式

1、普通调用

调用函数时,按顺序传入参数即可:

abs(10); // 返回10
abs(-9); // 返回9

由于JavaScript允许传入任意个参数而不影响调用,因此传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数:

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

2、方法调用

//定义一个函数
function hello(name) {
alert('hello,' + name);
};
var user = {}; //赋值给user的sayHi属性
user.sayHi = hello; //方法调用
user.sayHi('张三');

3、构造函数调用

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('张三');

4、call和apply

call和apply的作用是改变函数执行时的上下文,即改变函数运行时的this指向。

一言不合贴代码:

function Person(name){
this.name = name;
}
Person.prototype = {
constructor: Person,
showName: function(){
console.log(this.name);
}
}
var person = new Person('Jeepeng');
person.showName(); // Jeepeng var animal = {
name: 'cat'
} // 1 call
person.showName.call(animal); // cat
// 2 apply
person.showName.apply(animal); // cat

二者的作用完全一样,区别只在于这两个函数接受的参数形式不同。

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

一言不合贴代码:

function sum() {
var length = arguments.length;
var result = 0;
for(var i = 0; i < length; i++) {
result += arguments[i]; // 不严谨,仅为了说明问题
}
return result;
} sum(1,2,3,4,5); // 15 sum.call(null, 1,2,3,4,5); // 15
sum.apply(null, [1,2,3,4,5]); // 15

当你的参数是明确知道数量时,用 call,而不确定的时候,用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来便利所有的参数。

5-JS函数的更多相关文章

  1. 3.3 js函数

    1.函数语法: 函数声明的方式:function 函数名(参数1,参数2-){//函数体;}函数调用:函数名(参数1,参数2-); 函数内不一定都指定返回值. 如果需要指定返回值,可用 return ...

  2. Js函数function基础理解

    正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...

  3. js函数表达式和函数声明的区别

    我们已经知道,在任意代码片段外部添加包装函数,可以将内部的变量和函数定义"隐 藏"起来,外部作用域无法访问包装函数内部的任何内容. 例如: var a = 2; function ...

  4. 通用js函数集锦<来源于网络> 【二】

    通用js函数集锦<来源于网络> [二] 1.数组方法集2.cookie方法集3.url方法集4.正则表达式方法集5.字符串方法集6.加密方法集7.日期方法集8.浏览器检测方法集9.json ...

  5. 通用js函数集锦<来源于网络/自己> 【一】

    通用js函数集锦<来源于网络/自己>[一] 1.返回一个全地址2.cookie3.验证用户浏览器是否是微信浏览器4.验证用户浏览器是否是微博内置浏览器5.query string6.验证用 ...

  6. 100多个基础常用JS函数和语法集合大全

    网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为//3.传统 ...

  7. JS函数

    1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏 ...

  8. js函数和运算符

    函数是由事件驱动或者它被调用时执行可重复使用的代码块. <script> function myFunction(){ Alert(“hello World!”): } </scri ...

  9. JavaScript学习03 JS函数

    JavaScript学习03 JS函数 函数就是包裹在花括号中的代码块,前面使用了关键词function: function functionName() { 这里是要执行的代码 } 函数参数 函数的 ...

  10. JSF页面中使用js函数回调后台bean方法并获取返回值的方法

    由于primefaces在国内使用的并不是太多,因此,国内对jsf做系统.详细的介绍的资料很少,即使有一些资料,也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象(皮毛而已),它们的语句甚至还是错误的, ...

随机推荐

  1. js对象遍历

    js对象遍历可以使用比较普遍的方法:如下 var ss={aa:"aa",bb:"bb"}; for(var s in ss){ console.info(&q ...

  2. 学习K&R时初学者经常遇到的一个问题——EOF

    学习K&R时初学者经常遇到的一个问题——EOF

  3. git-gui

    使用Git.Git GUI和TortoiseGit http://zengrong.net/post/1722.htm 但云桌面不能安装,则TortoiseGit不能使用! 只能想到用totalcmd ...

  4. 分页实体类:PageBean

    package com.eaju.soms.entity.custom; import java.util.List; @SuppressWarnings("rawtypes")p ...

  5. 为什么drop table的时候要在checking permissions花很长时间?

    昨天,我drop一个表的时候在checking permissions花了20s+,这个时间花在哪里了呢?经常查找发现我的配置文件innodb_file_per_table=1的,innodb需要遍历 ...

  6. MySQL5.5半同步模式

    MySQL5.5支持半同步的复制模式,什么是半同步的? 1. MySQL5.5之前的Master-SLave的复制模式是异步的,这里的文档有详细的说明;

  7. 2.1:你的第一个AngularJS App

    本章,带你体验一个简单的开发流程,将一个静态的使用模拟数据的应用,变成具有AngularJS特性的动态web应用.在6-8章,作者将展示如何创建一个更复杂,更真实的AngularJS应用. 1.准备项 ...

  8. iOS中 项目开发易错知识点总结

    点击return取消textView 的响应者 - (BOOL)textFieldShouldReturn:(UITextField *)textField { [_contactTextFiled  ...

  9. 30、springmvc

    第一章回顾JavaWeb中的MVC设计模式 1)MVC这种设计模式,不光运用于Web领域,而且也能用于非Web领域 2)今天说的MVC特指一种表现层设计模式,不限于Java语言 第二章回顾struts ...

  10. 4、BOM编程/正则表达式

    1.    BOM编程 1.1. BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行jav ...