JS面向对象(一)——构造函数的封装

基本概念

对象：对象就是一个整体，对外提供一个整体。

面向对象：使用对象时，只关注对象提供的功能，不关注其内部的细节。

三个特点(类C++)：封装、继承、多态

一些概念区别

1、方法与函数

方法：obj.fn = function(){}

函数：function fn(){}

其中函数 function fn(){} 相当于 window.fn = function(){}

2、类与对象

类：不具备实际的功能，只能用来构造对象

对象：真正有功能的东西，被类给构造出来的

封装构造函数（工厂模式）

以person为对象举例 （有两个属性 name sex）

    <script>
        function CreatePerson(name , sex){
            var obj = new Object();

            //添加属性
            obj.name = name;
            obj.sex = sex;

            //添加方法
            obj.showName = function () {
                alert(this.name);
            };
            obj.showSex = function () {
                alert(this.sex);
            };
            return obj;
        }

        var p1 = CreatePerson('leo' , 'male');
        var p2 = CreatePerson('shawn' , 'male');
        p1.showName();
        p1.showSex();

        alert(p1.showName == p2.showName);
    </script>

以这样的方式(其实就是创建一个函数，然后实例对象利用函数传参来实现，这样做的话实例之间是没有什么内在联系的)来构造对象会有两个问题：

1、没有用到new方法

2、每个被创建的对象都有一套自己的方法(例如上述p1.showName()、p2.showName())，而这些方法的实现是一模一样的，这样就造成了资源的极度浪费

解决方案

针对第一个问题，做出的改进如下

        function CreatePerson(name , sex){

            //相当于这边有
            // var this = new Object();
            //添加属性
            this.name = name;
            this.sex = sex;

            //添加方法
            this.showName = function () {
                alert(this.name);
            };
            this.showSex = function () {
                alert(this.sex);
            };
            //这边有return this;
        }

这个时候生成的实例对象会自动包含一个constructor属性，指向它们的构造函数

当然还可以使用instanceof来验证实例对象是否属于原型对象

 

针对第二个问题，我们可以使用prototype(原型)，Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。这很像CSS中的class，可以给一堆对象加上相同的属性或方法。主要是用来添加一些系统不支持的方法或函数

   <script>
        function CreatePerson(name , sex){
            //添加属性
            this.name = name;
            this.sex = sex;
        }
        //添加共用方法
        CreatePerson.prototype.showName = function () {
            alert(this.name);
        };
        CreatePerson.prototype.showSex = function () {
            alert(this.sex);
        };

        var p1 = new CreatePerson('leo' , 'male');
        var p2 = new CreatePerson('shawn' , 'male');
        p1.showName();
        p1.showSex();

        alert(p1.showName == p2.showName);
    </script>

这个时候我们会发现最后的输出是true，这时候用的都是同一个内存地址，指向了prototype对象，内存的使用效率就变高。

 

最后关于一个优先级的问题

 

    <script>
        Array.prototype.a = 12;  //给Array类添加公共属性a = 12;
        var arr = [1,2,3];
        alert(arr.a);  //12

        arr.a = 5;   //给由Array类所创造的对象arr添加重名属性a
        alert(arr.a);  // 5

        delete  arr.a;  //删除arr对象的a属性
        alert(arr.a);  //12
    </script>

 

我们会发现这和CSS中内部样式和行间样式很相像，prototype添加的属性相当于一个内部样式 ,而对象的重名属性相当于行间样式 ， 所以重名时对象的属性优先级肯定是高于prototype所添加的属性的。