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();