前端开发JS 中 this关键词的指向
摘要： 游戏前端开发工具 web前端 开发工具 nodejs前端开发工具 很多前辈大神都推荐了《js高级程序设计》，看到第五章了，受益匪浅，毕竟我根本没有认真的学习过原生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
近期评论