前端开发JS 中 this关键词的指向

游戏前端开发工具
web前端 开发工具
nodejs前端开发工具

很多前辈大神都推荐了《js高级程序设计》,看到第五章了,受益匪浅,毕竟我根本没有认真的学习过原生js,这不,今天才算明白this的指向原则:this指向调用函数的那个对象。通俗的讲,因为this只存在于函数中,而函数是需要被调用的,然后this是谁调用就指向谁。分为四种情况:
1、单纯的函数调用(PS:代码都可以直接运行查看结果)
html 代码

<script>
    function test() {
        this.x = 1
        alert(this.x)
    }
    test()
    alert(this.x)
    alert(‘x’ in window)
</script>

这里的this指向的就是window,因为是window调用了test函数。

    2、函数作为对象的方法调用

html 代码

<script>
    var test = {
        a: 1,
        b: function() {
            alert(this.a)
        },
    }
    test.b()
    alert(this.a) //undefined
</script>

这里可以理解为是 test调用了函数b,所以this指向的是test,所以this.a =》test.a 。

  3、作为构造函数调用

html 代码

<script>
    function test() {
        this.a = 1
    }
    var test2 = new test()
    alert(test2.a)
</script>

这里this指向的是构造的新对象,也就是 test2,所以test2也有了属性a并等于1。

   4、apply()、call() 调用

html 代码

<script>
    var a = 0,
        test1 = {
            a: 1,
            fun: function() {
                alert(this.a)
            },
        },
        test2 = {
            a: 2,
        }
    test1.fun()
    test1.fun.call(test2)
    test1.fun.call()
</script>

这里的三次调用,this分别指向test1、test2和window。第一种前面已经提到了,第二种是通过call或者apply方法使fun中原本指向test1的this变成了指向test2(即call、apply方法的第一个参数)。第三种情况属于第一个参数为空(好像为undefined时也会指向window)时,会默认指向window,..call() =》 ..call(window)。

最后分享一道同事分享给我的题。PS:建议先动脑筋仔细分析分析,写下自己的答案,再运行代码看结果。
html 代码

<script>
    function Foo() {
        getName = function() {
            alert(1)
        }
        return this
    }
    Foo.getName = function() {
        alert(2)
    }
    Foo.prototype.getName = function() {
        alert(3)
    }
    var getName = function() {
        alert(4)
    }
    function getName() {
        alert(5)
    }
    //请写出以下输出结果:
    Foo.getName()
    getName()
    Foo().getName()
    getName()
    new Foo.getName()
    new Foo().getName()
    new new Foo().getName()
</script>
前端集成开发工具
前端 可视化 开发工具
safari浏览器前端开发工具
» 本文来自:前端开发者 » 《前端开发JS 中 this关键词的指向》
» 本文链接地址:https://www.rokub.com/6370.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!