游戏前端开发工具 |
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浏览器前端开发工具 |
评论前必须登录!
注册