javascript 小白学习指南专题 this

在JS中可能有很多朋友弄不清楚this的取值
其实this 的取值总结下来一共就这5中情况下面我们来一个一个解答

第一种情况：构造函数中的this

function a(){
    this.a1="111";
    this.a2="222";
    console.log(this); //{a1:111,a2:222}
}

var f = new a();
console.log(f.a1);//111
console.log(f.a2);//222 

如果函数作为构造函数用，那么其中的this就代表它即将new出来的对象。
但是 还有一种情况如果我们不new这个a构造函数 而是直接调用它呢？

function a(){
    this.a1="111";
    this.a2="222";
    console.log(this); //window
}
a();

这种情况下this就是window;

第二种情况：函数作为一个对象的属性
如果函数作为对象的一个属性时，并且作为对象的一个属性被调用时，函数中的this指向该对象。

var objs = {
    a:10,
    b:function(){
        console.log(this); //{ a:10,b:function }
        console.log(this.x);// 10
    }
}
objs.b();

以上代码中，b不仅作为一个对象的一个属性，而且的确是作为对象的一个属性被调用。结果this就是objs对象。
如果b函数不作为objs的一个属性被调用，会是什么结果呢？

var objs = {
    a:10,
    b:function(){
        console.log(this); //{ window }
        console.log(this.x);// undefined
    }
}
var f= objs.b;
f();

如上代码，如果函数被赋值到了另一个变量中，并没有作为objs的一个属性被调用，那么this的值就是window，this.x为undefined。

第三种情况: call 和 apply 的调用

call 和 apply 的主要区别 就是 后面调用参数，有一点小小的区别，一个可以传数组一个不行

var obj ={ x: 10};
var fn = function(){
    console.log(this); //{x:10}
    console.log(this.x)// 10
}

fn.call(obj);

这里如果是直接调用 的话 应该就是 指向的window;但是我们通过call 调用则返回的是obj

第四种 全局调用普通函数

第一个我要强调一下 在全局环境下 this 永远指向的window

普通函数在调用时 this 也依然指向的window

第五种情况 在构造函数的prototype中，this代表着什么？

function f(){
    this.name ="xiaoming";
    this.age =1991
}

f.prototype.getName = function(){
    console.log(this.name);
}

var f1 = new f();
f1.getName() //小明

this指向的是f1对象。因此可以通过this.name获取f1.name的值。
其实，不仅仅是构造函数的prototype，即便是在整个原型链中，this代表的也都是当前对象的值。