你了解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赋值给一个变量(比如 ...
随机推荐
- Java for XML: JAXP、JAXB、JAXM、JAX-RPC、JAX-WS
在XML领域里,对XML文件的校验有两种方式:DTD校验.Schema校验.在Java中,对于XML的解析,有多种方式:DOM解析.SAX解析.StAX解析.结合XML和Java后,就产生了Bind技 ...
- Access界面基础操作
1. 显示表 2. 条件“或” SELECT 研究生.姓名, 研究生.性别, 研究生.入学分数 FROM 研究生 WHERE (研究生.性别="女" AND 研究生.入学分数< ...
- H264解码学习-2015.04.16
今天看了不少,却感觉收获寥寥. 1.H264相关知识 因为RTP协议发过来的数据已经经过了H264编码,所以这边需要解码.补充一下H264的相关知识. 与以往的视频压缩标准相比,H.264 视频压缩标 ...
- java web 中的servlet讲解
首先,解释一下解释一下什么是servlet?说一说Servlet的生命周期? servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet ...
- W3School-CSS 背景实例
CSS 背景实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
- 烂泥:高负载均衡学习haproxy之关键词介绍
本文由ilanniweb提供友情赞助,首发于烂泥行天下 上一篇文章我们简单讲解了有关haproxy的安装与搭建,在这篇文章我们把haproxy配置文件中使用到的关键词一一介绍下. 关注我微信ilann ...
- x01.os.10: 输入输出
从 x01.Lab.Download 中下载源代码,进入工程目录,make 后再 bochs,即可见到如下界面: 随便打几个字,ok!按 F2,可切换到第二个终端,界面如下: 当然,按 F3 还可切换 ...
- android 新建项目中去掉标题栏
1.新建new android application project theme选none 并打钩创建一个Blank Activity 运行如下图所示: 2.若想把标题栏去掉,更改Manifestr ...
- Linux 解压缩命令
gzip 文件 压缩文件 gzip -d 文件 解压文件 zcat 查看以结尾为zip 文件 bzip2 压缩文件 bzip2 -d 文件 解压文件 bzcat 查看以结尾为zip2 文件 zip ...
- 基于Qt5.5.0的sql,C++备忘录软件的编写
我的第一个软件. 基于Qt5.5.0的 sql ,C++备忘录软件version1.0的编写 我用的Qt版本是5.5.0免配置编译器的版本,这里附上我使用的软件下载地址:http://download ...