/*e.target与this区别 e.target点击了哪个元素,就返回那个元素...
this返回的是绑定事件的对象(元素) */
//this指向问题 一般情况下this的最终指向的是那个调用它的对象
//1.全局作用域或者普通函数中this指向全局对象window(定时器里面的this指向window)
//注意:如果函数是独立调用,那this指向是undefined,但是在非严格模式下,当this指向undefined时,它会被自动指向window
console.log(this);
function fn() {
console.log(this);
}
window.fn();//相当于window.fn();
window.setTimeout(function () {//由于定时器是window调用
console.log(this);
}, 1000);
//2.方法调用中谁调用this指向谁
var n = {
pps: function () {
console.log(this);//this指向的是n这个对象
}
}
n.pps();
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
console.log(this);//this指向的是btn这个按钮对象
})
//btn.οnclick=function(){
// console.log(this); this指向的是btn这个按钮对象
// }
//3.构造函数中this指向构造函数的实例
function fn() {
console.log(this);//this指向的是fn 实例对象
}
var fun = new fn();
//4.如果函数是独立调用,那this指向是undefined,但是在非严格模式下,当this指向undefined时,它会被自动指向window
function fn() {
"use strict"
console.log(this);//undefined
}
fn();
ES6箭头函数的this
**为什么出现箭头函数this
解决了匿名函数this指向的问题
setTimeout和setInterval中使用this造成的问题
箭头函数中的this
箭头函数没有自己的this,而且箭头函数的this不是调用的时候决定的,
而是定义时所处的对象就是它的this
(箭头函数的this看外层是否有函数,如果有,外层函数的this就是内部箭头函数的this,如果没有,this就是window)
**
//ES5与ES6中的this对比
btn1.onclick=function(){
console.log(this);//btn1
}
btn2.onclick=()=>{
console.log(this);//window
}
let obj = {
name: "tom",
getName: function () {//由于普通函数有自己的this,所以this是obj
btn2.onclick = () => {
console.log(this);//obj
}
}
}
obj.getName();
let obj = {
name: "tom",
getName:()=> {
btn2.onclick = () => {
console.log(this);//window
}
}
}
obj.getName();