JavaScript call() , apply() , bi

2016-09-08  本文已影响132人  bigggge

上下文

函数的每次调用都会拥有一个特殊值—本次调用的上下文（context），这就是this关键字的值。 如果函数挂载在一个对象上，作为对象的一个属性，就称它为对象的方法。当通过这个对象来调用函数时，该对象就是此次调用的上下文， 也就是该函数的this的值。

函数是一种对象

JavaScript中的函数和Java中的方法或C语言中的函数最大不同在于，JavaScript中的函数也是一种对象。 但这并不意味着，所有的对象都是函数。函数是一种包含了可执行代码，并能够被其他代码调用的特殊的对象。
和变量不同，关键字this没有作用域的限制，嵌套的函数不会从调用它的函数中继承this。如果嵌套函数作为方法调用，其this的值指向调用它的对象。如果嵌套函数作为函数调用，其this的值不是全局对象（非严格模式下）就是undefined（严格模式下）。

很多人误以为调用嵌套函数时this会指向掉i用外层函数的上下文。如果你想访问这个外部函数的this值， 需要将this的值保存都在一个变量中，这个变量和内部函数都同在一个作用域内。例如：

var o = {
  m: function() {
    var self = this;
    console.log(this==o); // true
    f();
    function f() {
      console.log(this === o); // false，this的值是全局对象或undefined
      console.log(self === o); // true
    }
  }
}

四种函数调用方法

方法调用：

var a = {    
    v : 0,    
    f : function(xx) {                
        this.v = xx;    
    }
}
a.f(5);

this 就绑定的是这个对象 a

正常函数调用：

function f(xx) {        
    this.x = xx;
}
f(5);

this 绑定的是全局对象

构造器函数调用：

function a(xx) {        
    this.m = xx;
}
var b = new a(5);

上面这个函数和正常调用的函数写法上没什么区别，只不过在调用的时候函数名前面加了关键字 new ，这样，this 绑定的就不再是全局对象了，而是这里创建的新对象

apply/call 调用：

function a(xx) {        
    this.b = xx;
}
var o = {};
a.apply(o, [5]);
alert(a.b);    // undefined
alert(o.b);    // 5

call(),apply()

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

function fruits() {}
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
var apple = new fruits;
apple.say();    //My color is red

但是如果我们有一个对象banana= {color : "yellow"} ,我们不想对它重新定义 say 方法，那么我们可以通过 call 或 apply 用 apple 的 say 方法：

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.say.apply(banana);    //My color is yellow

所以，可以看出 call 和 apply 是为了动态改变 this 而出现的，当一个 object 没有某个方法（banana没有say方法），但是其他的有（apple有say方法），我们可以借助call或apply用其它对象的方法来操作。

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

log解决方案

定义一个 log 方法，让它可以代理 console.log 方法，常见的解决方法是：

function log(msg)　{
  console.log(msg);
}
log(1);    //1
log(1,2);    //1

上面方法可以解决最基本的需求，但是当传入参数的个数是不确定的时候，上面的方法就失效了，这个时候就可以考虑使用 apply 或者 call，注意这里传入多少个参数是不确定的，所以使用apply是最好的，方法如下：

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

接下来的要求是给每一个 log 消息添加一个"(app)"的前辍，比如：

log("hello world");    //(app)hello world

该怎么做比较优雅呢?这个时候需要想到arguments参数是个伪数组，通过 Array.prototype.slice.call 转化为标准数组，再使用数组方法unshift，像这样：

function log(){
  //将类似数组转换成数组，返回的结果是真正的Array，这样就可以应用Array下的所有方法了
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
  console.log.apply(console, args);
};

bind()

bind() 方法与 apply() 和 call() 很相似，也是可以改变函数体内 this 的指向。

bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

区别

上一篇下一篇

猜你喜欢

热点阅读