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了

猜你喜欢

转载自blog.csdn.net/C_Ronaldo_/article/details/81037736