javascript函数式编程要掌握的知识点讲解

440 查看

阅读目录

理解call和apply 及arguments.callee
闭包的理解
javascript中的this详解
理解函数引用和函数调用的区别
理解js中的链式调用
理解使用函数实现历史记录–提高性能
理解通过Function扩展类型
理解使用模块模式编写代码
理解惰性实列化
推荐分支函数(解决兼容问题的更好的方法)
惰性载入函数（也是解决兼容问题的）
理解函数节流

回到顶部

一：理解call和apply 及arguments.callee

ECMAScript3给Function的原型定义了两个方法，他们是Function.prototype.call 和 Function.prototype.apply. 其实他们的作用是一样的，只是传递的参数不一样而已；

1. apply; 接受2个参数，第一个参数指定了函数体内this对象的指向，第二个参数为一个类似数组的集合，比如如下代码：

var yunxi = function(a,b){

console.log([a,b]); // [1,2]

console.log(this === window); // true

};

yunxi.apply(null,[1,2]);

如上代码，我们第一个参数传入null，函数体内默认会指向与宿主对象，即window对象；因此我们可以在yunxi函数内打印下值为true即可看到：

下面我们来看看使用call方法的实例如下：

var yunxi = function(a,b){

console.log([a,b]); // [1,2]

console.log(this === window); // true

};

yunxi.call(null,1,2);

可以看到 call方法的第二个参数是以逗号隔开的参数；

那么call和apply用在什么地方呢？

1. call和apply 最常见的用途是改变函数体内的this指向，如下代码:

var longen = {

name:'yunxi'

};

var longen2 = {

name: '我叫涂根华'

};

var name = "我是来测试的";

var getName = function(){

return this.name;

};

console.log(getName()); // 打印 "我是来测试的";

console.log(getName.call(longen)); // 打印 yunxi

console.log(getName.call(longen2)); // 打印 "我叫涂根华"

第一次调用 getName()方法，因为它是普通函数调用，所以它的this指向与window，因此打印出全局对象的name的值；

第二次调用getName.call(longen); 执行这句代码后，getName这个方法的内部指针this指向于longen这个对象了，因此打印this.name实际上是longen.name，因此返回的是name=”yunxi”;

但是this指针也有列外的情况，比如一个点击元素，当我们点击一个元素的时候，this指针就指向与那个点击元素，但是当我们在内部再包含一个函数后，在函数内再继续调用this的话，那么现在的this指针就指向了window了；比如如下代码：

document.getElementById("longen").onclick = function(){

console.log(this); // this 就指向于div元素对象了

var func = function(){

console.log(this); // 打印出window对象

}

func();

}

如上代码。可以看到外部this指向与被点击的那个元素，内部普通函数调用，this指针都是指向于window对象。但是我们可以使用call或者apply方法来改变this的指针的；如下代码：

document.getElementById("longen").onclick = function(){

console.log(this); // this 就指向于div元素对象了

var func = function(){

console.log(this); // 就指向于div元素对象了

}

func.call(this);

}

如上代码我们使用call方法调用func函数，使this指向与func这个对象了，当然上面的方法我们还可以不使用call或者apply方法来改变this的指针，我们可以在外部先使用一个变量来保存this的指针，在内部调用的时候我们可以使用哪个变量即可，如下代码演示：