js this指向问题

页面导航:首页 > 网络编程 > JavaScript > js this指向问题

js this指向问题

来源: 作者: 时间:2016-01-19 18:32 【

js this指向问题今天就专门总结一下js中this的指向问题。今天通过题目的方式理解一下this指向,就不从理论上深入了,理论放在以后对闭包、作用域链等总结时候再与此联系起来。先来几

js this指向问题

今天就专门总结一下js中this的指向问题。今天通过题目的方式理解一下this指向,就不从理论上深入了,理论放在以后对闭包、作用域链等总结时候再与此联系起来。

先来几条纲领:

1.函数在被直接调用的时候,其中的this指针永远指向window
2.匿名函数this总是指向window对象
3.谁执行函数,this就指向谁

4.如果函数new了一下,那么就会创建一个对象,并且this指向新创建的对象

 

下面通过大量例子的对比来理解this指向

 

var name = win;

var obj = {
	name: obj,
	func: function() {
		var self = this;

		console.log(this.name);// obj
		console.log(self.name);// obj
                //a方法
		(function() {
			console.log(this.name);// win
			console.log(self.name);// obj
		}());
                //b方法
		(function() {
			console.log(this.name);// win
			console.log(self.name);// obj
		})();

		setTimeout(function(){
			console.log(this.name);// win
			console.log(self.name);// obj
		}, 100);
	}
}
obj.func();
这个题目中,用了一个self的变量将this的指向保存了下来,obj外面的name是个全局变量。

 

a方法和b方法效果其实是一样的,因为它们都是匿名函数,根据规则2,此时this指向window,因此this.name相当于window.name,结果自然是win

setTimeout中第一个参数同样是一个匿名函数,它的this同样指向window,结果同样是win

而self是obj事先保存下来的this指向,它始终指向obj,因此this.name相当于obj.name,结果自然是obj

-----------------------------------分割线-----------------------------------

 

var name = the window;
var obj = {
	name: my object,
	getName: function() {
		return this.name;
	}
};
//1
console.log( obj.getName() ); // my object
//2
console.log( (obj.getName = obj.getName)() ); // the window
//3
var temp = obj.getName;
temp(); // the window
//4
console.log( obj.getName.call(window) ); // the window
//5
console.log( obj.getName.apply(window) ); // the window
//6
console.log( obj.getName.bind(window)() ); // the window
第1个应该没什么疑问,this指向obj

 

第2个这种写法将this指向改变了,this指向window

第3个与第2个类似,temp中window环境下执行,因此this指向window

第4、5、6都是强行将方法getName绑定到window上执行,因此this很自然的指向window


-----------------------------------分割线-----------------------------------

 

function test() {
	this.number = 10;
	alert(this.number);
	(function() {
		alert(this.number);
	}());
};
test();// 10 10
test方法在window环境下执行,此处第一个this指向window就没有疑问了。至于第二个,根据规则2可解释,this指向window

 

 

function test() {
	this.number = 10;
	alert(this.number);
	(function() {
		alert(this.number);
	}());
};
new test();// 10 undefined
此处函数test被new了一下,根据规则4,如果函数new了一下,那么就会创建一个对象,并且this指向新创建的对象,此时第一个this指向test对象。第二个根据规则2,this指向window

 

这里有个类似的小题目,可以练习一下:

 

var a = 5;
function test(){
    a = 0;
    console.log(a);
    console.log(this.a);
    var a;
    console.log(a);
}
test();// ?
new test();// ?
tip: 这里还涉及到对变量提升的理解

 

-----------------------------------分割线-----------------------------------

var length = 100;
function fn(){
    console.log(this.length)
}
function Test(a, b){
	var t1 = arguments.length;
	var t2 = Test.length;
	console.log(arguments[0]);
	console.log(a);
	console.log(a === arguments[0]);// true
	a();// 100
	arguments[0]();// 4
	console.log(t1, t2);// 4 2
}
Test(fn, fn, fn, fn);
arguments.length表示实际参数个数,Test.length表示定义形参个数

 

大家可以思考下a()和结果与arguments[0]()执行的结果为什么不相同呢?明明 a === arguments[0] 返回true

原来,就是因为this在作怪。a()执行时是在window环境下的,因此this指向window。而arguments[0]()执行时却是在对象arguments环境下执行的,this指向arguments,求它的length属性,自然是4,因为它的实际参数确实是4个
-----------------------------------分割线-----------------------------------
来一道比较坑的题目^_^

 

var number = 2;
var obj = {
	number: 4,
	fn1: (function(){
		this.number *= 2;
		number = number * 2;
		var number = 3;

		return function(){
			this.number *= 2;
			number *= 3;
			console.log(number);
		}
	})(),
	fn2: function(){
		this.number *= 2;
	}
};
//第一步
var fn1 = obj.fn1;
//结果: window.number == 4, number == 3, obj.number == 4
console.log(number);// 4

//第二步
fn1();// 9
//结果: window.number == 8, number == 9, obj.number == 4

//第三步
obj.fn1();// 27
//结果: window.number == 8, number == 27, obj.number == 8

console.log(window.number);// 8
console.log(obj.number);// 8

 

首先要明确:obj.fn1在定义的时候就执行了前面3行,并返回了一个函数,由于是闭包,obj.fn1中的内容执行完毕后并没有被销毁,而是保留在了内存中。

第一步,将obj.fn1执行后返回的函数赋给全局变量fn1。

函数执行时,this.number *= 2,根据规则2,this指向window,相当于执行window.number *= 2,原本window.number定义为2,因此此时window.number == 4。

number = number * 2; var number = 3;这里涉及到变量提升,等价代码如下:

 

var number;
number = number * 2;
number = 3;
第1行执行完毕number为undefined;第2行执行完number为NaN;第3行执行完number为3;因此这里的number = number * 2;并没有什么卵用

 

好了,第一步执行完,整理一下此时各个变量的值:

window.number == 4, number == 3, obj.number == 4
第二步,执行函数fn1,也就是:

 

this.number *= 2;
number *= 3;
console.log(number);
此时在window下执行fn1,因此this指向window,上一步执行完window.number == 4,执行完this.number *= 2后window.number变成了8

 

轮到执行number *= 3了,我们发现fn1中并没有number的定义,需要到上一级的作用域中寻找number,之前已经说了,闭包并没有销毁,依然保存在了内存中,第一步执行完后结果为3,因此这里执行完number *= 3后number的值变为9

 

第二步执行完,整理一下此时各个变量的值:

window.number == 8, number == 9, obj.number == 4

第三步,执行obj.fn1,根据规则3,此时this指向obj,obj.number == 4

obj下执行:

 

this.number *= 2;
number *= 3;
console.log(number);
第1行,this.number *= 2相当于obj.number *= 2,执行完后,obj.number == 8;

 

第2行,number *= 3执行,原来保存下来的number == 9,执行完后,number == 27

第三步执行完,整理一下此时各个变量的值:
window.number == 8, number == 27, obj.number == 8
-----------------------------------分割线-----------------------------------

最后还有个练习题目:

 

function test() {
	this.data = 5;
	this.log = function() {
		console.log(this.data);
	}
}
var a = new test();
a.log();// ?
(a.log)();// ?
(a.log = a.log)();// ?

var b = a.log;
b();// ?

(function(){
	a.log();// ?
})();

setTimeout(a.log, 100);// ?

setTimeout(function(){
	a.log();// ?
}, 100);

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<