码迷,mamicode.com
首页 > Web开发 > 详细

js this 指向(es5)和es6箭头函数this指向问题总结(邹文丰版)

时间:2018-04-06 23:41:57      阅读:318      评论:0      收藏:0      [点我收藏+]

标签:个人   OLE   window   es5   定义   小例子   问题   win   构造   

 本文纯属自己结合网上文章总结,有问题和不同想法欢迎留言指正
/********************简单小例子********************/
var test =function () {
console.log(this);
};
// test(); //window
/*****************************2***********************************/
var test2 =function () {
console.log(this);
return function () {
console.log(this)
}
};
var bb={
a:‘1‘,
cc:test2 //赋值类型还未执行
};
// bb.cc()(); // 1.obj 2.window
/*****************************3***********************************/
var test3 =function () {
console.log(this);
return function () {
console.log(this)
}
};
var bb3={
a:‘1‘,
cc:test3() //默认在最外层执行
};
bb3.cc(); // 1.window 2.obj

//test2 tes3 只是一个括号的差别,决定指向的调用者;

/************普通函数例子*****************/
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth;
var that=this;
console.log(this); //this指向obj
return function () {
console.log(that);//that缓存保留在指向obj
console.log(this); //this指向window 最终的调用者不是obj而是window;
};
}
};
// obj.getAge()();//直接指向调用者“obj.getAge()”执行后就变成“()”而“()直接在最外层window上”

/************箭头函数登入*****************/
var obj2 = {
name:‘obj2‘,
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
return () => {
var c=‘hehe‘;
console.log(this);//obj2
return () => {
console.log(this) //obj2 箭头函数this始终指向最外层obj2;
}
}
}
};
// obj2.getAge()()();

//结合两个例子箭头函数的设计更加合理的,this始终保持指向定义时候的obj2,传统的函数在这种情况就直接指向window,
// 个人感觉有点不合理,

/*************************普通构造函数***************************************/
function Fn(name,age){
this.name=name;
this.age=age;
console.log(this); //通过new一个实例之后this指向会指向这个对象
return function () {
console.log(this) //最终执行调用的还是window;不是new出来的对象
};
}
// var obj=new Fn(‘张飞‘,‘14‘); //this Fn
// obj(); //this window


/*******************箭头构造函数*********************************************/
function Fn2(name,age){
this.name=name;
this.age=age;
console.log(this); //obj2
return () => {
console.log(this) //obj2
return () => {
console.log(this) //obj2
}
}
}
// var obj2=new Fn2(‘张飞‘,‘14‘); //this指向obj2
// obj2(); //this指向obj2

// Fn2()()();//如果构造函数直接当做普通函数来执行,那么全部指向最初的window

//通过对比可以发现总结一下箭头函数很好的解决了this原来在函数内部指向不合理的情况。你只要记住箭头函数会继承最初
//最外层定义的this

js this 指向(es5)和es6箭头函数this指向问题总结(邹文丰版)

标签:个人   OLE   window   es5   定义   小例子   问题   win   构造   

原文地址:https://www.cnblogs.com/zou1234/p/8729082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!