Javascript中的函数与类

By zhujinliang. Filed in 软折腾  |   
标签:, , ,
Home  

Javascript中函数和类本质是一样的东西,唯一区别在关键字new上。

先看Javascript中一个类的写法:

var myClass = function(_name){   // 该函数即为类的构造函数
	this.name = _name; // name是该类的私有成员
}
myClass.prototype.Show = function(){   // 类的方法
	alert('姓名: '+this.name);
}

Javascript中类的继承稍有复杂,本文就不提了。

看起来类和普通函数长得一摸一样,但有以下区别的:

  在函数中 作为类的构造函数时
this指向的对象 参考上下文 构造后产生的对象本身
return返回值 函数的返回值,如果没有return,则相当于返回undefined 如果没有return指令,则返回构造的对象;否则使用return指示的对象作为构造后的对象
prototype属性 可设置,但没作用 作为类的方法

我们再来写一个普通的函数:

var myFunc = function(_name){
	alert('姓名: '+_name);
}

然后进行一下杂交实验:

myFunc('zhujinliang');  //正常的函数调用,弹出提示"姓名: zhujinliang"

var objFromFunc = new myFunc('zhujinliang');  //对一个普通函数使用new,弹出提示"姓名: zhujinliang"
console.debug(objFromFunc);   //查看构造后的对象,为空对象

var objFromClass = new myClass('zhujinliang');  //正常的构造对象
console.debug(objFromClass);  //查看构造后的对象,可看到name属性
objFromClass.Show();          //调用Show方法,弹出提示"姓名: zhujinliang"

var callResult = myClass('zhujinliang');   //对一个类的构造函数进行直接调用
console.debug(callResult);    //查看返回结果,显示undefined
callResult.Show();            //尝试调用Show,报错

javascript中new的实际作用:

<1> 创建一个对象,开辟内存空间供其使用

<2> 调用构造函数,将<1>中创建的对象作为函数中的this

<3> 如果函数返回了一个值或对象,则使用该值作为构造后的对象,<1>中创建的对象丢弃不用

<4> 如果函数未返回值,则将构造函数属性prototype拷贝为<1>中创建对象的原型链,以供构造生成的对象使用

据此我们可以写出一个假的构造函数:

function fakeNew(_class, para1, para2, para3){  //为了方便编写,此处允许最多向构造函数传递3个参数
	var _object = {};  //创建对象
	var fnReturn = _class.call(_object, para1, para2, para3);  //使用function的call方法,使得函数中的this指向_object变量
	if(typeof fnReturn == 'undefined'){
		_object.__proto__ = _class.prototype;  //此处依赖于chrome对原型链的处理,chrome对原型链暴露为对象的__proto__属性,其他浏览器处理方式可能不同,且可能不允许通过代码修改此属性
		return _object;
	}else{
		return fnReturn;
	}
}

var myObject = fakeNew(myClass, 'zhujinliang');  //使用假的构造函数构造一个对象
myObject.Show();  //测试调用它的方法

以上代码在chrome中测试通过,其他浏览器可能不成功,主要受限于对__proto__属性的处理。

Javascript中引入类有什么好处呢?答:使得逻辑清晰。

如果了解一下“语法糖”的概念,其实javascript中很多东西可以认为是语法糖。

One Comment

  1. Comment by xiaorui:

    强悍啊~学习了~

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*