学习javascript基础知识系列第三节

总目录：通过一段代码学习javascript基础知识系列

 

注意：

为了便于执行和演示，建议使用chrome浏览器，按F12,然后按Esc（或手动选择）打开console，在console进行执行和演示。

由于代码中使用了console.log或dir方法，因此如果在ie中执行，请自行替换为alert或注释掉。

第三节 - ()()用法

在JS中，有一种特殊的写法，就是两个小括号，如下（代码一）：

 

(function(){
	console.log("执行");
})();

这段代码会在页面加载的时候直接执行，在控制台输出“执行”。

这段代码的等价代码为（代码二）：

 

function Run(){
	console.log("执行");
}
Run();

就是创建了一个函数，然后执行。代码一还有另外一种形式（代码三）：

 

(function(){
	console.log("执行");
}());

代码三和代码一的差别就在最后一对小括号写在里面或者外面，效果是一样的。

在上一节中，讲解了this的用法，而在()()和this同时出现时，如果不了解本质，我们可能还会分不清this的指向，

这里举几个例子说明this在()()中的判断。

下面这段代码（代码四）是在代码一的基础上增加了this.blog = "isea533"。

(function(){
	this.blog = "isea533";
	console.log("执行");
})();

这段代码执行之后，我们可以在console中输入blog查看，结果为“isea533"，

这就说明了this是指向全局的。按照我们上一节的来讲，同时看这段代码的等价代码二，

我们可以知道这段代码其实就是作为函数执行的，所以this在这里就是window对象。

再看一种稍微复杂的情况（代码五）：

 

function Five(){
	var blog = "isea533";
	this.blog = "isea";
	(function(){
		console.log(blog);
		console.log(this.blog);
	})();
}

对这段代码，有两种执行方式，一种作为函数执行，一种作为构造函数执行，这两种情况的结果是不一样的。

我们先按函数执行Five();

我们可以看到两个blog都输出了。我们再看另一种情况：

这里可以看到blog输出了，this.blog为undefined，这就说明了在Five对象中的()()方法里面，this仍然是指向全局的。

第一种情况的时候，应为Five()为函数执行，所以创建了全局变量blog，所以执行的时候能够输出Isea，

而第二种情况时，由于是构造函数，所以this.blog="isea"并没有执行，因而下面执行的时候，是没有定义的。

我们可以将Five方法按照代码二的形式进行改造，如下（代码六）：

 

function Five(){
	var blog = "isea533";
	this.blog = "isea";
	function run(){
		console.log(blog);
		console.log(this.blog);
	}
	run();
}

这里的run也是仅仅作为函数执行的，所以指向的是全局变量。

我们在看一种情况，当函数作为对象的方法执行的时候（代码七）：

 

function Five(){
	var blog = "isea533";
	this.blog = "isea";
	this.run = function(){
		console.log(blog);
		console.dir(this);
		console.log(this.blog);
	}
	this.run();
}

当我们执行var f = new Five();时，输出结果如下图：

我在这儿用dir输出了this的结构，可以看到this指向的当前的对象，blog和this.blog都输出了，

这里的blog是局部对象，this.blog是当前对象的一个属性，所以都会正常输出。

看到这里，如果你还够清醒，我们继续往下看看两种简单的使用方式。

第一种，带参数的()()，如下代码（代码八）：

 

(function(blog){
	console.log("Hello "+blog);
})("isea533");

function有一个参数blog,我们在第二个括号 ()("isea533") 传入了参数。

第二种，带返回值的()()，如下代码（代码九）：

 

var result = (function(blog){
	var a = 4,
		b = 6;
	return a+b;
})();

这段代码执行后，result = 10;

第二种情况，在稍加复杂后，如下代码（代码十）：

 

var result = (function(blog){
	function Five(){
		var blog = "isea533";
		this.blog = "isea";
		this.run = function(){
			console.log(blog);
			console.log(this.blog);
		}
	}
	return new Five();
})();

返回的result为Five对象的实例。

上述内容为个人理解，如果有错误的地方，希望可以指正。

参考内容：

JavaScript 两个小括号 ()() 对执行上下文的影响

js 两个小括号 ()() 的用法