ES5
1.在普通函数中的this总是代表他的直接调用者,默认情况下指向windos
2.在严格模式下,没有直接调用者的函数中的this是undefined使用
3.call,apply,bind,this指向的是绑定的对象;
ES6
箭头函数没有自己的this,他的this是继承来的,默认指向在定义他时所在的对象,
ES5中this指向:
1.在全局的调用函数this指向windos
function fn(){
console.log(this)
}
2.对象函数调用,那个函数调用this就指向那个对象
var odiv = document.getElementById('div');
odiv.onclick = function(){
console.log(this)
}
3.定时器中this指向全局
var a = 10;
var fn = setInterval(function(){
var a = 20;
console.log(this.a)
clearInterval(fn)
},3000)
4.addEventListener this的指向
addEventListener this指向事件前的dom对象在IE11下attachEvent this 指向window
<div id="btn">
点击我
</div>
<script>
btn.addEventListener('click',function(){
console.log(this) //<div>点击我</div>
})
IE下
IE11不兼容
btn.attachEvent('onclick',function(){
alert(this) //window
})
</script>
5.构造函数下this指向
构造函数中的this指向构造出来的新对象
function aa(){
this.name = 'yuangege',
this.age = '18',
this.sayName = function(){
console.log(this.name)
}
}
var aaa = new aa();
aaa.sayName();
6.箭头函数this指向
在fn1中箭头函数默认指向为window而fn2是在data对象中创建的this指向
data对象,所以fn2中的this指向对象
const fn1 = () =>{
console.log(this)
}
const data = {
name:'yuangege',
fn: function (){
console.log(this)
const fn2 = () =>{
console.log(this.name)
}
fn2();
}
}
data.fn();
class
1.Es6class类和模块的内部默认为严格模式必须使用new操作符来调用,否则会报错。
2.constructor是类的默认方法,如果没写他会默认添加一个constructor方法返回默认值是实例的对象,也就是this类也可以自执行。
3.class类不存在变量提升