JavaScript中以构造函数的方式调用函数

转自:http://www.cnblogs.com/Saints/p/6012188.html

构造器函数(Constructor functions)的定义和任何其它函数一样,我们可以使用函数声明、函数表达式或者函数构造器(见以前的随笔)等方式来构造函数对象。函数构造器和其它函数的区别在与它们的调用方式不同。

  要以构造函数的方式调用函数,只需要在调用时在函数名称前加new 关键字,比如:function whatsMyContext(){ return this; }; 调用:new whatsMyContext();

  以构造函数的方式调用函数是JavaScript中非常强大的特性,下面来探究它的神秘之处:


1

2

3

4

5

6

7

8

9

10

11

12

13

function Ninja() {

  this.skulk = function() {

    return this;

  };

}

var ninja1 = new Ninja();

var ninja2 = new Ninja();

assert(ninja1.skulk() === ninja1,

  "The 1st ninja is skulking");

assert(ninja2.skulk() === ninja2,

  "The 2nd ninja is skulking");

  

上面的demo中,首先定义了一个构造器函数,这个构造器函数会在函数的上下文对象上创建一个名为shulk的函数属性。接着通过以构造函数的方式调用函数Ninja来创建两个Ninja(类型)对象,并且分别被ninja1和ninja2引用,最后通过自定义函数assert来验证每个对象的skulk方法,每个shulk方法应该返回每次以new的方式调用Ninja时构造出来的函数对象。

  下面来看一下这个过程中发生了什么:

  1.一个全新的空的对象被创建;

  2.这个空的对象被传递到构造器函数并且作为它的this参数,因此成为了这个构造器函数的上下文对象;

  3.在这个新的空的对象上添加属性,shulk

  4.这个被构造出来的对象被作为函数的返回值返回。

  使用构造器函数的目的是为了创建新的对象,对这个对象进行操作并且这个对象作为构造器函数的返回值返回。任何和这个目的无关的函数都不适合作为构造器函数。在函数没有返回值的时候以构造函数的方式调用这个函数会返回新创建的上下文对象,那么在函数返回一个值(基本类型)的时候会有什么变化吗?看下面的例子:


1

2

3

4

5

6

7

8

9

10

11

12

13

function Ninja() {

  this.skulk = function () {

    return true;

  };

    return 1

}

assert(Ninja() === 1,"Return value honored when not called as a constructor");

var ninja = new Ninja();

assert(typeof ninja === "object","Object returned when called as a constructor");

assert(typeof ninja.skulk === "function","ninja object has a skulk method");

 

 运行上面的例子,所有的断言都可通过,事实上Ninja函数返回一个简单类型的值1对代码的执行没有产生任何影响:如果以函数的方式调用Ninja它将返回1,而以构造函数的方式调用它,会返回new产生的函数上下文对象。 如果函数返回另一个对象会发生什么?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

var puppet = {

  rules: false

};

function Emperor() {

  this.rules = true;

  return puppet;

}

var emperor = new Emperor();

assert(emperor === puppet,

  "The emperor is merely a puppet!");

assert(emperor.rules === false,

  "The puppet does not know how to rule!");

  

这次和上面的例子不同,首先创建一个puppet对象并把它的rules属性设置为false;接着定义一个名为Emperor的函数,并且把它的上下文变量的rules属性设置为true,但是函数最后却把全局的puppet对象作为返回值返回。再接着以构造函数的方式调用Emperor函数;这样产生一个有歧义的情况,我们获得了一个作为函数上下文的对象(this),但是却返回了一个完全不同的对象,这种情况下哪一个对象会被返回呢?

  根据后面assert函数的断言测试可以看到,被返回的是puppet函数。下面来总结一下:

  1.如果构造器函数返回一个对象,这个对象会作为new表达式的返回值返回,在以new方式调用函数时产生的作为函数上下文(this)的对象会被丢弃;

  2.如果构造器函数没有返回对象(返回值为值类型),这个返回的值会被丢弃,以new方式调用函数时产生的作为函数上下文(this)的对象会被返回。

  构造器函数的代码习惯:

  构造器函数的目的是为函数调用时产生的上下文对象进行初始化并返回这个对象,虽然这些构造器函数可以以函数或者方法的形式调用,通常情况下那么做并没有什么意义,比如:

