设计模式基础 之 2this,call和apply

1 apply call

apply和call的使用

在javascript中，apply 与call都是为了修改某个函数的执行的上下文（context）而存在，也就是修改函数体内的this指向。javascript的一大特点就是定义时上下文,运行时上下文,以及上下文是可以改变的。

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
复制代码

上面的this对象，指向调用者本身apple,我们可以通过apply和call来修改函数的执行上下文。例如下面的banana对象，没有say方法，我们通过修改apple的say方法的上下文来达到目的。

• apple的say方法的定义时上下文是apple
• 使用apply和call修改apple的say方法的上下文为banana

var banana = {
    color: 'yellow'
};

apple.say.call(banana); 
apple.say.apply(banana);
复制代码

可以看出，call 和apply是为了动态改变this而出现的，当一个object没有某个方法，其他的对象中有这个方法，可以借助call和apply来修改其它对象方法的上下文，来达到调用目的。

apply和call 的区别

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。

function func(arg1, arg2) {}

var a = {
    x: 1,
    y: 2
};

var b = {

};

// 使用apply调用
func.apply(a, [1, 2]);

// 使用call调用,
func.call(b, 1, 2);
复制代码

• 方法的第一个参数是你希望运行时上下文的对象，他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。
• 当你不确认调用方法的参数个数时，使用apply(函数内部可以通过arguments为数组来遍历参数),参数确认使用call

2 bind

bind也是修改函数体内的指向, 当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。 MDN解释：bind()方法会创建一个新函数，被称为绑定函数。当调用这个函数的时候，绑定函数会以创建它时的传入bind()方法的第一个参数作为this。传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。下面的函数模拟了bind的函数的实现。

Function.prototype.bind = function() {
    // 保留function原函数
    var _self = this;
    // 获取需要绑定函数的上下文
    var context = [].shift.call(arguments);
    // 获取绑定函数时传入的参数
    var oldArgs = [].slice.call(arguments);
    return function() {
        // - 调用原函数上，将函数的上下文设置为context
        // 保留bind时候传入的参数，合并调用函数时候传入的参数，作为运行时候的参数 
        return _self.apply(context, [].concat(oldArgs, [].slice.call(arguments)))
    }
} 

// bind调用
var obj = {
    name: 'yezi'
};
var func = function(a, b, c, d) {
    console.log(this.name);
    console.log([a, b, c, d]);
}

// 发生了bind()后不会立即执行，需要调用
var ret = func.bind(obj, 2, 3);
ret(5, 6); // 结果为 yezi, [2, 3, 5, 6]
复制代码

3 this

前面提到了javascript的一大特点就是定义时上下文,运行时上下文,以及上下文是可以改变的。而this就是指的当前的上下文环境。由于运行时上下文绑定的特性，导致上下文环境可以改变。this可以是全局对象，当前对象或者任意对象。this是什么取决与函数的调用方式。

• 作为普通函数调用，this是window(严格模式是undefined)
• 作为对象调用，this指代对象
• 作为构造函数调用，this指代创建的对象
• 使用apply,call,this指向传入被绑定的对象
• 使用bind: 传入函数的对象即是this。但是如果bind的函数作为构造器调用，则忽略该上下文。
• eval: this是执行eval当前的上下文
• 作为闭包：匿名函数执行环境具有全局性，this指向window

在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象。

var pont = {
    x: 0,
    y: 0,
    moveTo: function(x, y) {
        this.x = this.x + x;
        this.y = this.y + y;
    }
}
point.moveTo(10, 20); // this时对象point,当前对象
复制代码

函数也可以直接被调用，此时 this 绑定到全局对象。在浏览器中，window 就是该全局对象。

// 函数被调用时，this 被绑定到全局对象，接下来执行赋值语句，相当于隐式的声明了一个全局变量，这显然不是调用者希望的
function moveTo(x, y) {
    // this是window， this.x 是undefined，因此: undefined + 一个数字 = NaN
    this.x = this.x + x;
    this.y = this.y + y;
}

moveTo(10, 20);
console.log(this.x, this.y); // NaN, NaN
复制代码

作为构造函数调用.JavaScript 支持面向对象式编程，与主流的面向对象式编程语言不同，JavaScript 并没有类（class）的概念，而是使用基于原型（prototype）的继承方式。相应的，JavaScript 中的构造函数也很特殊，如果不使用 new 调用，则和普通函数一样。作为又一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。如果调用正确，this 绑定到新创建的对象上。

function Point(x, y){ 
   this.x = x; 
   this.y = y; 
}
复制代码

使用 apply 或 call 调用,在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

function Point(x, y){ 
   this.x = x; 
   this.y = y; 
   this.moveTo = function(x, y){ 
       this.x = x; 
       this.y = y; 
   } 
} 
 
var p1 = new Point(0, 0); 
var p2 = {x: 0, y: 0}; 
p1.moveTo(1, 1); 
p1.moveTo.apply(p2, [10, 10]);
复制代码

对于内部函数，即声明在另外一个函数体内的函数，这种绑定到全局对象的方式会产生另外一个问题。我们仍然以前面提到的 point 对象为例，这次我们希望在 moveTo 方法内定义两个函数，分别将 x，y 坐标进行平移。结果可能出乎大家意料，不仅 point 对象没有移动，反而多出两个全局变量 x，y。其实这个现象就是闭包的情况，匿名函数执行环境具有全局性。

var point = {
    x: 0,
    y: 0,
    moveTo: function(x, y) {
        // 闭包， this是window,生成了一个全局变量
        var moveX = function() {
            this.x = x;
        };
        // 闭包， this是window,生成了一个全局变量
        var moveY = function() {
            this.y = y;
        };
        
        moveX(x);
        moveY(y);
    }
}

point.moveTo(1, 2);
console.log(point.x, point.y); // 0, 0
console.log(x, y); // 1, 2
复制代码

这属于 JavaScript 的设计缺陷，正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上，为了规避这一设计缺陷，聪明的 JavaScript 程序员想出了变量替代的方法，约定俗成，该变量一般被命名为 that。

var point = {
    x: 0,
    y: 0,
    moveTo: function(x, y) {
        var that = this;
        var moveX = function() {
            that.x = x;
        };
        var moveY = function() {
            that.y = y;
        };
        
        moveX(x);
        moveY(y);
    }
}

point.moveTo(1, 2);
console.log(point.x, point.y); // 1, 2
复制代码

https://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/index.html