javascript 高级编程系列 - 函数

一、函数创建

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);
时间: 2024-10-17 04:03:00

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

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

javascript中的基本数据类型包括: Undefined, Null, Boolean, Number, String 5种数据类型 1. Undefined 类型 (只有一个值 undefined, 常被用来表示未初始化的变量) 如果一个变量未进行初始化则它的初始值为undefined, 数据类型为Undefined var myVar; myVar === undefined               // return true typeof myVar === 'undefine

JavaScript高级编程

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/07/05/writing-advanced-javascript.html Web应用程序(Web Applications)        从计算机纪元的黎明刚刚来临開始,不同平台间软件的互用性就一直是关注的焦点.为了尽可能实现用户的最大要求,软件公布者往往将流行软件从一个机器移植到另外一个机器上,这通常要花费数月的辛苦劳动,有时甚至是整个软件在新的硬件或者操作系统上的全然重写.随着计算机功能的不断强

读javascript高级编程11-事件

一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件. 3.DOM事件流 DOM2级事件包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 二.事件处理程序 事件处理程序就是响应某些事件的函数,如onclick等. 1. DOM0级事件处理程序 每个元素都有自己的事件处理程序属性,如o

JavaScript高级编程随笔

前言: 本人之前在博客园写过一遍关于MVC基础的一个小文章,由于当时各种原因没能继续坚持写下去,最近本人在学习JavaScript,想用自己的方式整理出来,主要是为了加深自己的印象,我还是一个前端的小学生,希望各位前端的前辈多指点.我会吧每一章节学到的看到的整理到我的博客园里,虽然这本书前面讲的很基础,我也会坚持发表文章.好了废话说到这里开始进入正题. Content: 本人现在准备要看的第一本书是<JavaScript高级编程>[第三版],这是一本比较经典的JS书籍,即使前面几章比较简单基础

JavaScript高级编程II

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中,我们介绍了两类JavaScript小工具及其源代码:浮动文本和弹出菜单.本文中,我们将继续介绍另外几个实用的JavaScript小工具,并着重说明其工作原理,因此你能够简单改动后应用到自己的程序中.本文中的JavaScript代码应该不用做不论什么改动就能够在当前全部主流浏览器上执行.所以,不用再费周折…… 

读javascript高级编程02-变量作用域

一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs="?debug=true"; with(location){ var url=href+qs; } return url; } buildUrl(); //result:http://www.fanxbao.com/?debug=true ②try...catch...中的catch语句块延长作用域链

读javascript高级编程07-引用类型、Object、Array

一.引用类型 ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法. 创建对象实例的方法时是用new 操作符加构造函数:var p=new Person(). 二.Object类型 1.创建Object实例两种方式: 使用new操作符跟Object构造函数. var o = new Object(); o.name = 'dami'; o.age = 25; 使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉. var o = { name: 'd

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

1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选,通过src属性指定代码的字符集,大多浏览器会忽略这个值,所以很少人使用 language:已放弃 src:可选,外部脚本的地址 type:可选,现在不推荐用“text/javascript”,考虑到约定俗成和最大限度的浏览器兼容,目前type属性的值还是text/javascript,不过,这个属性并不是必需

读javascript高级编程03-函数表达式、闭包、私有变量

一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); function test(){ alert(1); } 2.函数表达式不会进行函数提升,函数调用在函数声明之前的话会报错: test(); // test is not a function var test=function(){ alert(1); } 二.递归函数 递归函数是通过在函数内部调用自身实现的