浅谈this和call、apply

101次阅读

共计 1276 个字符，预计需要花费 4 分钟才能阅读完成。

this 的指向一直是很多人头疼的问题，我之前也经常弄混，后来整理了一下，感觉开朗了许多，在这里列出来以供参考

this 的指向

一般可分为四种情况：

作为普通函数调用：此时 this 总是指向全局对象，比如

var func = {
    name: 'Simon',
    getName: function() {console.log(this.name);
    }
};
var name = 'Yuk';
var getMyName = func.getName;
getMyName();  // 输出 'Yuk'

作为对象方法调用：此时 this 指向该对象，如

var func = {
    name: 'Simon',
    getName: function() {console.log(this.name);
    }
};
var name = 'Yuk';
func.getName();  // 输出 'Simon'

构造器调用：当用 new 运算符调用函数时，函数会返回一个对象，此时 this 就指向这个返回的对象。但如果构造器显式地返回了一个 object 类型的对象，则 this 会指向这个显式对象。
bind、call、apply 方法调用：此时 this 指向方法中指定的 obj。

call 和 apply

call 和 apply 的作用基本相同，区别仅在于传入的参数形式不同。call 传入的参数数量不固定，第一个参数是代表函数体内 this 的指向，从第二个参数开始往后，每个参数被依次传入函数；apply 接受两个参数，第一个也是代表函数体内 this 的指向，第二个参数为一个包含参数的数组或者类数组 (arguments)。
当使用 call 或者 apply，如果传入的第一个参数为 null，函数体内的 this 会指向默认的宿主对象，浏览器中是 window，node 中是 global。

call 和 apply 的用途：

1、改变 this 的指向
2、Function.prototype.bind 的实现：

Function.prototype.bind = function() {
   var _this = this,   // 保存原函数
       context = [].shift.call(arguments), // 需要绑定的 this 的上下文
       args = [].slice.call(arguments);  // 剩余的参数转成数组
   return function() {     // 返回一个新的函数
       return _this.apply(context, [].concat.call(args, [].slice.call(arguments) ) );
           // 执行新的函数的时候，会把之前传入的 context 当做新函数体内的 this
           // 并且组合两次分别传入的参数，作为新函数的参数
   };
};

3、借用其它对象的方法：在操作 arguments 的时候，我们经常找 Array.prototype 对象借用方法。

[].slice.call(arguments);   // 将 arguments 转换为数组
[].shift.call(arguments);   // 截去 arguments 列表中的头一个元素
[].push.call(arguments, item); // 向 arguments 里添加新元素

正文完