在全局作用域中
=>this -> window
<script>
console.log(this); //this->window
</script>
在普通函数中
=>this取决于谁调用,谁调用我,this就指向谁,跟如何定义无关
var obj = {
fn1:function() {
console.log(this);
},
fn2:function(){
fn3()
}
}
function fn3() {
console.log(this);
}
fn3();//this->window
obj.fn1();//this->obj
obj.fn2();//this->window
箭头函数中的this
箭头函数没有自己的this,箭头函数的this就是上下文中定义的this,因为箭头函数没有自己的this所以不能用做构造函数。
var div = document.querySelector('div');
var o={
a:function(){
var arr=[1];
//就是定义所在对象中的this
//这里的this—>o
arr.forEach(item=>{
//所以this -> o
console.log(this);
})
},
//这里的this指向window o是定义在window中的对象
b:()=>{
console.log(this);
},
c:function() {
console.log(this);
}
}
div.addEventListener('click',item=>{
console.log(this);//this->window 这里的this就是定义上文window环境中的this
});
o.a(); //this->o
o.b();//this->window
o.c();//this->o 普通函数谁调用就指向谁
事件绑定中的this
事件源.onclik = function(){ } //this -> 事件源
事件源.addEventListener(function(){ }) //this->事件源
var div = document.querySelector('div');
div.addEventListener('click',function() {
console.log(this); //this->div
});
div.onclick = function() {
console.log(this) //this->div
}
定时器中的this
定时器中的this->window,因为定时器中采用回调函数作为处理函数,而回调函数的this->window
setInterval(function() {
console.log(this); //this->window
},500)
setTimeout(function() {
console.log(this); //this->window
},500)
构造函数中的this
构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象,所以构造函数中的this->实例化对象
new关键字会在内部发生什么
//第一行,创建一个空对象obj。
var obj ={};
//第二行,将这个空对象的__proto__成员指向了构造函数对象的prototype成员对象.
obj.__proto__ = CO.prototype;
//第三行,将构造函数的作用域赋给新对象,因此CA函数中的this指向新对象obj,然后再调用CO函数。于是我们就给obj对象赋值了一个成员变量p,这个成员变量的值是” I’min constructed object”。
CO.call(obj);
//第四行,返回新对象obj。
return obj;
function Person(name,age) {
this.name = name;
this.age = age;
}
var person1 = new Person();
person1.name = 'andy';
person1.age = 18;
console.log(person1);//Person {name: "andy", age: 18}
var person2 = new Person();
person2.name = 'huni';
person2.age = 20;
console.log(person2);// Person {name: "huni", age: 20