这是我参与「第四届青训营 」笔记创作活动的第5天
在JavaScript语言中,函数的调用有四种方式,这四种方式都可以实现需求,但对应不同的场景它们都各有妙用。这四种方式的主要区别在于this指针的初始化。
直接调用
直接进行函数调用是最常见的函数使用方法,此时的this指向的是每次调用的函数本身。
function myFunc(a, b) {
return a + b;
}
console.log(myFunc(2,2));
作为方法调用
将函数定义成为对象之后调用,一般出现在类的内部,来完成一些类内操作。此时init中的this指针会指向obj对象中的init函数。
var obj = {
init:function () {
return this;
},
};
console.log(obj.init());
使用构造函数调用
新对象会继承构造函数中的属性,此时obj中的this指针会指向obj这个变量。这种用法很接近于c++中的类内this指针,通过该指针可以改变类内的数据,调用方法。但也有所区别,c++中的this指针只能在类内使用,而这里的this指针更像暴露在外面,供外部使用。
function func(a,b) {
this.x = a;
this.y = b;
return this;
}
var obj = new dee("x","y");
作为函数方法调用
上述的三种方法都是通过外部因素来决定this指向,为了提高代码的复用率,一般需要this指向任意的对象。此时,call()、apply()、bind()就可以派上用场。
apply、call、bind三种函数的主要区别在于: 1、参数列表不同,第一个参数都是this要指向的对象,但apply只有两个参数,第二个参数为一个数组,需要传输的参数值全部放到数组中。 2、返回值不同,apply和call返回的是一个值,bind返回的是一个函数。 3、调用时间不同,bind是返回绑定this之后的函数,apply和call是立即调用。
以下是三种用法
//call版本
function myFunc(a, b) {
return a + b;
}
myObj = myFunc.call(myObj, 2, 2); //4
//apply
function myFunc(a, b) {
return a + b;
}
myObj = myFunc.apply(myObj, 2, 2); //4
//bind
var a = {
b: function() {
var func = function() {
}.bind(this);
func();
},
c: 'hello'
}
a.b();
console.log(a.c);