高级1-面向对象

1: OOP 指什么?有哪些特性
面向对象程序设计(英语:Object-oriented programming缩写OOP)是种具有对象概念的程序编程范型,同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码方法。对象则指的是的实例。它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的重用性、灵活性和扩展性,对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里,计算机程序会被设计成彼此相关的对象

面向对象程序设计可以看作一种在程序中包含各种独立而又互相调用的对象的思想,这与传统的思想刚好相反:传统的程序设计主张将程序看作一系列函数的集合,或者直接就是一系列对电脑下达的指令。面向对象程序设计中的每一个对象都应该能够接受数据、处理数据并将数据传达给其它对象,因此它们都可以被看作一个小型的“机器”,即对象。

特征
支持面向对象编程语言通常利用继承其他类达到代码重用和可扩展性的特性。而类有两个主要的概念:
(Class):定义了一件事物的抽象特点。类的定义包含了数据的形式以及对数据的操作。
对象:是类的实例。
示例(伪代码):

//抽象的类,描述了一样事物的特征
类 狗
开始
    公有成员:
        吠叫():
    私有成员:
        毛皮颜色:
        孕育:
结束

<------------------------------------------>
//对象,该类事物的具体化
定义莱丝是狗
莱丝.毛皮颜色:棕白色
莱丝.吠叫()

封装性:封装是通过限制只有特定类的对象可以访问这一特定类的成员,而它们通常利用接口实现消息的传入传出。

/* 一个面向过程的程序会这样写: */
定义莱丝
莱丝.设置音调(5)
莱丝.吸气()
莱丝.吐气()

/* 而当狗的吠叫被封装到类中,任何人都可以简单地使用: */
定义莱丝是狗
莱丝.吠叫()

继承:继承性(Inheritance)是指,在某种情况下,一个类会有“子类”。子类比原本的类(称为父类)要更加具体化。

类牧羊犬:继承狗

定义莱丝是牧羊犬
莱丝.吠叫()    /* 注意这里调用的是狗的子类牧羊犬的吠叫方法。*/

多态:多态(Polymorphism)是指由继承而产生的相关的不同的类,其对象对同一消息会做出不同的响应

/* 
 * 狗和鸡都有“叫()”这一方法
 * 但是调用狗的“叫()”,狗会吠叫
 * 调用鸡的“叫()”,鸡则会啼叫
 */

类狗
开始
   公有成员:
       叫()
       开始
          吠叫()
       结束
结束

类鸡
开始
   公有成员:
       叫()
       开始
          啼叫()
       结束
结束

定义莱丝是狗
定义鲁斯特是鸡
莱丝.叫()
鲁斯特.叫()

2: 如何通过构造函数的方式创建一个拥有属性和方法的对象?

var F = function(properties){
  this.properties = properties;
  methods: function(){
    //methods...  
  }
};
var foo = new F();

3: prototype 是什么?有什么特性
对象的原型,利用constructor和prototype解决了继承和代码重复调用,减少了不必要的内存损耗,如下:

  • 我们在使用new构造函数的过程当中

  • 每个函数都自动添加一个名称为prototype属性,这是一个对象

  • 每个对象都有一个内部属性 proto(规范中没有指定这个名称,但是浏览器都这么实现的) 指向其类型的prototype属性,类的实例也是对象,其proto属性指向“类”的prototype

这里,我们可以知道

  • 所有实例都会通过原型链引用到类型的prototype

  • prototype相当于特定类型所有实例都可以访问到的一个公共容器

  • 重复的东西移动到公共容器里放一份就可以了
    示例:

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}
var p1 = new Person();
p1.sayName();
Paste_Image.png

4:画出如下代码的原型图

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log('my name is:' + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饥人谷');
var p2 = new People('前端');
Paste_Image.png

5: 创建一个 Car 对象,拥有属性name、color、status;拥有方法run,stop,getStatus

function Car (name, color, status){
  this.name = name;
  this.color = color;
  this.status = status;
}
Car.prototype.run = function(){
  console.log(this.name + 'is running')
}
Car.prototype.stop = function(){
  console.log(this.name + 'stoped')
}
Car.prototype.getStatus = function(){
  console.log('status:' + this.status)
}
var car = new Car('fff', 'black', '0')
car.run()
car.stop()
car.getStatus()

6: 创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。拥有以下属性和方法

gif008.gif

核心代码:

var GotTop = function($container, $element) {
  this.ct = $container;
  this.element = $element;
}
GotTop.prototype.bindEvent = function(){
    var _this = this
    $(window).scroll(function(){
        var scrollTop = _this.ct.scrollTop()
        if(scrollTop > 100){
            _this.element.show('slow')
        }else{
            _this.element.hide('slow')
        }
    })
    _this.element.on('click', function(){
      _this.ct.animate({
        scrollTop: 0
      }, 600)
    })
}
 GotTop.prototype.createNode = function(){
    this.ct.append(this.element)
  }
var goTop = new GotTop($('body'), $('<div class="go-top">顶部</div>'))

goTop.bindEvent()
goTop.createNode()

完整代码
JSBin

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

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 10,841评论 6 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,573评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,547评论 18 399
  • 烫心 我拉开车门 钻进车里 坐定后回望你 你站在雨里撑着伞 臃肿的棉衣包裹着你瘦弱的身体 我摇下车窗让你回去 你用...
    姬二水阅读 192评论 0 2
  • 发黄的相片古老的信以及褪色的圣诞卡年轻时为你写的歌恐怕你早已忘了吧过去的誓言就象那课本里缤纷的书签刻划着多少美丽的...
    慧子永远没有太晚的开始阅读 270评论 3 10