浅析js之this --- 一次性搞懂this指向

　　ES5函数调用三种形式：

func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2) // 先不讲 apply

　　前两种都是语法糖，可以等价地变为 call 形式：转换代码

func(p1, p2) 等价于

func.call(undefined, p1, p2)

obj.child.method(p1, p2) 等价于

obj.child.method.call(obj.child, p1, p2)

func.call(context, p1, p2)

　　this，就是上面代码中的 context。就这么简单。

　　this 是你 call 一个函数时传的 context，由于你从来不用 call 形式的函数调用，所以你一直不知道。

浏览器里有一条规则：

　　如果你传的 context 就 null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）

因此上面的打印结果是 window。

[ ] 语法

function fn (){ console.log(this) }

var arr = [fn, fn2]

arr[0]() // 这里面的 this 又是什么呢？

我们可以把 arr[0]( ) 想象为arr.0( )，虽然后者的语法错了，但是形式与转换代码里的 obj.child.method(p1, p2) 对应上了，于是就可以愉快的转换了：

arr[0]()

假想为 arr.0()

然后转换为 arr.0.call(arr)

那么里面的 this 就是 arr 了 :)

总结

this 就是你 call 一个函数时，传入的 context。
如果你的函数调用形式不是 call 形式，请按照「转换代码」将其转换为 call 形式。

如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，非严格模式为undefined。
如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

　　　　例：

var o = {
    a:10,
    b:{
        // a:12,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

　　4.还有一种比较特殊的情况：这里this指向的是window,this永远指向的是最后调用它的对象　　　

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();   //this指向window

　　5. 构造函数版this：

function Fn(){
    this.user = "Caraxiong";
}
var a = new Fn();
console.log(a.user); //Caraxiong

　　这里之所以对象a可以点出函数Fn里面的user是因为new关键字可以改变this的指向，将这个this指向对象a.调用这个函数Fn的是对象a，那么this指向的自然是对象a，那么为什么对象Fn中会有user，因为你已经复制了一份Fn函数到对象a中，用了new关键字就等同于复制了一份。

　　6.当this碰到return时

function fn()  
{  
    this.user = 'Caraxiong';  
    return {};   //返回一个对象
}
var a = new fn;  
console.log(a.user); //undefined

function fn()  
{  
    this.user = 'Caraxiong';  
    return function(){};    //返回一个对象

} var a = new fn; console.log(a.user); //undefined

function fn()  
{  
    this.user = 'Caraxiong';  
    return 1;   //非对象
}
var a = new fn;  
console.log(a.user); //Caraxiong

function fn()  
{  
    this.user = 'Caraxiong';  
    return undefined;   //非对象

} 

var a = new fn; 
console.log(a.user); //Caraxiong

如果返回值是一个对象，那么this指向的就是那个返回的对象，

如果返回值不是一个对象那么this还是指向函数的实例。

注：还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

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

　　7. ES6中的this指向

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
不可以使用yield命令，因此箭头函数不能用作Generator函数。

function Timer() {
  this.a1 = 0;
  this.a2 = 0;
  // 箭头函数
  setInterval(() => this.a1++, 1000);
  // 普通函数
  setInterval(function () {
    this.a2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('a1: ', timer.a1), 3100);
setTimeout(() => console.log('a2: ', timer.a2), 3100);
// a1: 3
// a2: 0

上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向

注：

new操作符会改变函数this的指向问题，为什么this会指向a？
1. 首先new关键字会创建一个空的对象，然后会自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。

posted @ 2017-04-25 14:49 Caraxiong 阅读(2977) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Caraxiong

浅析js之this --- 一次性搞懂this指向

7. ES6中的this指向

公告

　　7. ES6中的this指向