首先要说的是,this的指向在函数定义的时候是确定不了的,只有当函数执行的时候,才知道this到底指向谁,实际上this最终的指向是那个调用它的对象。
举个例子:
1function fn(){
2 console.log(this);
3}
因为函数没有执行的时候,它的指向确实是不确定的,但箭头函数的this在定义的时候就已经确定了。
普通函数中的This
以上面的函数为例,普通函数的直接调用,例如fn的直接调用,就像下面的代码一样,和上面就一点点的区别就是直接调用了函数,这时候的this指向全局对象window。
1function fn(){
2 var user = "hunt_bo";
3
4 console.log(this.user); //undefined
5
6 console.log(this); //Window
7}
8
9fn();
按照我们上面说的this最终指向的是调用它的对象,这里的函数fn实际是被Window对象所点出来的,下面的代码就可以证明。和上边是一样的效果,区别就是我们定义的一些变量函数,其实是在给window添加属性。
1function fn(){
2 var user = "hunt_bo";
3 console.log(this.user); //undefined
4 console.log(this); //Window
5}
6
7window.fn();
构造函数中的This
1function Person(age, name) {
2 this.age = age;
3 this.name = name
4 console.log(this) // 此处this分别指向Person的实例对象p1和p2
5}
6
7var p1 = new Person(15, '张三')
8
9var p2 = new Person(18, '李四')
在构造函数中,它的this始终指向构造函数构造出来的实例,结合前面所分享的原型里边的知识,在构造函数中直接打印this.__proto__.constructor,就会直接打印构造函数自己,有兴趣的话可以试一下。
对象方法中的This
1var obj = {
2 fn: function () {
3 console.log(this); // obj
4 }
5}
6
7obj.fn();
对象方法调用的时候, 此时this指向该方法所属的对象,就是说fn是obj的一个方法,那么当通过obj.fn调用的时候,方法中的this指向的是obj对象。
事件绑定中的This
1<body>
2 <button id="btn">text</button>
3
4 <script>
5 var oBtn = document.getElementById("btn");
6 oBtn.onclick = function() {
7 console.log(this);
8 }
9 </script>
10</body>
在事件绑定中的this,指向的是绑定事件的对象,就是说this指向button。
定时器中的this
1setInterval(
2 function(){
3 console.log(this); //window
4 },
53000);
定时器中的this指向的是window,这个就不做过多的解释了。
箭头函数中的this
箭头函数中的this指向的是定义时的this,而不是执行时的this,说白了就是箭头函数是没有this,this指向谁主要取决于箭头函数所处的环境,箭头函数中的this指向外部环境中的this指向。
改变this的指向
改变this的指向的方法主要有call,apply,bind
1.call(), call(thisScope, arg1, arg2, arg3...)
2
3.apply(), apply(thisScope, [arg1, arg2, arg3...]);两个参数