一、函数创建

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. http.server()的理解

    http.server()相当于实例化一个server,等价于http.createServer(). 以下为个人理解 http.server()为创建一个http服务,http.server()可以 ...

  2. RHEL 7.3修改网卡命名规则为ethX

    RHEL 7网卡默认命名规则:以太网卡(Ethernet)为enX,无线网卡(WLAN)为wlX,修改网卡命名规则为ethX如下: 1.修改/etc/sysconfig/grub文件,添加net.if ...

  3. 【bzoj2115】[Wc2011] Xor DFS树+高斯消元求线性基

    题目描述 输入 第一行包含两个整数N和 M, 表示该无向图中点的数目与边的数目. 接下来M 行描述 M 条边,每行三个整数Si,Ti ,Di,表示 Si 与Ti之间存在 一条权值为 Di的无向边. 图 ...

  4. 本博客由CSDN迁移而来,以前的博文可能显示不正常

    如题,原博客地址 http://blog.csdn.net/vicjiao 或点击右侧友链

  5. BZOJ1880 [Sdoi2009]Elaxia的路线 【最短路 + dp】

    题目 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w每天都要奔波于宿舍和实验室之间,他们 希望在节约时间的前提 ...

  6. LCT(Link-Cut Tree)

    Link-cut tree(LCT)[可以理解为树链剖分+splay] 给出如下定义: access(x):访问x节点 perferred child:若以x为根的子树中最后被访问的节点在以x的儿子y ...

  7. APIO2018 题解

    坑了好久,补一补. 话说我当时去参加 $APIO2018$ 了,不过纯粹打铁…… 我的程序交道人家毛子的网站上, $c++14$ 编译器不停地给我编 $RE$,只记得好像是结构体排序的问题(删掉那个排 ...

  8. os.system() 和 os.popen()

    1.os.popen(command[, mode[, bufsize]])  os.system(command) 2.os.popen() 功能强于os.system() , os.popen() ...

  9. LeetCode OJ--Binary Tree Level Order Traversal II

    http://oj.leetcode.com/problems/binary-tree-level-order-traversal-ii/ 树的层序遍历,和上一道题相比,对结果做一个顺序调整 reve ...

  10. BZOJ 4568 [Scoi2016]幸运数字(树链剖分 + 异或线性基)

    题目链接  BZOJ 4568 考虑树链剖分+线段树维护每一段区域的异或线性基 对于每个询问,求出该点集的异或线性基.然后求一下这个线性基里面能异或出的最大值即可. #include <bits ...