function Ninja() {
    this.skulk = function() {
      return this;
    };
}
var whatever = Ninja();

  简单的以函数方式调用Ninja,skulk会被绑定到全局变量window上(非严格模式下),这不是特别有用的操作,在严格模式下更没有意义,因为上下文对象this为undefined,因此会抛出不能为undefined设置属性的异常。在非严格模式下,这样做很容易出现莫名其妙的状况,这很难被察觉到因为它没有抛出任何异常。

  因为构造器函数也是普通的函数,只是使用不同的方式调用而已,通常情况下,对于构造器函数的定义有不同的命名习惯:

  以动词开头用以描述它是来做什么的并且首字母小写的函数名适合普通的函数或者对象的方法;构造器函数的命名通常是一个名词,用来描述要创建的对象,首字母通常大写。

时间: 2024-10-27 06:03:33

JavaScript中以构造函数的方式调用函数的相关文章

JavaScript中的构造函数和工厂函数

JavaScript中的工厂函数 1 function crateHero (name,blood,weapoon) { 2 var o = new Object(); 3 o.name = name; 4 o.blood = blood; 5 o.weapoon = weapoon; 6 o.attch = function () { 7 console.log(this.name+"用"+this.weapoon+"进行了攻击"); 8 } 9 return o

JavaScript中的bind,call和apply函数的用法和区别

一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式,总结下来,有以下4种 1. 方法调用 2. 正常函数调用 3. 构造器函数调用 4. apply/call 调用 要明白的第2个概念, JavaScript 中的函数,无论是上面哪种函数调用方式,除了你函数声明时定义的形参外,还会自动给函数添加两个形参,分别是this 和 arguments 要明白

在C语言中以编程的方式获取函数名

调试常用的 __FILE__, __FUNCTION__, __LINE__ 调试常用的 __FILE__, __FUNCTION__, __LINE__ 没想到 VC6 不支持 __FUNCTION__ 所以我写了如下的奇怪代码 //用来记录当前行和当前函数//也可说是记录 堆栈void log_stack(const char *file, int line, const char * function); //当然还要对 __FUNCTION__ 宏作点修饰,因为这个宏只是在函数里面才起作

JavaScript中bind、call、apply函数用法详解

在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手.前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务器的程序猿看<javascript编程精粹> 这本书,crockford大神果然不是盖的.之后我在segmentfault上又看到了类似的问题,那边解答之后干脆这里记一笔. 首先,关于 js 定义类或对象的方法,请参看w3school 的这里的这里,写的非常详细和清晰,我不再赘言了. 为了介绍 b

Javascript中bind、call、apply函数用法

js 里函数调用有 4 种模式:方法调用.正常函数调用.构造器函数调用.apply/call 调用. 同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和arguments. arguments 不涉及到上述 3 个函数,所以这里只谈 this.this 的值,在上面 4 中调用模式下,分别会绑定不同的值.分别来说一说: 方法调用: 这个很好理解,函数是一个对象的属性,比如 var a = { v : 0, f : function(xx) { this

Javascript中的构造函数与原型

构造函数 构造函数,是一种特殊的方法.主要用来创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.特别的一个类可以有多个构造函数,可根据其参数个数的不同或参数类型的不同来区分它们即构造函数的重载. 示例: <span style="font-size:18px;">function Box(name,age) { this.name=name; this.age=age; this.run=function(){ return thi

JavaScript中七种函数调用方式及对应 this 的含义

http://blog.sina.com.cn/s/blog_621f1e120100rj21.html this 在 JavaScript 开发中占有相当重要的地位,不过很多人对this这个东西都感觉到琢磨不透.要真正理解JavaScript的函数机制,就非常有必要搞清楚this到底是怎么回事. 函数调用方式不同,this 含义也跟着不同.JavaScript语言中有七种调用函数方式: 第一种:调用方法var obj = {    method: function() { alert(this

Javascript中实现继承的方式

js中实现继承和传统的面向对象语言中有所不同:传统的面向对象语言的继承由类来实现,而在js中,是通过构造原型来实现的,原型与如下几个术语有关: ①构造函数:在构造函数内部拥有一个prototype属性,这个属性指向原型.在js中,构造函数和函数是属于一个概念范畴,都是引用类型,都可以实例化为对象.唯一不同的地方是使用上的不同,用new关键字来调用函数就能让这个函数变成一个构造函数,这一点很好理解,因为在像java.C#这中类C语言中构造函数就是和方法是同名的.而如果要实例化一个类,那么就用new

JavaScript中的构造函数

function Accom(){};    //创建一个构造函数 //创建两个对象 var house=new Accom(); var apartment=new Accom(); 通过构造函数创建的对象有一个属性constructor,这个属性指向创建该对象时所用的Javascript构造函数. house.constructor===Accom;  或者   house instanceof Accom;     //true JavaScript中的每个构造函数都有一个prototyp