window是js中的全局对象,我们创建的变量实际上是给window添加属性
this的最终指向的是那个调用它的对象
1.全局作用域或者普通函数中this指向全局对象window
未设定全局值
<script>
function foo(){
var name='ruby';
alert(this.name) //undefined
}
foo();
console.log(this); //window
</script>
window中没name这个属性,因此找不到
设定管全局值
<script>
var name='jerd';
function foo(){
var name='ruby';
alert(this.name) //jerd
}
foo();
console.log(this); //window
</script>
2.方法调用中谁调用this指向谁
1.对象方法调用
var person = {
run: function () {
console.log(this) //指向person这个对象
}
}
person.run()
<script>
var name='jerd';
var people= {
user:"ruby",
fn:function(){
console.log(this.user); //this指people这个对象
}
};
window.people.fn() //ruby
</script>
<script>
var people = {
name:'jerd',
obj:{
fn:function(){
alert(this.name);
}
}
};
people.obj.fn(); //undefined
此时this指向对象b。b中无a属性,因此值为undefined
</script>
赋值情况
<script>
var people = {
name:'jerd',
obj:{
fn:function(){
alert(this); //this指向windonw
}
}
};
var obj1=people.obj.fn;
obj1();
</script>
this永远指向的是最后调用它的对象,函数fn是被对象obj1所引用,
但是在将fn赋值给变量obj1的时候并没有执行所以最终指向的是window
2.事件方法
var btn = document.querySelector("button")
btn.onclick = function () {
console.log(this) // btn
}
3.在构造函数中this指向构造函数的实例
1.不使用new 指向window
function Person(){
console.log(this)//window
}
Person()
2.使用new 指向当前对象
function Person(){
console.log(this)//people
}
var people = new Person()
<script>
var name='jerd';
function Foo(){
this.name='ruby';
this.func=function () {
var name="zhao";
alert(this.name)
}
}
var obj= new Foo();
obj.func()
</script>
#ruby
<script>
var name='jerd';
function Foo(){
this.name='ruby';
this.func=function () {
console.log(this) //Foo
(function () {
alert(this.name) //window
})()
}
}
var obj= new Foo();
obj.func()
</script>