跟我学习javascript的函数调用和构造函数调用
一、函数调用
Function绝对是JavaScript中的重中之重。在JavaScript中,Function承担了procedures,methods,constructors甚至是classes以及modules的功能。
在面向对象程序设计中,functions,methods以及classconstructor往往是三件不同的事情,由不同的语法来实现。但是在JavaScript中,这三个概念都由function来实现,通过三种不同的模式。
最简单的使用模式就是function调用:
functionhello(username){ return"hello,"+username; } hello("KeyserSöze");//"hello,KeyserSöze"
二、方法的调用
而methods这一概念在JavaScript中的表现就是,一个对象的属性是一个function:同样的是函数,将其赋值给一个对象的成员以后,就不一样了。将函数赋值给对象的成员后,那么这个就不在称为函数,而应该叫做方法。
varobj={ hello:function(){ return"hello,"+this.username; }, username:"HansGruber" }; obj.hello();//"hello,HansGruber"
真正的行为是,调用本身才会决定this会绑定到哪个对象,即:
obj1.hello()会将this绑定到obj1,obj2.hello()则会将this绑定到obj2。记住一句话,谁调用,this就指向谁
正因为this绑定的这种规则,在下面的用法也是可行的:
functionhello(){ return"hello,"+this.username; } varobj1={ hello:hello, username:"GordonGekko" }; obj1.hello();//"hello,GordonGekko" varobj2={ hello:hello, username:"BiffTannen" };_ obj2.hello();//"hello,BiffTannen"
但是,在一个普通的函数中,如上面的hello函数,使用this关键字是不太好的方式,当它被直接调用的时候,this的指向就成了问题。在这种情况下,this往往被指向全局对象(GlobalObject),在浏览器上一般就是window对象。
而这种行为是不确定和没有意义的。
所以在ES5标准中,如果使用了strictmode,那么this会被设置为undefined:
functionhello(){ "usestrict"; return"hello,"+this.username; } hello();//error:cannotreadproperty"username"ofundefined
以上这种做法是为了让潜在的错误更快的暴露出来,避免了误操作和难以找到的bug。
区别普通函数调用和方法调用,直接看这个例子就明确了。
varfunc=function(){ alert(this); }; varo={}; o.fn=func; //比较 alert(o.fn===func);//true //调用 func();//[objectWindow] o.fn();//[objectObject]
这里的运行结果是,两个函数是相同的,因此打印结果是true。但是由于两个函数的调用是不一样的,func的调用,打印的是[objectWindow],而o.fn的打印结果是[objectObject]。
这里便是函数调用与方法调用的区别,函数调用中,this专指全局对象window,而在方法中this专指当前对象,即o.fn中的this指的就是对象o。
三、构造函数的调用
function的第三种使用模式就是讲它作为constructor:
构造器中的this
我们需要分析创建对象的过程,方能知道this的意义.如下面代码:
varPerson=function(){ this.name="小平果"; }; varp=newPerson();
这里首先定义了函数Person,下面分析一下整个执行:
- 程序在执行到这一句的时候,不会执行函数体,因此JavaScript的解释器并不知道这个函数的内容.
- 接下来执行new关键字,创建对象,解释器开辟内存,得到对象的引用,将新对象的引用交给函数.
- 紧接着执行函数,将传过来的对象引用交给this.也就是说,在构造方法中,this就是刚刚被new创建出来的对象.
- 然后为this添加成员,也就是为对象添加成员.
- 最后函数结束,返回this,将this交给左边的变量.
分析过构造函数的执行以后,可以得到,构造函数中的this就是当前对象.
构造器中的return
在构造函数中return的意义发生了变化,首先如果在构造函数中,如果返回的是一个对象,那么就保留原意.如果返回的是非对象,比如数字、布尔和字符串,那么就返回this,如果没有return语句,那么也返回this.看下面代码:
//返回一个对象的return varctr=function(){ this.name="赵晓虎"; return{ name:"牛亮亮" }; }; //创建对象 varp=newctr(); //访问name属性 alert(p.name); //执行代码,这里打印的结果是"牛亮亮".因为构造方法中返回的是一个对象,那么保留return的意义,返回内容为return后面的对象.再看下面代码: //定义返回非对象数据的构造器 varctr=function(){ this.name="赵晓虎"; return"牛亮亮"; }; //创建对象 varp=newctr(); //使用 alert(p); alert(p.name);
代码运行结果是,先弹窗打印[objectObject],然后打印”赵晓虎”.因为这里return的是一个字符串,属于基本类型,那么这里的return语句无效,返回的是this对象.因此第一个打印的是[objectObject]而第二个不会打印undefined.
functionUser(name,passwordHash){ this.name=name; this.passwordHash=passwordHash; } varu=newUser("sfalken", "0ef33ae791068ec64b502d6cb0191387"); u.name;//"sfalken"
使用new关键将function作为constructor进行调用。和function以及method调用不一样的是,constructor会传入一个新的对象并将它绑定到this,然后返回该对象作为constructor的返回值。而constructorfunction本身的作用就是为了初始化该对象。
构造函数调用常犯的一个错误
兴致勃勃地定义了下面这么个构造函数:
varCoder=function(nick){ this.nick=nick; };
定义构造函数结束后呢?没错,赶紧实例化:
varcoder=Coder('casper');
这个coder兄弟叫什么名字?赶紧打印下:
console.log(coder.nick);//undefined ==b竟然是undefined!!再回过头看看实例化的那个语句,不难发现问题出在哪里:少了个new varcoder=Coder('casper');//当作普通的函数来调用,故内部的this指针其实指向window对象 console.log(window.nick);//输出:casper varcoder=newCoder('casper');//加上new,一切皆不同,this正确地指向了当前创建的实例 console.log(coder.nick);//输出:casper
这样的错误貌似挺低级的,但出现的概率挺高的,肿么去避免或减少这种情况的发生呢?
可以在内部实现里面动下手脚:
varCoder=function(nick){ if(!(thisinstanceofCoder)){ returnnewCoder(nick); } this.nick=nick; };
其实很简单,实例化的时候,内部判断下,当前this指向的对象的类型即可,如果非当前构造函数的类型,强制重新调用一遍构造函数。
突然觉得Coder这名字不够洋气?想用Hacker,好吧,我改。。。数了下,一共有三处要改,这不科学,有没有办法只把构造函数的名字改了就行?
当然有:
varCoder=function(nick){ if(!(thisinstanceofarguments.callee)){ returnnewarguments.callee(nick); } this.nick=nick; };
tips:据说在ES5的严格模式下面arguments.callee会被禁用,不过仅当ES5普及同时你指定了要使用严格模式,否则还是可以用的发散下思维。
以上就是本文的全部内容,希望对大家学习函数调用、方法调用和构造函数调用有所帮助。