【JavaScript从入门到精通】第二十五课 JS面向对象基础-02

此内容来自开课吧石川微信公众号

工厂方式问题的解决

现在我们来想办法解决工厂方式的两个问题。首先解决掉没有new关键字的问题。我们来看这么一个例子:

function show(){
    alert(this);}show();         //windownew show();     //新new出来的对象

在我们调用函数的时候,如果在前面添加一个new关键字,那么函数内的this指向的不再是函数本身而是新创建的对象。具体来说,如果我们在调用函数的时候使用了new关键字,系统会自动的创建一个对象,方式如下:

var this=new Object();
......
return this;

因此,我们可以对前面的工厂方式进行如下修改:

function createPerson(name, qq)     //构造函数{
    //系统偷偷替咱们做:
    //var this=new Object();
    //加工
    this.name=name;
    this.qq=qq;
    this.showName=function ()
    {
        alert('我的名字叫:'+this.name);
    };
    this.showQQ=function ()
    {
        alert('我的QQ号:'+this.qq);
    };
    //也会偷偷做:
    //return this;}var obj=new createPerson('blue', '258248832');var obj2=new createPerson('张三', '45648979879');

这样我们创建对象的时候就可以采用new关键字了。

其次,为了解决浪费资源的问题,我们需要使用到prototype(原型)。在CSS里我们经常会用到class,利用class一次可以给一组元素添加样式。相对来说CSS里的行间样式一次只能给一个元素添加样式。在JS里,原型就对应了class,而给对象加东西则对应了行间样式。我们用一个例子来具体解释原型。

首先,我们给数组自定义一个求和函数。

var arr1=new Array(12,55,34,78,676);arr1.sum=function (){
    var result=0;
    for(var i=0;i<this.length;i++)
    {
        result+=this[i];
    }
    return result;};alert(arr1.sum());

这个程序无疑可以正常执行。但如果我们存在多个数组需要求和的时候,我们只给arr1定义了sum方法,莫非还需要给每个数组都写一个求和?我们只给arr1定义sum方法,就类似于行间样式,而现在我们使用原型的方式就可以给所有数组添加sum方法了:

var arr1=new Array(12,55,34,78,676);var arr2=new Array(12,33, 1);Array.prototype.sum=function (){
    var result=0;
    for(var i=0;i<this.length;i++)
    {
        result+=this[i];
    }
    return result;};alert(arr1.sum());alert(arr2.sum());

效果如下:

【JavaScript从入门到精通】第二十五课 JS面向对象基础-02

有了上面的内容,我们就可以开始解决工厂方式了。在这之前,我们先来区分两个概念:类和对象。

我们可以将类理解为模子,将对象理解为产品(成品)。类不具备实际的功能,实际功能都是由对象完成。例如var arr=new Array()中,arr是一个对象,而Array就是一个类。我们可以通过arr调用Array类的方法比如arr.push(),但直接通过类来调用Array.push()是错误的写法。一样的,new arr()也是一个错误的写法。实际上,我们的原型就是在类上添加方法或属性。

现在我们来将原型应用到我们的工厂方式上来。我们给我们的createPerson类采用原型的方式添加方法:

function CreatePerson(name, qq)     //构造函数{
    this.name=name;
    this.qq=qq;}CreatePerson.prototype.showName=function () //原型{
    alert('我的名字叫:'+this.name);};CreatePerson.prototype.showQQ=function (){
    alert('我的QQ号:'+this.qq);};var obj=new CreatePerson('blue', '258248832');var obj2=new CreatePerson('张三', '45648979879');obj.showName();obj.showQQ();obj2.showName();obj2.showQQ();

这种情况下,obj和obj2下的方法占据的的是同一个空间,我们可以用一个方法进行比较:

alert(obj.showName==obj2.showName);

结果为true。这种写法就是我们现在常用的一种构造对象的方法:混合的构造函数/原型方式,其中我们采用构造函数构造属性,用原型构造方法。

为了将普通函数和构造函数区分,我们一般将类名的首字母大写。JS里自带的对象如Array,Date等首字母也都是大写的。

到这里,面向对象的基础知识我们已经介绍完毕,下节课开始我们将开始介绍一个JS面向对象的示例。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/4429.html

发表评论

登录后才能评论