JavaScript 构造函数

Posted 2020-06-09

关于javascript构造函数，如今出现了很多JavaScript的框架，例如jQuery、Ext等等这些，这些将JavaScript作为一种面向对象的语言进行编程，那么JavaScript到底是怎么样实现面向对象的一些特征的呢，首先，我们来看看JavaScript怎么样来定义一个构造函数。

function A(x)
{
this.x = x;
}
var obj = new A(5);
alert(obj.x);

这段代码十分简单，但是我们重要的是看到了一个十分惊讶的结果，obj被我们赋予了一个属性x，就如同我们在C#中使用某个类的实例的时候一样。那么这个属性是怎么样产生的呢？

关键语句：this.x=x。这句话就是进行一个属性的申明与赋值，这里，我们肯定会问到，this是什么？为什么可以使用this.x来进行申明与赋值属性呢？

其实this代表的就是我们刚刚实例化出来的obj，就相当于我们使用obj去调用了构造函数A里面的属性、方法等等。

那么，我们怎么样去在构造函数中定义一个方法呢？

function A(x,y)
{
this.x = x;
this.y = y;
A.prototype.FunX = function(){alert(x)};
A.prototype.FunY = function(){alert(y)};
}
var obj = new A(5,10);
alert(obj.x);
alert(obj.y);
obj.FunX();
obj.FunY();

执行的结果十分简单，弹出5、10、5、10的结果，可以看到

A.prototype.FunX = function(){alert(x)};
A.prototype.FunY = function(){alert(y)};

这两句代码定义了两个方法，分别是FunX和FunY。那么，如果现在出现了一种情况，如果我们需要临时的给A函数添加方法怎么办呢？

function A(x,y)
{
this.x = x;
this.y = y;
}
A.prototype.FunX = function(){alert("5")};
var obj = new A(5,10);
alert(obj.x);
alert(obj.y);
obj.FunX();
A.prototype.FunY = function(){alert("10")};
obj.FunY();

运行这段代码，我们可以看到，弹出的结果还是和以前的结果一样，但是我们将两个方法都定义在了外边，而且方法FunY是定义在实例化之后的，那么这里大家看出来了什么没？很显然，在我们使用obj.FunY()语句时候，代码会重新的去构造一下obj，然后再来执行此方法，那么如果代码改成这样？

obj.FunY();
A.prototype.FunY = function(){alert("10")};

很显然，FunY()就不会去执行方法了。