js 上下箭头滚动_JS中的this完全讲解，再也不会被this搞晕了

关于This对象

js 中的this 是一个比较难理解的对象；所以也经常作为面试的考点，考察应聘者的js 基础能力；其实this的指向也就那么几种情况，接下来我们一一看一下：

函数中的this取何值是在函数真正被调用时确定的(也就是运行时)，函数定义时确定不了。

1、在全局调用函数 this 指向 window

var a=10;
function fn(){console.log(this);// widowconsole.log(this.a);//10
}
var foo=document.getElementById('foo');
foo.addEventListener('click',fn);
function fn(){console.log(this); // <div id="foo">click</div>
}
var obj={name:"daxiong",fn:function(){console.log(this);}
};
obj.fn(); // obj
var obj={name:"daxiong",fn:function(){console.log(this);}
};
var f1= obj.fn;
f1(); // window
var obj={name:'daxiong',fn:function(){return function(){console.log(this);}}
};
obj.fn()(); // window
var obj={name:'daxiong',fn:function(){console.log(this); var f1=function(){console.log(this);}f1();}
};
obj.fn();
// obj
// window
var obj={name:'daxiong',fn:function(){console.log(this);var f1=()=>{console.log(this);}f1();}
}
obj.fn();
//obj;
var f2=obj.fn;
f2();
// window
// window
所以说 箭头函数f1的作用域是 obj.fn的作用域；

5、当然也有例外，比如箭头函数中的this，是词法作用域，this 指向定义所在的作用域。

var bar =foo();

4、如果都不是的话，就是默认绑定。在严格模式下，就绑定到 undefined,否则绑定到全局对象。

var bar=obj1.foo();

3、函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 指向那个上下文对象。

var bar =foo.call(obj2);

2、函数是否通过call、apply （显示绑定）？如果是this指向的是指定的对象；

var bar = new foo();

1、函数是否在new 中调用（new绑定）？如果是的话this 绑定的就是新创建的对象。

8、综上所述，我们可以使用下面的规则，对this的指向进行判断：

function foo(){console.log(this.a);
}
var obj={a:1
}
foo.call(obj); //1;

1、call、apply 可以显式绑定；这两个函数的第一个参数是一个对象；他们会把这个对象绑定到this，接着调用函数时指定这个this；

7、显式绑定改变this的指向

//伪代码；
var new1=function(fn){var newObj=Object.create(fn);fn.call(newObj);return newObj;
};

4、返回这个对象；

3、执行构造函数中的代码（这个函数的调用会绑定到新对象的this）；

2、将这个新对象的原型指向构造函数的 Prototype

1、创建一个新的对象；

我们看一下 new 关键字主要做了哪些事：

6、构造函数中的this 指向创建的实例对象

f1定义的作用域，是obj.fn 的作用域；所以f1 的作用域指向了obj;

箭头函数中this 指向与其他不同，他是在函数定义是就确定了（词法作用域）；

5、箭头函数中的This

第一个输出是obj是一位函数在obj中调用了； f1的调用为什么会是window呢：因为他没有绑定到任何一个对象中；

我们在看下这个例子：

在红皮书中有这么一句话：匿名函数的执行环境具有全局性 所以这个输出的是window；那么为什么呢，其实在这个上下文（执行环境）中匿名函数并没有绑定到任何一个对象中，所以指向了window （非严格模式）

4、匿名函数中的 this 具有全局性

为什么会指向window呢，以为这个函数的指针已经指向了 f1 而f1 的执行环境时 window 所以指向了window；

如果我们做个变形：

3、函数作为对象方法调用时，this就等于那个对象；

这个不难理解；由于DOM元素调用的他，所以指向了DOM元素

2、DOM事件中的this 指向DOM节点

因为函数是在全局调用的，所以this 指向 window；