博客

对于js初学者来说,this指向问题把不少人搞得头大.记得我初学js的时候,也是如此.后来也是不断查资料.今天就聊聊js中this指向的几种形式.

注意:以下几种形式皆是es3.1语法下,也就是非严格模式下的this指向;因为es5和es6中,都对this指向做了不同程度的改变;以后有时间了在一起聊聊es5和es6中的this.建议大家拥抱es6.

第一种: 自执行函数执行,函数内的this都指向window;

            (function() {
			console.log(this);
		})();    // window

第二种: 给元素的某一个行为绑定方法,方法中的this是当前元素;

<div id="app">123</div>
	<script>
		var div = document.getElementById("app");
		div.onclick = function() {
			console.log(this);  // <div id="app">123</div>

		}

      </script>

第三种: 当方法名执行,看前面有没有点儿,有点儿,前面是谁,this就是谁.没有点儿,this就是window;

        var obj = {
			name: "qingwa",
			age: 28,
			fn: function() {
				console.log(this.name);  // qingwa;
				console.log(this);  // obj;
			}

		}

		obj.fn();

        function fn() {
			console.log(this); // window
		}

		fn();

第四种: 在构造函数模式当中,函数体当中,this.xxx=xxx.是当前类的实例;

                    function Person(name, age) {
			this.name = name; // this指per1;
			this.age = age;		// this指per1;
								
		}

		var per1 = new Person("qingwa", 28);

第五种: 我们还可以使用call,apply,bind来改变this的指向;且均比以上四种权重要高;因为这三种方法也需要一些时间来说.所以,以后有时间在聊聊改变this指向的问题;

以上四种方法基本囊括了js里所有的this指向的情况了.当然除了es5,es6的一些改变.或者angular,vue里的组件的this问题.希望对大家有帮助;不足之处,还望指正;