上一篇文章中 介绍了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)的更多相关文章

  1. JavaScript中的Function(函数)对象详解

    JavaScript中的Function对象是函数,函数的用途分为3类: 作为普通逻辑代码容器: 作为对象方法: 作为构造函数. 1.作为普通逻辑代码容器 function multiply(x, y ...

  2. javascript中的function命名空間與模擬getter、setter

    function的命名空間 在javascript中,function也可以擁有自己的命名空間例如以下這段程式碼: 12345678 function () { return 'I am A';} A ...

  3. javascript中的Function和Object

    写的很好,理解了很多,特此转发记录 转自:http://blog.csdn.net/tom_221x/archive/2010/02/22/5316675.aspx 在JavaScript中所有的对象 ...

  4. 浅谈JavaScript中的Function引用类型

    引言 在JavaScript中最有意思的就是函数了,这一切的根源在于函数实际上是一个对象.每一个函数都是Function类型的实例,而且都和其他引用类型的实例一样具有属性和方法.函数作为一个对象,因此 ...

  5. 深入理解javascript中的Function.prototye.bind

    函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...

  6. javascript中的function

    function / 对象 所有的变量和方法名的:以字母,$ _开头其他随便,尽量使用英文字母命名,见名知意注意点:不允许使用关键字定义变量和方法的名称====函数即方法,方法即函数====百度:ja ...

  7. javascript中的function对象

    function对象都是Function的实例: > Object.getOwnPropertyNames(Function) [ 'length', 'name', 'arguments', ...

  8. JavaScript中的Function(函数)对象

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...

  9. 理解javascript中的Function.prototype.bind

    在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...

随机推荐

  1. Java Se :Map 系列

    之前对Java Se中的线性表作了简单的说明.这一篇就来看看Map. Map系列的类,并不是说所有的类都继承了Map接口,而是说他们的元素都是以<Key, Value>形式设计的. Dic ...

  2. x01.os.9: 进程切换

    进入内核后,当然不能无所事事.先创建三个进程,分别打印 A,B,C.虽然只是简单的打印,但却是一切扩展的基础,不可等闲视之. 进程切换,涉及一系列的寄存器需要保护,于是,就有了 ProcessStac ...

  3. shell 面试题

      1. 用sed修改test.txt的23行test为tset:     sed –i ‘23s/test/tset/g’ test.txt 2. 查看/web.log第25行第三列的内容.     ...

  4. 一、Android学习第一天——环境搭建(转)

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 一. Android学习第一天——环境搭建 Android 开发环境的搭建 ...

  5. Linux安装Mysql rpm

    1.安装时候会提示与已经安装的RPM包有冲突,所以我们先卸载一些RPM包,要卸载哪些呢?我们要卸载的是包含有mariadb关键字的RPM包,执行命令:rpm -qa|grep mariadb来查看一下 ...

  6. line-height1.5和line-height:150%的区别

    一.区别 区别体现在子元素继承时,如下: 父元素设置line-height:1.5会直接继承给子元素,子元素根据自己的font-size再去计算子元素自己的line-height. 父元素设置line ...

  7. 《2016ThoughtWorks技术雷达峰会----变革的原因》

    变革的原因      张松 ,ThoughtWorks中国区总经理 首先回顾IT历史,观点如下: 1.在80,90年代,IT作为一个种生产效率的提高工具,主要是把手工的活动自动化.以client se ...

  8. Zookeeper C API 指南三(回调函数)(转)

    2013-02-21 12:54 by Haippy, 9237 阅读, 0 评论, 收藏, 编辑 接上一篇<Zookeeper C API 指南二(监视(Wathes), 基本常量和结构体介绍 ...

  9. 洛谷P1126机器人搬重物[BFS]

    题目描述 机器人移动学会(RMI)现在正尝试用机器人搬运物品.机器人的形状是一个直径1.6米的球.在试验阶段,机器人被用于在一个储藏室中搬运货物.储藏室是一个N*M的网格,有些格子为不可移动的障碍.机 ...

  10. 用jsmooth + inno生成exe并制作简单安装包

    思路: 先由 Jsmooth把jar和相关资源打包生成exe,再由Inno把exe和资源文件打成安装包 一  Jsmooth 1 下载 安装 Jsmooth   地址:jsmooth.sourcefo ...