this 指代哪个对象?
1. 通常在函数中的 this 指向的是调用函数的那个对象(谁调用指向谁)
2. 事件函数中的 this 通常指向的是绑定事件的事件源元素
3. 构造函数中的 this ,(使用 new 调用构造函数创建对象),通常指向的是 new 所创建出来的对象本身
4. 全局范围的 this 通常指向的是全局对象(浏览器中是 window)
注意:this的指向不是在创建时就决定了,而是由执行环境决定的。
全局环境 setTimeout setInterval this指向window对象
var name = 'zhangsan';
function Demo(){
console.log(this.name);//zhangsan
}
Demo();
var name = 'zhangsan';
setTimeout(function(){
console.log(this.name);//zhangsan
},0);
对象环境指向对象
(1)、指向对象
var obj = {
name : "zhangsan",
demo: function(){
console.log(this.name);//输出zhangsan
}
}
obj.demo();
(2)、经典例子
var name = 'lisi';
var obj = {
name : "zhangsan",
demo: function(){
console.log(this.name);//此时this指向window f1()调用
}
}
var f1= obj.demo;
f1();//输出 lisi
//在这里,f1定义在全局环境下,即window.f1() 说明了this的指向是由运行时的执行环境来决定的
var name = 'lisi';
var obj = {
name : "zhangsan",
demo: function(){
return function(){
console.log(this.name);
}
}
}
obj.demo();//输出 ƒ (){console.log(this.name);}
obj.demo()();//输出 lisi 在window下调用 所以 指向window
修改 this 指向 bind call appy
<script>
function test2() {
console.log("test2");
console.log(this);
}
test2();// test2 window
test2.call(document.body);// test2 <body></body>
test2.apply(document)// test2 #document
</script>
bind call appy参数
<script>
function add(num1, num2) {
console.log(num1 + num2);
console.log(this)
}
add(5,7)// 12 window
add.apply(document.body, [5, 7])// 12 <body></body>
add.call(document, 5, 7);// 12 #document
</script>