一、函数创建
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