找回密码
当前位置：前端开发者 > JavaScript > 正文

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

2018-11-12 20:51:30 分类：JavaScript 阅读(157) 评论(0)
游戏前端开发工具
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
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论