一、函数创建

1. 函数声明 (出现在全局作用域,或局部作用域)

function add (a, b)
{
return a + b;
}
function add(a, b)
{
return add1(a,b);
function add1(m, n)
{
return m + n;
}
}   

2. 函数表达式

  • 作为普通变量
var add = function (a, b){
return a + b;
};
  • 作为对象方法
var obj = {
value: 0,
add: function(a, b){
return a + b;
}
};
  • 作为函数返回值
function add(a)
{
var m = a;
return function(n){
return m+n;
};
}
  • 作为函数参数
var numbers = [1, 2, 3, 4, 5, 4, 3, 2];
var mapResult = numbers.map(function(item, index, array){
return item * 2;
});

3. 函数提升

function add (a, b)
{
var result1 = add1(a, b);
var result2 = add2(a, b); console.log(result1); // a+b
console.log(result2); // 输出TypeError add2 is not a function
function add1(m, n)
{
return m + n;
} var add2 = function(m, n){
return m + n;
}
}

add1 函数定义在函数add内部,在执行它时他会被提升到函数的顶部,提升到顶部后由于是在调用之前,因此add1的调用会正常执行。add2也会被提升到函数顶部,但由于仅仅提升了add2的定义,没有提升它的实现,因此add2的值在调用时为undefined。

二、函数调用

1.函数调用模式


var add = function (a, b){
return a + b;
};
var  result = add(1, 2);

2. 方法调用模式

var obj = {
sum: 10,
increament: function(n){
return this.sum + n;
}
};
obj.increament(1);

3. 构造器调用模式

  • 构造函数以new 进行调用实例化时,this绑定到新创建的对象上, 并返回此对象
function Person(name, age)
{
this.name = name;
this.age = age;
} var personObj = new Person('leon', 30);
  • 构造函数前面如果没有new运算符,则作为普通函数调用,此时this指向window对象,返回undefined
function Person(name, age)
{
this.name = name;
this.age = age;
} var personObj = Person('leon', 30);
console.log(window.name); // 'leon'
console.log(window.age); // 30

4. Apply调用模式(包括call方法)

  • 指定调用上下文环境
var add = function (a, b){
return a + b;
}; add.apply(null, [1, 2]); // 当指定null时,函数内部的this指向window对象(浏览器环境)
  • 方法借用
function getParams ()
{
return Array.prototype.filter.call(arguments, function(item,index){
return item > 2;
});
}
getParams(2, 3, 4);
  • 实现继承
// 父类
function Person(name, age)
{
this.name = name;
this.age = age;
}
// 子类
function Children(gender)
{
Person.apply(this, ['leon', 5]); // 继承父类的name 和 age 属性
this.gender = gender;
} var boy = new Children('male');
console.log(boy.name); // 'leon'
console.log(boy.age); // 5

三、高级应用

1. 函数绑定 (作用是保证函数在执行时,上下文环境保持不变)

// 自定义绑定函数
function bind(fn, context)
{
return function(){
return fn.apply(context, arguments);
};
}
var obj = {
value: 0,
add : function(a, b){
this.value = a + b;
}
};
var add = bind(obj.add, obj);

注意:es5中函数已有原生bind方法

var obj = {
value: 0,
add : function(a, b){
this.value = a + b;
}
}; var add = obj.add.bind(obj);

2. 函数curry化 (通过对函数预设一些参数从而生成一个新的函数的过程)

function curry(fn)
{
var args = Array.prototype.slice.call(arguments, 1);
return function(){
return fn.apply(null, args.concat(Array.prototype.slice.call(arguments)));
};
} function add (n1, n2)
{
return n1 + n2;
} var curryAdd = curry(add ,2);
var result = curryAdd(3); console.log(result);

javascript 高级编程系列 - 函数的更多相关文章

  1. javascript 高级编程系列 - 基本数据类型

    javascript中的基本数据类型包括: Undefined, Null, Boolean, Number, String 5种数据类型 1. Undefined 类型 (只有一个值 undefin ...

  2. javascript 高级编程系列 - 继承

    1. 原型链继承 (缺点:子类继承父类的引用类型的属性值会在各个实例中共享,创建子类实例时无法向父类构造函数传递参数) // 定义父类构造函数 function SuperClass(father, ...

  3. javascript 高级编程系列 - 创建对象

    1. 工厂模式 function createPerson(name, age) { var obj = {}; obj.name = name; obj.age = age; obj.getName ...

  4. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  5. JavaScript高级编程———JSON

    JavaScript高级编程———JSON < script > /*JSON的语法可以表达一下三种类型的值 简单值:使用与javas相同的语法,可以在JSON中表达字符串.数值.布尔值和 ...

  6. JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))

    JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...

  7. JavaScript高级编程———数据存储(cookie、WebStorage)

    JavaScript高级编程———数据存储(cookie.WebStorage) <script> /*Cookie 读写删 CookieUtil.get()方法根据cookie的名称获取 ...

  8. JavaScript高级编程———基本包装类型String和单体内置对象Math

    JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...

  9. JavaScript高级编程——Date类型

    JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

随机推荐

  1. 九度oj 题目1374:所有员工年龄排序

    题目描述: 公司现在要对所有员工的年龄进行排序,因为公司员工的人数非常多,所以要求排序算法的效率要非常高,你能写出这样的程序吗? 输入: 输入可能包含多个测试样例,对于每个测试案例, 输入的第一行为一 ...

  2. OSU!(bzoj 4318)

    Description osu 是一款群众喜闻乐见的休闲软件.  我们可以把osu的规则简化与改编成以下的样子:  一共有n次操作,每次操作只有成功与失败之分,成功对应1,失败对应0,n次操作对应为1 ...

  3. Docker 组件如何协作?

    还记得我们运行的第一个容器吗?现在通过它来体会一下 Docker 各个组件是如何协作的. 容器启动过程如下: Docker 客户端执行 docker run 命令. Docker daemon 发现本 ...

  4. ibatis 字段类型为int时如何避免默认值得干扰

    在xml文件中配置查询语句时,通常都是采用以下方法: <select id="getByExample" resultMap="PgWtResult" p ...

  5. vue.js源码学习分享(四)

    /** * Generate a static keys string from compiler modules.//从编译器生成一个静态键字符串模块. */ function genStaticK ...

  6. 标准C程序设计七---61

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  7. 标准C程序设计七---55

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  8. 转载 linux 僵尸进程,讲的很透彻

    僵尸进程的产生和避免,以及wait,waitpid的使用 在fork()/execve()过程中,假设子进程结束时父进程仍存在,而父进程fork()之前既没安装SIGCHLD信号处理函数调用waitp ...

  9. poj 2112(二分+网络流)

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 15749   Accepted: 5617 ...

  10. AC日记——小行星 洛谷 P2711

    题目背景 pid=3437 题目描述 星云中有n颗行星,每颗行星的位置是(x,y,z).每次可以消除一个面(即x,y或z坐标相等)的行星,但是由于时间有限,求消除这些行星的最少次数. 输入输出格式 输 ...