01.JavaScript面向对象编程

JavaScript作为一门动态类型语言,它在编译(解释)时没有类型检查的过程,既没有检查创建创建的对象类型,有没有检查传递的参数类型。


我的读书笔记,我想来记录一下自己认识的JavaScript的多态,多态是面向对象编程语言中最最重要的技术,个人理解多态就是把“做什么”和“谁去做”分离出来,归根结底就是消除类型之间的耦合关系。

毕竟大部分人都不关心鸡是怎么叫,也不想知道鸭是怎么叫。

多态的最根本的好处在于,你不必再向对象询问“你是什么类型”,而后根据得到的答案调用某个对象的行为--你只管调用该行为就是了,其他的一切多态机制都会为你安排妥当!

将行为分布在各个对象中,并让这些对象各自负责自己的行为,这正是面向对象设计的特点

1.多态

        /*
        * 编写一个地图的应用,我们可能需要调用百度地图,搜狗地图,谷歌地图等应用
        * 那么我们现在就来完成对多态的体现的代码应用
        * */
        var googleMap = {
            show:function () {
                console.log("开始渲染谷歌地图");
            }
        }
        var baidudMap={
            show:function () {
                console.log("开始选择百度地图");
            }
        }

        //建立渲染的方法
        var renderMap = function(map/*传递地图对象*/){
            //判断你调用的show的类型是否为函数?
            if(map.show instanceof Function){
                map.show();
            }
        }

        //测试
        renderMap(googleMap);
        renderMap(baidudMap);

翻译如下: 当我们想谷歌地图对象和百度地图对象分别发出“展示地图”的消息时候,分别调用他们的show方法,就会产生不同的执行结果。对象的多态性提示我们,“做什么”和“怎么做”是可以分开的,以后增加搜狗地图,renderMap函数仍然不需要做任何变化!

2.封装

在多数的对象语言中,封装数据是由语法解析实现的。例如我们学习的Java语言提供了private、public、protected等关键字来提供不同的访问权限

但是,JavaScript中并没提供这些访问权限的关键字,我们只能依赖 变量的作用域来实现封装特性,而且只能模拟出public和private这两种封装性

        var hpObject = (function () {
            var __name="胖先森";//私有(private)变量
            return {
                getName:function () {// 公开(public)方法
                    return __name;
                }
            }
        })();

        console.log(hpObject.getName()); // 输出:胖先森
        console.log(hpObject.__name); // 输出:undefined


目前通过函数创建作用域比较常见,如果你使用的ECMAScript 6 抱歉我没有研究,但是知道其提供了 let 关键字,定义私有变量

上面仅仅是一个封装数据的示例,但是不要说封装等同于封装数据,这样就是井底之蛙!

封装实现的目的:将信息隐藏,封装应该被视为“任何形式的封装”,也就是说,封装不仅仅是隐藏数据,还包括隐藏实现细节,设计细节以及隐藏对象的类型等。

什么时候使用封装呢? 个人的理解为:找到变化并封装之,这里就涉及到设计模式(面试题:一共有多少设计模式呢?),还有如果工作一些年了,你应该知道重构代码的重要性!

通过封装,我们要达到什么目的呢?就是把系统中 稳定不变的部分容易变化的部分 隔离

3.继承

主要说一下JavaScript的原型继承,这里自己也是刚刚入门,如果不太好的地方见谅!

需要大家记住,原型编程的基本准则:

  • 所有数据都是对象 “万物皆对象”
  • 要得到一个对象,不是通过 实例化,而是找到一个对象作为原型并 克隆它
  • 对象会记住它的原型(你的父亲你不记得?)
  • 如果对象无法响应某个请求,它会把这个请求委托给它自己的原型。(例如,自己克隆自己)

(1)所有数据都是对象

JavaScript的数据类型机制: 基本类型和对象类型

基本类型包括:

  • 特殊数据类型
    • undefined
    • null
  • 基本数据类型
    • string
    • boolean
    • number
  • 复杂数据类型
    • object
    • function (这个好像不算)

ECMAScript 6 里面增加了一个数据类型 symbol

JavaScript作者本意是除了undefined以外,一切都是对象!为了实现这个目标number、boolean、string这几种基本数据类型也是通过“包装类(学Java的时候有类似的概念)”的方式变成对象类型数据来处理。

我们不能说JavaScript的多有数据都是对象,但是绝大部分都是对象。那么JavaScript中一定会有一个 根对象 存在

事实上,JavaScript中的跟对象是 Object.prototype 对象。Object.prototype 对象是一个 空的对象,实际上都是从 Object.prototype 对象克隆而来的。

        var hp01 = new Object();//声明一个对象
        var hp02 = {};// 创建一个对象,推荐方式

        //利用 Object.getPrototypeOf方法检测原型
        console.log(Object.getPrototypeOf(hp01) === Object.prototype);// 输出:true

        console.log(Object.getPrototypeOf(hp02) === Object.prototype);// 输出:true

(2)要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它

在JavaScript语言中,我们不需要关心克隆的细节,而是由引擎内部负责实现的。

那么,我就有一个疑问:new 运算符不是实例化吗? 我们看一下下面的经典代码:


       function Person( name ){
           this.name = name;
       }
       Person.prototype.getName = function () {
           return this.name;
       }

       var a = new Person("胖先森");
       console.log(a.name);  // 输出:胖先森
       console.log(a.getName()); //输出:胖先森

       //检查对象
        console.log(Object.getPrototypeOf(a) === Person.prototype);// 输出:true

在JavaScript中没有类的概念,这句话必须要时刻保持警惕!

但是,刚才明明不是已经调用了 new Person() 吗?如果按照Java的理解,这不就是实例化对象吗?

在这里Person不是类,而是 函数构造器,JavaScript的函数既可以作为 普通函数 被调用 ,也可以作为 构造函数 被调用。用 new 运算符来创建对象的过程,实际上是

先克隆了 Object.prototype 对象 ,再进行一些其他额外的操作过程:

JavaScript是通过克隆 Object.prototype 来得到新的对象,但是实际上不是每次都真正克隆一个新对象。

从内存方面考虑出发,JavaScript还是做了一些额外的处理。

(3)对象会记住它的原型

记住:JavaScript给对象提供了隐藏属性 __proto__ ,某个对象的 __proto__ 属性会默认指向它的构造器的 原型对象 ,即 {Constructor}.prototype 。

      var hp = new Object();
      console.log(hp.__proto__ === Object.prototype);

__proto__就是对象跟“对象构造器的原型” 联系起来的纽带。

这个地方我理解的还是不够透彻,在后面的学习中,继续努力!

(4)如果对象无法响应某个请求,它会把这个请求委托给它自己的原型

JavaScript中每个对象都是从 Object.prototype 对象克隆而来。如果这样的话,就特别像我们之前学习的Java一样就成为了单一继承,即每个对象都继承了 Object.prototype , 显示这样的设计是受到了一定的限制。

实际上,虽然JavaScript的对象最初都是由Object.prototype对象克隆而来,但是对象 构造器的言行并不是限于Object.prototype 上,而是可以 动态 指向其他对象。

一段比较经典的继承写法:

     var root = {name:"胖先森"};

      var A = function () {

      }
      A.prototype = root;

      var a = new A();
      console.log(a.name);

比较常用的方式

说在后面的话:

花了一天时间,整理出来一点笔记! 如果感觉好,请记得打赏一下!

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

推荐阅读更多精彩内容