Javascript this 在 "class" 和事件闭包函数当中的指向问题! Javascript

axiuno 2017-5-11 822

Javascript 这门语言是面向原型 (Orient Prototype) 的,跟面向对象 (Oricent Object) 有很大的不同,要是用面向对象的思想去理解的话会很费解。如果想彻底搞清楚 JS 的话,一定要深入研究 JS 的 Prototype 原理。本节不打算深入讲解 Prototype,只是打算把最常见的 JS "class" 的用法说明白。


因为野路子太多,包括 jquery zepto bootstrap  等知名类库各有各的手法去实现 JS 的 class,导致大家失去了标准的参考,五花八门,让大家眼花缭乱。我这里讲的是最标准的写法,我很欣喜的看到在 bootstrap alpha5 开始全部改为了这种写法。


<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	
</body>
</html>

<script src="view/js/jquery-3.1.0.js"></script>

<script>

var Tree = function(options) {
	this.options = {
	};
	this.icon = {};
	$.extend(this.options, options);
	this.init();
};

Tree.prototype.init = function() {
	var jnode = $('<img src="view/img/logo.png" />').appendTo('body');
	
	// 默认 event 会被当做第一个参数传递进去
	// 错误的写法
	jnode.on('click', function(e) {
		// this 指向 [DOM IMG] 节点
		this.click_node(e);
	});
	
	// 1. this 在闭包中会被改变为 click 选中的 [DOM node
	jnode.on('click', this.click_node);
	/**/
	
	// 2. 把 this 通过闭包“封”进去,常见写法,命名一般叫 _this that me sel
	var _this = this;
	jnode.on('click', function(e) {
		// this 指向 [DOM IMG] 节点
		// _this 指向 t1 t2 实例
		_this.click_node(e);
	});
	/**/
	
	// 3. ES6 箭头函数,this 自动闭包进去
	jnode.on('click', (e) => 
		// this 指向 t1 t2 实例
		this.click_node(e);
	})
	/**/
	
	// 4. 通过 call() apply() 改变对方的上下文(this) 环境
	var _this = this;
	jnode.on('click', function(e) {
		_this.click_node.call(_this, e);
		//_this.click_node.apply(_this, [e]);
	});
	/**/
};

Tree.prototype.click_node = function(e) {
	// this === window
	//console.log(this === t1);
	//console.log("click_node() this: ", this);
	this.show_name();
}

Tree.prototype.show_name = function() {
	alert(this.options.name);
}

var t1 = new Tree({name: "tree1"});
var t2 = new Tree({name: "tree2"});

</script>


ES6 的箭头函数是比较方便的,但是 IE10 不支持。

转载请注明出处:http://bbs.xiuno.com/thread-15543.htm


最新回复 (1)
返回
发新帖