今天我们来说一说this指向，在很多的网站及博客中都可以看到介绍this指向的文章，人们都说：this不是在创建时就决定了的，而是由执行环境决定。
那么什么是执行环境，this又怎样来根据执行环境来决定指向谁的呢？
要我来说其实可以简单地理解为：最后谁调用它this就指向了谁。
- 全局环境中的this指window
- 其他函数中的this指向调用它的对象
- 在setTimeout、setInterval 或无主的匿名函数，将来都是由window调用，所以里面的this都指向了window
- 事件函数的this指向了绑定它的人
根据上面的描述，下面我们分别举几个简单的例子来看一下，请一一进行比较：
function fn() {
console.log(this); // window
}
fn();
单纯的调用函数，此时this指向了window。
var obj = {
name: 'obj',
fn: function () {
console.log(this); // {name: "obj", fn: ƒ}
}
}
obj.fn();
对象环境中，此时this的指向为obj对象。
var timer = setInterval(function () {
console.log(this); // window
clearInterval(timer);
timer = null;
});
无主的匿名函数，将来都是由window调用
从上面的内容我们可以看出，this的指向是改变的，除了执行环境之外，我们也可以通过属性手动的进行更改，下面我们一起来了解一下更改this指向的方法
call apple bind
1. 通过call的方法来改变this指向，立即执行
var szc = {
name: 'szc',
say: function (a, b) {
console.log(this.name, a, b); // lls 1 2
}
}
var lls = {
name: 'lls'
}
szc.say.call(lls, 1, 2)
2. 通过apply的方法来改变this指向,以数组的形式传入参数，立即执行
var szc = {
name: 'szc',
say: function (a, b) {
console.log(this.name, a, b); // lls 3 4
}
}
var lls = {
name: 'lls'
}
szc.say.apply(lls, [3, 4])
3. 通过bing的方法来改变this指向,返回一个值，不会立即执行，在需要的时候进行调用执行，改变this指向时或调用返回值时都可以进行传参
var szc = {
name: 'szc',
say: function (a, b, c, d, e) {
console.log(this.name, a, b, c, d, e); // lls 6 7 8 9 10
}
}
var lls = {
name: 'lls'
}
var newFn = szc.say.bind(lls, 6, 7);
newFn(8, 9 ,10);
以上的方法使用起来都非常的简单、方便。但是有没有想过我们自己使用一些原生的方法，自己来封装一下代码，起到和他们相同效果的方法呢？如果你想！那么向下看~！
我们以这两个对象为例子，下面就不重复了，直接写方法：
var szc = {
name: 'szc',
say: function (a, b, c, e, f, g) {
console.log(this.name, a, b, c, e, f, g)
}
}
var wxy = {
name: 'wxy',
say: function () {
}
}
封装模拟call的方法
Function.prototype.myCall = function(that, ...argu) {
that = that || window; // 如果没有传，则默认为window
var fn = this; // this指向了say
var fnName = this.name + new Date() * 1; // 为了防止覆盖原有的函数，所以添加一个随机时间，可以区别之前的函数
that[fnName] = fn; // 在that对象上添加一个函数
that[fnName](...argu); // 执行函数(接收参数)
delete that[fnName]; // 使用完后删除
}
szc.say.myCall(lls, 1, 2);
封装模拟apply的方法
Function.prototype.myApply = function(that, argu) {
that = that || window;
var fn = this;
var fnName = this.name + new Date() * 1;
that[fnName] = fn;
that[fnName](...argu);
delete that[fnName];
}
szc.say.myApply(lls, [1, 2]);
封装模拟bind的方法
Function.prototype.myBind = function(that, ...argu) {
var self = this;
return function() {
var newP = argu.concat(...arguments);
self.myApply(that, newP);
}
}
var newFn2 = szc.say.myBind(lls, 12, 123);
newFn2(5, 6); // 返回的函数是由window下来调用，可里面执行的this却是你改变的对象的，是因为在函数内部隐性的调用了一次改变this指向的方法。
以上就是this指向的一些基本的方法，如果有哪些不对的地方还望大神多多指教~！
网友评论