面向对象编程(中)

1.面向过程与面向对象

传统流程中我们编写一个一个函数来解决需求,这是一种面向过程的实现方式,使用这种方式,页面中会增加很多全局变量,而且不利于别人重复使用,一旦别人使用以前提供的方法,就不能轻易地修改,这不利于团队代码维护。
面向对象编程就是将需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)。这个对象我们称之为类。
面向对象编程思想中有一个特点,封装,就是说把你需要的功能放在一个对象里。对于JavaScript这种解释性的弱类型语言来说,没有经典强类型语言中那种通过class等关键字实现的类的封装方式,JavaScript中都是通过一些特性模仿实现的,但这也带来了极高的灵活性。

2.封装

2.1 创建一个类

首先声明一个函数保存在一个变量里(一般首字母大写)。
然后在这个函数(类)的内部对this变量添加属性和方法:

var Book = function(id, bookname, price) {
    this.id = id;
    this.bookname = bookname;
    this.price = price;
}

也可以在类的原型上添加属性和方法:

Book.prototype.display = function() {
    //展示这本书
};

或者

Book.prototype = {
    display: function() {}
};

我们不能直接使用这个Book类,需要用new关键字来实例化新的对象,使用实例化对象的属性或方法时,通过点语法访问。

var book = new Book(10, 'JavaScript', 50);
console.log(book.price);         //50

通过this定义的属性或方法是该对象自身拥有的,每次通过类创建一个新对象时,this指向的属性和方法都会得到相应的创建,而通过prototype继承的属性或方法是每个对象通过prototype访问到,所以我们每次通过类创建一个新对象时这些属性和方法不会再次创建。

2.2 属性与方法封装

由于JavaScript的函数级作用域,声明在函数内部的变量以及方法在外界是访问不到的,通过此特性即可创建类的私有属性以及私有方法。
而在函数内部通过this创建的属性和方法可看作对象公有属性和对象公有方法。
通过this创建的方法,不但可以访问对象的公有属性和公有方法,还能访问到类或对象自身的私有属性和私有方法,由于这些方法权利比较大,所以我们又将它看作特权方法。
在对象创建时通过使用这些特权方法我们可以初始化实例对象的一些属性,因此这些在创建对象时调用的特权方法还可以看作是类的构造器。

var Book = function(id, name, price) {
    //私有属性
    var name = 1;
    //私有方法
    function checkId() {}
    //特权方法
    this.getName = function() {};
    this.getPrice = function() {};
    this.setName = function() {};
    this.setPrice = function() {};
    //对象公有属性
    this.id = id;
    //对象公有方法
    this.copy = function() {};
    //构造器
    this.setName(name);
    this.setPrice(price);
};

在类外面通过点语法定义的属性以及方法被称为类的静态公有属性和类的静态公有方法。
而类通过prototype创建的属性或者方法在类实例的对象中是可以通过this访问到的,所以我们将prototype对象中的属性和方法称为公有属性和公有方法。

//类静态公有属性(对象不能访问)
Book.isChinese = true;
//类静态公有方法(对象不能访问)
Book.resetTime = function() {
    console.log('new Tiem')
};
Book.prototype = {
    //公有属性
    isJSBook: false,
    //公有方法
    display: function() {} 
};

要想在新创建的对象中使用isChinese需要通过Book类使用而不能通过this,如Book.isChinese,而类的原型prototype上定义的属性在新对象里可以直接使用,这是因为新对象的prototype和类的prototype指向的是同一个对象。

var b = new Book(10, 'JavaScript', 50);
console.log(b.num);                 //undefined
console.log(b.isJSBook);            //false
console.log(b.id);                  //10
console.log(b.isChinese);           //undefined
console.log(Book.isChinese);        //true
Book.resetTime();                   //new Tiem

2.3 闭包实现

闭包是有权访问另外一个函数作用域中变量的函数,即在一个函数内部创建另外一个函数。
我们将这个闭包作为创建对象的构造函数,这样它既是闭包又是可实例对象的函数,即可以访问到类函数作用域中的变量,此时这个变量叫静态私有变量,而可访问的方法叫静态私有方法。当然闭包内部也有其自身的私有变量以及私有方法。
在闭包外部添加原型属性和方法看上去像是脱离了闭包这个类,所以我们有时候在闭包内部实现一个完整的类然后将其返回。

//利用闭包实现
var Book = (function() {
    //静态私有变量
    var bookName = 0;
    //静态私有方法
    function checkBook(name) {}
    //创建类
    function _book(newId, newName, newPrice) {
        //私有变量
        var name, price;
        //私有方法
        function checkID(id) {}
        //特权方法
        this.getName = function() {};
        this.getPrice = function() {};
        this.setName = function() {};
        this.setPrice = function() {};
        //公有属性
        this.id = newId;
        //公有方法
        this.copy = function() {};
        bookNum++;
        if (bookNum > 100)
            throw new Error('error');
        //构造器
        this.setName(newName);
        this.setPrice(price);
    }
    //构建原型
    _book.prototype = {
        //静态公有属性
        isJSBook: false,
        //静态公有方法
        display: function() {}
    };
    //返回类
    return _book;
}) ();

2.4 创建对象的安全模式

//图书类
var Book = function(title, time, type) {
    this.title = title;
    this.time = time;
    this.type = type;
}
//实例化一本书
var book = Book('JavaScript', '2017', 'js');
console.log(book);                  //undefined
console.log(window.title);          //JavaScript
console.log(window.time);           //2017
console.log(window.type);           //js

new关键字的作用可以看作是对当前对象的this不停的赋值,然而例子中没有用new,所以就会直接执行这个函数,而这个函数是在全局作用域中执行的,所以属性被添加到了window上面。又因为函数中没有return语句,所以得到了undefined。
为了避免这种情况,我们可以使用安全模式。

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

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,563评论 0 5
  • 0 写在前面的话 大多数的面向对象编程语言中,比如C++和Java,在使用他们完成任务之前,必须创建类(class...
    自度君阅读 993评论 0 3
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,967评论 6 13
  • 聆听长老侃从前,乐助垂髫放纸鸢。 经雨风荷芳绿岸,历霜枫树醉红颜。 笑谈人间妖惑众,卧看星河鹊度仙。 常梦请缨投笔...
    晴鹤1阅读 328评论 10 7
  • 一个人,拼的就是坚强。 初次看到朋友圈发此类鸡汤,还感同身受的急切点击收藏。 但后来越来越觉着:可以诉说的苦,不叫...
    麦田守望_范阅读 220评论 1 3