ES6和ES5中的this指向问题

不多逼逼 直接上代码:

var name = "window";
var obj = {
    name: 'obj',
    //普通函数
    one: function(){
    	console.log(this.name)
    },
    //箭头函数
    two: ()=> {
	    console.log(this.name)
    },
    //普通函数中的箭头函数
    three: function(){
    	(()=>{
    		console.log(this.name)
   		})()
    }, 
    //多层箭头函数
    four: ()=> {
    	(()=>{
    		console.log(this.name)
   		})()
    }
}
obj.one();    //obj  
obj.two();	  //window 
obj.three();  //obj
obj.four()    //window

说明:

1、

普通函数中的this总是指向它的直接调用者;

箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。

2、

①比如上面的 obj.one();直接调用者是obj,因此this指向obj

②箭头函数中的this指向是固定的,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数内部没有this,箭头函数的this是在定义时就绑定的,它的this就是箭头函数所处的对象的所处作用域

比如obj.three();箭头函数所在的对象是函数three,函数three处于obj的作用域中,因此this指向obj;

比如obj.four();箭头函数所在的对象是obj,obj处于window的作用域中因此this指向window。

3、

es6函数写法有2种,一种是 fn: (str) => { } ; 一种是 fn(str){ }

箭头函数是没有上下文的、this会直接指向上一级

第二种写法this指向调用它的调用者

2019-01-30补充

//1内部this对象指向创建期上下文对象
// 普通函数的this指向是在函数的执行期间绑定的
//比如
function fn6(){
    console.log(this)
}
fn6() // 自调用的时候,指向window
var obj  = {};
obj.f = fn6;
obj.f(); // 指向他的直接调用者obj

document.onclick = fn6; // 指向触发该事件的对象 document

posted @ 2018-11-15 11:16  道理我都懂Zz  阅读(797)  评论(0编辑  收藏  举报