javascript基础(五)this关键词

执行上下文中有一个对this的赋值,接下来学习一下this,因为在函数中用的非常多

this的精髓在于,在函数定义时无法确定this的值,只有当函数真正被调用执行时才能确定值。

1.构造函数

    function fn() {
        this.a = 1
        this.b = 2
        console.log(this)   //fn {a: 1, b: 2}
    }

    var f = new fn()
    console.log(f.a)    //1

当函数被当做构造函数使用时,this指的是他new出来的对象

但是如果直接调用这个函数

    function fn() {
        this.a = 1
        this.b = 2
        console.log(this)  //Window {speechSynthesis: SpeechSynthesis, 
    }

    fn()

this是windows

2.函数作为对象的一个属性

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

    obj.fn()

这是是由obj这个对象调用的fn,所以this是obj这个对象,其实已经隐约感觉出来了,谁调用了这个函数,this就是谁

如果不是用obj调用的呢

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

    var f = obj.fn
    f()     

此时我们定义了一个变量f,将fn赋值给他,由他调用fn,结果this是windows
这个意思是不是说f是全局变量呢,所以this是windows

再来看一个更复杂的

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

}
test.prototype.f = obj.fn
test.prototype.f()        //Object {}   //undefined
var t = new test()  //test {}    //undefined
t.f()

我定义了一个函数,将这个函数的f属性通过原型赋值为fn,然后分别通过test和test new出来的对象调用fn这个函数,结果可见:当用test时,this指的是Object,而对象时则是我们定义的test(),也就是说去找调用他的对象的父类型。

3.全局、调用普通函数

    var x  = 10
    var fn = function () {
        console.log(this)      //windows
        console.log(this.x)    //10
    }
    fn()

这个全局调用很明显

看一个复杂的

var obj = {
    x: 10,
    fn: function () {
        function f() {
            console.log(this)      //windows
            console.log(this.x)    //undefined
        }
        f()
    }
}
obj.fn()

可能你以为是obj,但是仔细看看真正调用f的地方是fn内部的f(),也就是说f是被全局调用了,fn这个函数中的this就是指的obj了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值