JS函数调用|青训营笔记

135 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第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);