在非箭头函数下， this 指向调用其所在函数的对象
箭头函数导致this总是指向函数定义生效时所在的对象
1.png
以前这种情况下，根据“箭头函数”的this，总是指向定义时所在的对象，而不是运行时所在的对象。这句话，我会认为箭头函数的this指向foo，但这是错的。
为什么呢，关键在于”定义时“三个字。我们会理所当然把它和“书写时”等价，但其实这是错的，注意是函数定义生效时。
<body>
<h1> this is a header</h1>
<div class="hh">hh</div>
<div class="hhh">hhh</div>
<div class="hhhh">hhhh</div>
<div class="hhhhh">hhhhh</div>
</body>
<script>
window.onload=function(){
var $=(selector)=>{
return document.querySelector(selector);
}
function zzh(){
this.id=1;
}
zzh.prototype={
constructor:zzh,
h:function(){
console.log(this); //zzh {id: 1}
},
hh:function(){
$('.hh').onclick=function(){
console.log(this); //<div class="hh">hh</div>
}
},
hhh:function(){
var self=this;
$('.hhh').onclick=function(){
console.log(this); //<div class="hhh">hhh</div>
console.log(self);//zzh {id: 1}
}
},
hhhh:function(){
$('.hhhh').onclick=()=>{console.log(this)} //zzh {id: 1}
},
hhhhh:function(){
$('.hhhhh').onclick=function(){
console.log(this);
}.bind(this); //zzh {id: 1}
}
}
var z1=new zzh();
z1.h();
z1.hh();
z1.hhh();
z1.hhhh();
z1.hhhhh();
}
</script>
箭头函数中的this继承外围作用域
let person = {
name: "gard",
say: () => {
console.log(this);
console.log(this.name);
}
};
person.say();
this的值为window或global对象，this.name的值为undefined或""（空字符串）。
随手记
当我们new 一个对象的时候到底干了什么？
var person1=new Person();
其实就是下面三步
var person1 = {};
person1.__proto__ =Person.prototype;
Person.call(person1);
第一行，我们创建了一个空对象person1。
第二行，我们将这个空对象的__proto__属性指向了Person函数对象prototype成员对象。
第三行，我们将Person函数对象的this指针替换成person1，然后再调用Person函数。
网友评论