面向对象编程(上)

面向对象编程(Object-oriented programming,OOP)是一种程序设计范型。它将对象作为程序的基本单元,将程序和数据封装其中,以提高程序的重用性、灵活性和扩展性。

1.用对象收编变量

对象有属性和方法,我们要访问它的属性或者方法时,可通过点语法向下遍历查询得到。
例如:我们可以创建一个检测对象,然后把我们的方法放在里面。

var CheckObject = {
    checkName: function() {
        //验证姓名
    },
    checkEmail: function() {
        //验证邮箱
    },
    checkPassword: function() {
        //验证密码
    }
}

使用它们很简单,比如检测姓名:CheckObject.checkName();

2.对象的另一种形式

var CheckObject = function() {};
CheckObject.checkName = function() {
    //验证姓名
}
CheckObject.checkEmail = function() {
    //验证邮箱
}
CheckObject.checkPassword = function() {
    //验证密码
}

使用和前面的方式是一样的,但这个对象不能复制一份,或者说这个对象类在用new关键字创建新的对象时,新创建的对象是不能继承这些方法的。

3.真假对象

如果想简单地复制一下对象,可以将方法放在一个函数对象中。

var CheckObject = function() {
    return {
        checkName: function() {
            //验证姓名
        },
        checkEmail: function() {
            //验证邮箱
        },
        checkPassword: function() {
            //验证密码
        }
    }
}

当每次调用这个函数的时候都返回了一个新对象,这样每个人在使用时就互不影响了。
例如检测邮箱:

var a = CheckObject();
a.checkEmail();

4.类也可以

上面并不是一个真正意义上类的创建方式,并且创建的对象a和对象CheckObject没有任何关系(返回出来的对象本身与CheckObject对象无关)。

var CheckObject = function() {
    this.checkName = function() {
        //验证姓名
    },
    this.checkEmail = function() {
        //验证邮箱
    },
    this.checkPassword = function() {
        //验证密码
    }
}

上面这样的对象就可以看成类了,用类创建对象需要用到关键字new。

var a = new CheckObject();
a.checkEmail();

5.一个检测类

上面的类把所有的方法放在函数内部,通过this定义,所以每一次通过new关键字创建新对象的时候,新创建的对象都会对类的this上的属性进行复制,所以这些新创建的对象都会有自己的一套方法,然而有时候这么做造成的消耗是很奢侈的,我们需要处理一下。

var CheckObject = function() {};
CheckObject.prototype = {
    checkName: function() {
        //验证姓名
    },
    checkEmail: function() {
        //验证邮箱
    },
    checkPassword: function() {
        //验证密码
    }
}

这样创建对象实例的时候,创建出来的对象所拥有的方法就都是一个了,因为它们都要依赖prototype原型依次寻找,而找到的方法都是同一个,它们都绑定在CheckObject对象类的原型上。

6.方法还可以这样用

使用上面方式定义的类如下:

var a = new CheckObject();
a.checkName();
a.checkEmail();
a.checkPassword();

调用了3个方法,但是对象a书写了3遍,这是可以避免的,需要在声明的每一个方法末尾处将当前对象返回,在JS中this指向的就是当前对象。

var CheckObject = {
    checkName: function() {
        //验证姓名
        return this;
    },
    checkEmail: function() {
        //验证邮箱
        return this;
    },
    checkPassword: function() {
        //验证密码
        return this;
    }
}
CheckObject.checkName().checkEmail().checkPassword();

当然同样的方式还可以放到类的原型对象中。

7.函数的祖先

prototype.js是一款JS框架,里面为我们方便地封装了很多方法,它最大的特点就是对源生对象(Function、Array、Object等)的拓展。
比如你想给每一个函数都添加一个检测邮箱的方法:

Function.prototype.checkEmail  = function() {
    //验证邮箱
}
var f = function() {};
f.checkEmail();

或者

var f = new Function();
f.checkEmail();

注意,这么做是不允许的,因为你污染了原生对象Function,所以别人创建的函数也会被你创建的函数所污染,造成不必要的开销,但是你可以抽象出一个统一添加方法的功能方法。

Function.prototype.addMethod = function(name, fn) {
    this[name] = fn;
}
var methods = function() {};

或者

var methods = new Function();
methods.addMethod('checkEmail', function() {
    //验证邮箱
});
methods.checkEmail();

这样只有methods对象才有checkEmail方法。

8.链式添加方法

Function.prototype.addMethod = function(name, fn) {
    this[name] = fn;
    return this;
}
var methods = function() {};
methods.addMethod('checkName', function() {
    //验证姓名
}).addMethod('checkEmail', function() {
    //验证邮箱
});

注意上面只是链式添加方法,不能链式使用,如果使用methods.checkName().checkEmail()只会执行checkName()方法并报如下错误:Cannot read property 'checkEmail' of undefined.
如果想要链式使用,添加的每个方法需要将this返回。

var methods = function() {};
methods.addMethod('checkName', function() {
    //验证姓名
    return this;
}).addMethod('checkEmail', function() {
    //验证邮箱
    return this;
});

现在methods.checkName().checkEmail()就可以正常运行了。

9.用类式调用方式使用方法

添加方法跟上面一样,但在使用的时候要注意了,不能直接使用,要通过new关键字来创建新对象。

var m = new Methods();
m.checkEmail();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容