乐趣区

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

jiezi

想要了解 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 的指向；

退出移动版