js进阶作业

工号：01316041 姓名：左飞

题目一：请使用ES5实现以下代码
ES6(转换前)

var handler = {
	id: "123456",
   init: function(){
     document.addEventListener(
     	"click",
       (event) => this.doSomething(event.type),
       false
     );
   },
  doSomething: function(type){
  	console.log(type);
  	console.log("Handling " + type + " for "+ this.id);
  },
};
handler.init();

解答：
ES5(转换后)

var handler = {
  id: "123456",
  init: function init() {
    var _this = this;

    document.addEventListener("click", function (event) {
      return _this.doSomething(event.type);
    }, false);
  },
  doSomething: function doSomething(type) {
    console.log(type);
    console.log("Handling " + type + " for " + this.id);
  }
};
handler.init();

解决思路：
题目中的ES6规范的代码和ES5规范只要差别就在箭头函数部分，(event) => this.doSomething(event.type)，ES6中的箭头函数体内没有自身的this，它的this是函数调用链作用域中的this，所以this.doSomething(event.type)中的this就是init函数域中的this，我们在转换为ES5版本的js代码时，可以先在init函数域中定义一个_this的临时变量，替换掉代码this.doSomething(event.type)中的this即可。