你了解javascript中的function吗?(1)
上一篇文章中 介绍了function在javascirpt作为一等公民所担任的重要责任,在不同 的上下文中它担任着不同的角色,
在对象内部它可以是函数,同时又能充当名字空间,不仅如此所有的function都是闭包。看起来它的确是了不得,
不过除 此之外,function还能担当构造函数,亦或者说它同时还是一个类的声明。
这篇文章的目的向大家详细介绍function是如何作为构造函数。
如何定义一个函数
- 声明式
函数定义最常用的方式之一。
//声明函数
function add(x, y) {
return x + y;
} //声明构造函数
function Animal(name, age) {
this.name = name;
this.age = age;
} Animal.prototype.bark = function() {return 'bark'};
其实这两种发式完全一样,没有任何区别,你同样可以为add的prototype属性增加新的函数或者属性。
不过两种方式是基于不同的用途产生的,我们之所以称后者为构造函数,仅仅因为它的命名和函数实现。
命名: 对于构造函数我们遵循首字母大学的规则以区别普通函数和方法,这和java中对于类的定义是非常相似的。
实现: 构造函数是我们用来生产实例对象的工具,它通长与new关键字连用,如
var dog = new Animal('pipi', 3);
dog; // Animal {name: "pipi", age: 3}
同时你可能也注意到了Animal中使用到了this关键字,通长情况下this会指向函数的调用对象,
也就是说如果你在浏览器中运行一下代码,你应该得到window对象:
1 function getThis() {return this};
2 getThis(); //window
试想一下,如果你这样使用构造函数:
var dog = Animal('pipi', 3);
这段代码会产生什么有趣的结果呢?
恭喜你!你中招了!
你会发现,你的window对象新增加了两个属性, 同时没有任何对象产生:
window.name === 'pipi'; //true
window.age === 3 //true
dog === undefined; //true
对比使用构造函数的两种方式,其实这都是new在作怪,当我们在像使用java类那样对构造函数new出javascript对象时,
它帮我们完成了一些magic(这也是javascript new关键字被人诟病的地方),我们不妨来一次魔术揭秘:
//魔术
var dog = new Animal('pipi', 3); //揭秘
function newAlternative(constructor, name, age) {
var obj = {};
//修改this,指向新对象obj
constructor.call(obj, name, age);
//使实例对象继承构造函数
obj.__proto__ = constructor.prototype;
return obj;
}
var dog = newAlternative(Animal, 'pipi', 3);
dog; //Animal {name: "pipi", age: 3, bark: function}
因此,我们需要非常细心的处理函数,如果它就是‘类’那么请根据潜规则,首字母大写它,并且在使用的时候一定要与new连用。
- 匿名
匿名函数广泛在javascript代码中使用,先看看这段代码:
//定义处理元素的匿名函数
[1,2].map(function(e) {return e + 2}); //定义匿名构造函数
var Animal = function(name, age) {
this.name = name;
this.age = age;
}
Animal.prototype.bark = function() {return 'bark'}; Animal.name === ''; //true
- Function
相对与前两种方式,使用Function来定义一个新的function相对少见。如果说构造函数是为生成实例对象而生,
那么Function就是为生成函数而生,它是生成函数的模板,构造函数,‘类’.
var Animal =
new Function('name', 'age', 'this.name = name; this.age = age;');
Animal.prototype.bark = function() {return 'bark'};
虽然这种方式在实际开发中很少被用到,但是它对我们理解函数的生成过程有帮助作用,对比一下两组代码,
我们不难发现Animal其实就是Function的实例对象,就如同dog是Animal的实例对象一样。
Animal.__proto__ === Function.prototype //true
var dog = new Animal('pipi', 3);
dog.__proto__ === Animal.prototype; //true
总结
函数在javascirpt中起着至关重要的作用,构造函数是其中一种特殊的函数,他通过和new关键字搭配使用,
帮助我们完成看起来与普通面向对 象相似的对象构造过程,不过这仅仅是想像而已,我们必须理解其中的奥秘才能是我们不会在编码过程中犯错。
有了对函数的理解,接下来我们变可以将解javascript中的另外一个非常关键的语言特性,继承机制–原型链,敬请期待。
你了解javascript中的function吗?(1)的更多相关文章
- JavaScript中的Function(函数)对象详解
JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器: 作为对象方法: 作为构造函数. 1.作为普通逻辑代码容器 function multiply(x, y ...
- javascript中的function命名空間與模擬getter、setter
function的命名空間 在javascript中,function也可以擁有自己的命名空間例如以下這段程式碼: 12345678 function () { return 'I am A';} A ...
- javascript中的Function和Object
写的很好,理解了很多,特此转发记录 转自:http://blog.csdn.net/tom_221x/archive/2010/02/22/5316675.aspx 在JavaScript中所有的对象 ...
- 浅谈JavaScript中的Function引用类型
引言 在JavaScript中最有意思的就是函数了,这一切的根源在于函数实际上是一个对象.每一个函数都是Function类型的实例,而且都和其他引用类型的实例一样具有属性和方法.函数作为一个对象,因此 ...
- 深入理解javascript中的Function.prototye.bind
函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...
- javascript中的function
function / 对象 所有的变量和方法名的:以字母,$ _开头其他随便,尽量使用英文字母命名,见名知意注意点:不允许使用关键字定义变量和方法的名称====函数即方法,方法即函数====百度:ja ...
- javascript中的function对象
function对象都是Function的实例: > Object.getOwnPropertyNames(Function) [ 'length', 'name', 'arguments', ...
- JavaScript中的Function(函数)对象
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...
- 理解javascript中的Function.prototype.bind
在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...
随机推荐
- js 求时间差
var date1=new Date(); //开始时间 var date2=new Date(); //结束时间 var date3=date2.getTime()-date1.getTim ...
- Sql server之sql注入篇
SQL Injection 关于sql注入的危害在这里就不多做介绍了,相信大家也知道其中的厉害关系.这里有一些sql注入的事件大家感兴趣可以看一下 防范sql注入的方法无非有以下几种: 1.使用类型安 ...
- proteus 运行出错,用户名不可使用中文!
仿真的时候提示如图提示 cannot open ’c\user\小名\AppData\local\temp\LISA0089.sdf’ 系统用户名不能是中文! 解决办法:重新建立个账户,记得用英文命名 ...
- centos yum源配置
5步搞定yum源配置 作者小波/QQ463431476欢迎转载! 第一步: 卸载原来的yum [root@localhost home]#rpm -qa|grep yum|xargs rpm -e - ...
- (转)linux下vi命令大全
http://www.cnblogs.com/88999660/articles/1581524.html 进入vi的命令 vi filename :打开或新建文件,并将光标置于第一行首 vi +n ...
- 其实今天没有欲望..-MySQLi
hi 中午爽爽的游了会儿泳,但是下午把一拳超人看完了,竟然萌生不出学习的欲望了...强迫自己更新点东西吧,一会儿看书去. 1.MySQLi 二.MySQLi基于OOP的编程 2.1 使用解析 --基本 ...
- 第8章 用户模式下的线程同步(4)_条件变量(Condition Variable)
8.6 条件变量(Condition Variables)——可利用临界区或SRWLock锁来实现 8.6.1 条件变量的使用 (1)条件变量机制就是为了简化 “生产者-消费者”问题而设计的一种线程同 ...
- OAuth2学习及DotNetOpenAuth部分源码研究
OAuth2学习及DotNetOpenAuth部分源码研究 在上篇文章中我研究了OpenId及DotNetOpenAuth的相关应用,这一篇继续研究OAuth2. 一.什么是OAuth2 OAuth是 ...
- Maven学习(七)仓库
* Maven仓库 在项目开发中, 项目目录下往往会有一个lib目录,用来存放第三方依赖jar文件, 如spring log4j jar等文件, Maven仓库就是放置JAR文件(WAR,ZIP,P ...
- 已Access为支持,书写一个C#写入的记录的方案
/// <summary> /// 读取Excel文档 /// </summary> /// <param name="Path">文件名称 ...