学习javascript基础知识系列第三节 - ()()用法

原创 2013年08月25日 13:13:53

总目录:通过一段代码学习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 两个小括号 ()() 的用法


版权声明:版权归博主所有,转载请带上本文链接!联系方式:abel533@gmail.com

UML 的九种模型图--UML建模基础知识

Trufun Plato Trufun Plato是新一代的UML建模软件,它将为您的软件分析设计提供高效快捷的建模工具。Trufun是在OMG发布UML2.2规范之后同步发布UML2.X工具的...
  • aswallow0323
  • aswallow0323
  • 2016年05月30日 16:33
  • 812

学习javascript基础知识系列第二节 - this用法

通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascr...
  • isea533
  • isea533
  • 2013年08月24日 12:57
  • 1970

链表学习系列——1 基础概念之单向链表

声明:个人所写所有博客均为自己在学习中的记录与感想,或为在学习中总结他人学习成果,但因本人才疏学浅,如果大家在阅读过程中发现错误,欢迎大家指正。 一、关于顺序存储和链式存储 用数组存储数据元素,数...
  • Angel_94
  • Angel_94
  • 2016年03月07日 16:21
  • 529

javaScript学习基础知识汇总

•一:学习要求 •熟悉html,div+css •肯做练习 •好了,没有第三条,不要求会html5、css3,不要求数学好英语棒,不要求你有程序基础,不要求你逻辑性很好,认真听讲,多做练习,足以。 •...
  • u013604031
  • u013604031
  • 2016年01月04日 09:27
  • 1275

java 学习第三节--this的用法

this关键字主要有三个应用: (1)this调用本类中的属性,也就是类中的成员变量; (2)this调用本类中的其他方法; (3)this调用本类中的其他构造方法,调用时要放在构造方法的首行。...
  • h514476785j
  • h514476785j
  • 2016年08月16日 11:32
  • 133

javascript—新手必备、零基础学习

本书目录 第一章:  JavaScript语言基础 第二章:  JavaScript内置对象 第三章:  窗口window对象 第四章:  文档document对象 第五章:  表单form对象 第...
  • u013321328
  • u013321328
  • 2015年02月06日 13:27
  • 1646

javascript基础知识

1.延迟脚本问题: 习惯性的是在页面的head中引入js 这种意味着必须等到js代码都被下载、解析和执行完之后,才能呈现页面的内容(浏览器在遇到时才开始呈现页面内容),对于需要引入很多js文件来...
  • lzy295481710
  • lzy295481710
  • 2016年07月20日 17:49
  • 365

oracle数据库基础知识学习笔记

一、SQL语言分类: 1.DDL(数据定义语言):  create(创建)    alter(修改)  drop(删除)------------主要是对表操作。   2.DML(数据操作...
  • u011955534
  • u011955534
  • 2013年11月04日 18:52
  • 6315

链表基础知识

链表之前要有一定的C语言基础,如指针,结构体,分配内存malloc等,切勿操之过急。 第一次接触可能有点难度,我是把书上的代码反复敲,反复看注释,搞了好几天,才渐渐懂了。 闲话少说,上代码。 ...
  • xuhang0910
  • xuhang0910
  • 2015年06月01日 20:28
  • 672

Quartz.NET学习系列(四)--- 数据注入

Quartz.NET中任务是需要额外新建一个类继承IJob的,方法入参和出参都是已经规定好了的,这时要想传额外参数就得借助Quartz.NET的内置的对象IJobExecutionContext 通...
  • Eye_cng
  • Eye_cng
  • 2015年03月14日 19:43
  • 1765
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:学习javascript基础知识系列第三节 - ()()用法
举报原因:
原因补充:

(最多只允许输入30个字)