javascript 三种方式改变this指向

* MyDiv.js

// @ref: https://uhyohyo.net/javascript/9_5.html

function MyDiv(name) {
    this.div = document.createElement("div");
    this.name = name;
    this.div.textContent = "This div element is " + name;
    document.body.appendChild(this.div);

    // var that = this;
    // this.div.addEventListener("click", function(e) {
    // 	console.log(that.name);
    // }, false);

    // this.div.addEventListener("click", (function(t) {
    // 	return function(e) {
    // 	    console.log(new Date() + ": " + t.name);
    // 	}
    // })(this), false);

    this.div.addEventListener("click", (function(e) {
	console.log(this.name);
    }).bind(this), false);
}

MyDiv.prototype.setStyle = function() {
    this.div.style.position = "fixed";
    this.div.style.left = 0;
    this.div.style.top = "40px";
    this.div.style.height = "30px";
    this.div.style.lineHeight = "30px";
    this.div.style.backgroundColor = "aquamarine";
};

var div1 = new MyDiv("div1");
div1.setStyle();

粘贴到浏览器控制台上测试

https://uhyohyo.net/javascript/9_5.html

 

this.div onclick回调函数中 this指向 外部的this.div, 而不是MyDiv实例(外部的this)

这种方式在外部定义一个变量that保存this，在回调函数内部使用

var that = this;
this.div.addEventListener("click", function(e) {
    console.log(that.name);
}, false);

 

通过匿名函数定义并调用, (function(t) { /* ... */ })(this)

把外部的this作为参数传到回调函数中

返回的函数类型必须要与 addEventListener， 第2个参数相同

function(Event e) { }

this.div.addEventListener("click", (function(t) {
     return function(e) {
         console.log(new Date() + ": " + t.name);
     }
})(this), false);

 

通过bind方法改变this指向

this.div.addEventListener("click", (function(e) {
	console.log(this.name);
}).bind(this), false);