JS高級：面向對象的構造函數

1 建立對象的方式

1.1 字面量的方式建立對象

var p1 = {
        name: '張三',
        run: function () {
           console.log(this.name + '跑');
        }
    };

    var p2 = {
        name: '李四',
        run: function () {
            console.log(this.name + '跑');
        }
    };

    console.log(p1.name);
    p1.run();

    console.log(p2.name);
    p2.run();

1.2 內置構造函數的方式

var p1 = new Object();
    p1.name = '張三';
    p1.run = function () {
        console.log(this.name + '跑');
    }

問題:使用內置構造函數的方式和字面量的方式來建立對象差很少,都存在如下問題:

• 建立的對象沒法複用,複用性差

• 若是須要建立多個同類型的對象,如(書籍)則須要寫大量重複的代碼,代碼的冗餘度高

  1.3 簡單工廠的方式

function createPerson(name){
    var obj=new Object();//1.原料
    //2.加工
    obj.name=name;
    obj.showName=function(){
    alert(this.name);
    }
    return obj;//3.出廠
}

工廠裏面有一些產品的模板, 只須要, 給工廠提供原材料; 工廠按照固定的加工方式, 就能夠返回給外界同一類型的產品

問題:沒法斷定類型

1.4 自定義構造函數方式

1.4.1 普通

function Dog(name, age, dogFriends) {
        // 屬性
        this.name = name;
        this.age = age;
        this.dogFriends = dogFriends;

        // 行爲
        this.eat = function (someThing) {
            console.log(this.name + '吃' + someThing);
        };

        this.run = function (someWhere) {
            console.log(this.name + '跑' + someWhere);
        }
    }

    // 產生對象
    var smallDog = new Dog('小花', 1);
    console.log(smallDog.name, smallDog.age);

1. 函數的首字母大寫(用於區別構造函數和普通函數)
2. 建立對象的過程是由new關鍵字實現
3. 在構造函數內部會自動的建立新對象,並賦值給this指針
4. 自動返回建立出來的對象

1.4.2 參數優化

function Dog(options) {
        // 屬性
        this.name = options.name;
        this.age = options.age;
        this.dogFriends = options.dogFriends;

        // 方法
        this.eat = function (someThing) {
            console.log(this.name + '吃' + someThing);
        };

        this.run = function (someWhere) {
            console.log(this.name + '跑' + someWhere);
        }
    }

1.4.3 改進

function Dog(option) {
        // 屬性
        this.name = option.name;
        this.age = option.age;
        this.dogFriends = option.dogFriends;
    }

    Dog.prototype.eat = function (someThing) {
        console.log(this.name + '吃' + someThing);
    };

    Dog.prototype.run = function (someWhere) {
        console.log(this.name + '跑' + someWhere);
    };

1.4.4 最後版

function Dog(option) {
        this._init(option)
    }

    Dog.prototype = {
        _init: function(option){
            // 屬性
            this.name = option.name;
            this.age = option.age;
            this.dogFriends = option.dogFriends;
        },

        eat: function (someThing) {
            console.log(this.name + '吃' + someThing);
        },

        run: function (someWhere) {
            console.log(this.name + '跑' + someWhere);
        }
    };

1.5 矩形案例

function Rect(options) {
        this._init(options)
    }

    Rect.prototype = {
        _init: function (options) {
            options = options || {};

            // 放在哪裏?
            this.parentId = options.parentId;

            // 位置
            this.left = options.left || 0;
            this.top = options.top || 0;

            // 自身屬性
            this.width = options.width || 0;
            this.height = options.height || 0;
            this.bgColor = options.bgColor || '#000';
            this.borderRadius = options.borderRadius || 0;
            this.border = options.border;
        },

        render: function () {
            // 1. 獲取父標籤
            var parentElement = document.getElementById(this.parentId);

            // 2. 建立標籤
            var childElement = document.createElement('div');
            parentElement.appendChild(childElement);

            childElement.style.position = 'absolute';
            childElement.style.left = this.left + 'px';
            childElement.style.top = this.top + 'px';
            childElement.style.width = this.width + 'px';
            childElement.style.height = this.height + 'px';
            childElement.style.backgroundColor = this.bgColor;
            childElement.style.border = this.border;
            childElement.style.borderRadius = this.borderRadius + 'px';

        }
    };


    // 實例化矩形對象
    var rect = new Rect({
        parentId:'main',
        left:100,
        top:200,
        width:500,
        height:300,
        bgColor:'yellow',
        border:'10px solid #000',
        borderRadius:20
    });
    rect.render();