关于javascript:彻底搞懂js中this指向

想要了解this，先记住以下两点：

1：this永远指向一个对象；

2：this的指向齐全取决于函数调用的地位；

①：如果一个函数中有this，然而它没有被上一级的对象所调用，那么this指向的就是window，这里须要阐明的是在js的严格版中this指向的不是window，然而咱们这里不探讨严格版的问题(在严格版中的默认的this不再是window，而是undefined。)

function fun(){
    console.log(this.s);
}
​
var obj = {
    s:'1',
    f:fun
}
​
var s = '2';
​
obj.f(); //1
fun(); //2

另外还有两种种非凡状况：

第一种：当this遇到return

1

function fn()  
{  
    this.user = '二狗子';  
    return {};  
}
var a = new fn;  
console.log(a.user); //undefined

2.

function fn()  
{  
    this.user = '二狗子';  
    return function(){};
}
var a = new fn;  
console.log(a.user); //undefined

3.

function fn()  
{  
    this.user = '二狗子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //二狗子

4.

function fn()  
{  
    this.user = '二狗子';  
    return undefined;
}
var a = new fn;  
console.log(a.user); //二狗子

5.

function fn()  
{  
    this.user = '二狗子';  
    return null;
}
var a = new fn;  
console.log(a.user); //二狗子

总结：如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。
还有一点就是尽管null也是对象，然而在这里this还是指向那个函数的实例，因为null比拟非凡。

this应用最频繁的几种状况做一个总结，最常见的根本就是以下5种：
对象中的办法，事件绑定 ，构造函数 ，定时器，函数对象的call()、apply() 办法；

事件绑定中的this

行内绑定事件：

当事件触发时，属性值就会作为JS代码被执行，以后运行环境下没有clickFun函数，因而浏览器就须要跳出以后运行环境，在整个环境中寻找一个叫clickFun的函数并执行这个函数，所以函数外部的this就指向了全局对象window；如果不是一个函数调用，间接在以后节点对象环境下应用this，那么显然this就会指向以后节点对象；

<input type="button" value="按钮" onclick="clickFun()">
<script>
    function clickFun(){
    console.log(this) //打印window对象
        this // 此函数的运行环境在全局window对象下，因而this指向window;
    }
</script>
​
<input type="button" value="按钮1" onclick="clickFun">
<input type="button" value="按钮2" onclick="clickFun"><!--打印input节点-->
<!-- 运行环境在节点对象中，因而this指向本节点对象 -->

动静绑定与事件监听：

<input type="button" value="按钮" id="btn">
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function(){
        this ;  // this指向本节点对象
    }
</script>

构造函数中的this

function Pro(){
    this.x = '1';
    this.y = function(){};
}
var p = new Pro();

new 一个构造函数并执行函数外部代码的过程就是这个五个步骤，当 JS 引擎指向到第3步的时候，会强制的将this指向新创建进去的这个对象；

window定时器中的this

var obj = {
    fun:function(){
        this ;
    }
}
​
setInterval(obj.fun,1000);      // this指向window对象
setInterval('obj.fun()',1000);  // this指向obj对象

setInterval() 是window对象下内置的一个办法;
在下面的代码中，setInterval(obj.fun,1000) 的第一个参数是obj对象的fun ，因为 JS 中函数能够被当做值来做援用传递，理论就是将这个函数的地址当做参数传递给了 setInterval 办法，换句话说就是 setInterval 的第一参数承受了一个函数，那么此时1000毫秒后，函数的运行就曾经是在window对象下了，也就是函数的调用者曾经变成了window对象，所以其中的this则指向的全局window对象；
而在 setInterval(‘obj.fun()’,1000) 中的第一个参数，理论则是传入的一段可执行的 JS 代码；1000毫秒后当 JS 引擎来执行这段代码时，则是通过 obj 对象来找到 fun 函数并调用执行，那么函数的运行环境仍然在 对象 obj 内，所以函数外部的this也就指向了 obj 对象；

函数对象的call()、apply() 办法

函数作为对象提供了call()，apply() 办法，他们也能够用来调用函数，这两个办法都承受一个对象作为参数，用来指定本次调用时函数中this的指向

call()办法

var lisi = {names:'lisi'};
var zs = {names:'zhangsan'};
function f(age){
    console.log(this.names);
    console.log(age);
    
}
f(23);//undefined
​
//将f函数中的this指向固定到对象zs上；
f.call(zs,32);//zhangsan

apply()办法

var lisi = {name:'lisi'}; 
var zs = {name:'zhangsan'}; 
function f(age,sex){
    console.log(this.name+age+sex); 
}
//将f函数中的this指向固定到对象zs上；
f.apply(zs,[23,'nan']);

留神：call和apply的作用统一，区别仅仅在函数实参参数传递的形式上；
这个两个办法的最大作用根本就是用来强制指定函数调用时this的指向；