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代表的也都是当前对象的值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值