JS之面向对象1

发表于 更新于 分类于

今天学习了JS的面向对象部分内容。首先是理解面向对象的概念，因为之前在学校学的几门编程语言都有接触面向对象这个概念，所以理解起来相对来说还是比较容易的。面向对象只关注对象提供的功能，不关注其内部细节，就像我们使用收音机时不需要知道收音机里面的构造以及连线方式，而只需要知道收音机各个按钮的功能即可，收音机就是一个对象。面向对象具有三个特性：封装，继承，多态，并且由方法和属性组成。这些大都已经记在心中了，考过好几次了。

接着就是学会用工厂方式构造对象，分为三步：

  1. 工厂制作产品首先需要的是原料，对应的我们需要创建一个空白的对象；
    1
    var obj=new Object();
  2. 对原料进行加工，即对应的我们需要为对象添加属性和方法；
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    obj.name=name;
    obj.sex=sex;
    obj.showName=function()
    {
        alert('我的名字叫'+this.name);
    }
    obj.showSex=function()
    {
        alert('我是'+this.sex+'的');
    }
  3. 将加工好的产品送出厂，所以我们需要返回对象。
    1
    return obj;

虽然工厂方式看起来挺完美的，但是还是存在两个问题：其一，没有new；其二，函数重复定义，即每个对象都有一套自己的函数，浪费资源。问题一解决相对来说比较简单，添加一个new即可，主要还是问题二的解决。问题二可以用原型prototype为对象添加方法，原型prototype又是今天新学到的一个概念，通过原型添加方法可以在已有对象中加入自己的方法，可以扩展系统对象，添加一些本不支持的方法。用原型添加方法不仅给构造函数于极度的简化，而且使所有同类的对象都只有一套方法，节省了大量的资源，有效地解决了工厂方法的第二个问题。所以对上述的工厂方法进行改进，首先是将原来的构造函数删除部分，再将剩下的关于属性的部分稍微修改成如下形式：

1
2
3
4
5
function Person(name,sex)//构造函数，添加属性
        {
            this.name=name;
            this.sex=sex;
        }

接着就是解决问题一了，加new，如下：

1
var p=new Person('Rose','女');

然后就是解决问题二了，用原型为对象添加方法：

1
2
3
4
5
6
7
8
Person.prototype.showName=function()//原型，添加方法
        {
            alert(this.name);
        }
        Person.prototype.showSex=function()
        {
            alert(this.sex);
        }

最后，调用方法即可，这样子一来，一套相对比较完美的构造对象方法就出炉了。

1
2
p.showName();
p.showSex();

以上就是今天主要学到的三方面的内容：面向对象概念，工厂方法构造对象，原型添加方法。原型为对象添加方法真的很好用，今天学到的可能只是一小部分，更多的需要后期接触再去深入学习了。