一、函数创建

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. 1.ABP使用boilerplate模版创建解决方案

    1.到ABP框架的官网(http://www.aspnetboilerplate.com/),自动生成一个解决方案 每步注解: 第一步:AngularJS是一款比较火的SPA(Single Page ...

  2. 九度oj 1004

    题目1004:Median 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:17536 解决:4860 题目描述:                        Given an incre ...

  3. 【Luogu】P2709小B的询问(莫队算法)

    题目链接 md,1A率等于0. 烦死. 终于搞到一道莫队了qwq. 先对区间分块再按照块编号为第一关键字,右端点为第二关键字排序,然后每次端点移动1乱搞. 然后……就wa了. 然后有很多细节需要注意q ...

  4. HDU——2609How many(字符串的最小表示法+substr)

    How many Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  5. Linux下安装theano

    http://deeplearning.net/software/theano/install_ubuntu.html#install-ubuntu 以上链接为官网安装教程 在ubuntu中安装the ...

  6. YY的GCD(bzoj 2820)

    Description 神犇YY虐完数论后给傻×kAc出了一题给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对kAc这种 傻×必 ...

  7. Java程序员最常犯的错误盘点之Top 10

    1. 数组转ArrayList 为了实现把一个数组转换成一个ArrayList,很多Java程序员会使用如下的代码: Arrays.asList确实会返回一个ArrayList对象,但是该类是Arra ...

  8. 标准C程序设计七---37

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

  9. linux shmget shmctl

    shmgetint shmget(key_t key, size_t size, int flag);key: 标识符的规则size:共享存储段的字节数flag:读写的权限返回值:成功返回共享存储的i ...

  10. 彻底删除node_modules文件

    npm install rimraf -g rimraf node_modules