你了解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赋值给一个变量(比如 ...
随机推荐
- javascript多态 - 类形式实现demo
/* *多态 * 对传入的参数做判断以实现多种调用方式 */ //类形式实现 function Add(){ function zero(){ return 10; } function one(nu ...
- SSRS报表连接超时的问题
这段时间遇到一个问题就是ReportService 中采用了远程连接的报表偶尔会断开连接,导致报表导出异常,查阅了很多资料,几天来就是断断续续的终于解决了这个问题,下面把一些解决的点一一展示出来,便于 ...
- TCP/UDP常见端口参考
著名端口 端口号码 / 层 名称 注释 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat ...
- subversion-1.8.5 windows install dist
python build\win32\make_dist.py subversion-1.8.5 d:/rapm
- java 自动装箱自动拆箱
1.Java数据类型 在介绍Java的自动装箱和拆箱之前,我们先来了解一下Java的基本数据类型. 在Java中,数据类型可以分为两大种,Primitive Type(基本类型)和Reference ...
- linux线程同步(3)-读写锁
一.概述 读写锁与互斥量的功能类似,对临界区的共享资源进行保护!互斥量一次只让一个线程进入临界区, ...
- Terminal中输入命令直接打开QtCreator,以及创建其桌面快捷方式
工业项目设计学习第一步,熟悉开发工具 Qt学习论坛,东西多,但也杂 emouse的博客,以前学习STM32开发环境搭建时也是参考这位博主的 更多详细的步骤在上面都能找到,今天先不写,等明天把硬件设备全 ...
- selenium结合sikuliX操作Flash网页
sikuli的官网地址:http://www.sikuli.org 首先下载sikuliX的jar包:https://launchpad.net/sikuli/sikulix/1.1.0 java-d ...
- 2014 UESTC暑前集训图论专题解题报告
A.方老师和缘分 http://www.cnblogs.com/whatbeg/p/3765621.html B.方老师和农场 http://www.cnblogs.com/whatbeg/p/376 ...
- ASP.NET MVC
ASP.NET MVC 就是根据 Model 2 模式设计的.对于 HTTP 请求的拦截以实现对目标 Controller 和 Action 的解析是通过一个自定义 Http Module 来实现的, ...