(一)面向对象的javascript
javascript是一门典型的动态类语言
一:鸭式辨型(指导我们关注对象的行为,而不关注对象本身)。
var duck = {
duckString: function(){
console.log("嘎嘎")
}
};
var chicken = {
duckString: function(){
console.log("嘎嘎")
}
}
var choir = []; //合唱团
var joinChoir = function( animal ){
if (animal && typeof animal.duckString === 'function') {
choir.push(animal);
console.log('恭喜加入合唱团')
console.log('合唱团已经有的数量:'+ choir.length)
}
}
joinChoir(duck)
joinChoir(chicken)
对于加入合唱团,无需关心他们的类型,而只是确保它有duckString方法。
二:多态
多态的实际含义是,同一操作作用于不同的对象上面,可以产生不同的解释,执行不同的结果。 (实际上是把“做什么”和“谁去做”分离开来)
var makeSound = function( animal ) {
if ( animal instanceof Dcuk) {
console.log("嘎嘎")
} else if ( animal instanceof Chiken) {
console.log("咯咯")
}
}
var Dcuk = function(){};
var Chiken = function(){};
makeSound(new Dcuk)
makeSound(new Chiken)
(1多态的度复杂性
var makeSound = function( animal ) {
animal.sound()
}
var Dcuk = function() {};
var Chiken = function() {};
var Dog = function() {};
Dcuk.prototype.sound = function() {
console.log("嘎嘎嘎")
}
Dog.prototype.sound = function() {
console.log("汪汪汪")
}
makeSound(new Dcuk)
makeSound(new Dog)
将行为分享在各个对象中,并让这些对象各自负责自己的行为,这正是面向对象优点
假设我们要编写一个地图应用,现在有两家可选的地图api提供商供我们接入自己的应用。目前我们选择谷歌地图,谷歌地图中提供show()方法,负责在页面上展示整个地图。
var googleMap = {
show: function() {
console.log('开始渲染地图')
}
}
var renderMap = function() {
googleMap.show()
}
renderMap()
后来因为某些原因,我们要将谷歌地图转化为百度地图,为了让renderMap函数保持一定的弹性,我们使用一些条件分支来让renerMap函数同时支持谷歌地图和百度地图
var googleMap = {
show: function() {
console.log("渲染谷歌地图")
}
}
var baiduMap = {
show: function() {
console.log("渲染百度地图")
}
}
var renderMap = function( type ){
if ( type === 'google') {
googleMap.show()
} else if ( type === 'baidu') {
baiduMap.show()
}
}
renderMap('baidu')
renderMap('google')
虽然renderMpa函数保持了一定的弹性 ,但是这种弹性是很脆弱的,一旦替换成搜狗地图,那无疑需要改动renderMap()函数,继续往里边堆砌条件分支语句。
var renderMap = function ( map ){
if (map.show instanceof Function) {
map.show();
}
}
var sosoMap = {
show: function() {
console.log("搜搜地图开始渲染")
}
}
renderMap(googleMap)
renderMap(baiduMap)
renderMap(sosoMap)
现在我们来找找这段代码的多态性,当我们向谷歌地图对象和百度地图对象发出“展示地图的”请求时。会分别调用他们的show()方法。会产生不同的执行结果。对象的多态性提示我们,“做什么”和“怎么去做”是可以分开的,即使以后增加了搜搜地图,renderMap函数任然不需要做出什么改变。
三 封装
封装的目的是将信息隐藏,一般而言,我们讨论的封装是封装数据和封装实现。
这里我们将说明下更广义的封装,不仅包括封装数据和封装实现,还包括封装类型和封装变化
1。封装数据
在许多语言的对象系统中,封装数据是由语法解析实现的,这些语言提供了private, public, protected等关键字来提供不同的访问权限
javascript没有提供对这些关键字的支持,我们只能依赖变量的作用域来实现封装特性,而且只能模拟出public,private这两种封装。
除了ES6的let之外,我们一般通过函数来创建作用域。
var myObject = (function() {
var _name = 'seven'; //私有private变量
return {
getName : function() { //公开public变量
return _name;
}
}
})();
console.log(myObject._name) ;//undefined
console.log(myObject.getName()) ;//seven
另外,在ES6中,还可以通过Symbol创建私有属性
四:使用克隆的原型模式
如果使用原型模式,我们只需要负责克隆的方法,变能完成同样的功能。
原型模式使用的关键,是语言本身是否提供了克隆的方法,ES5提供了Object.create方法,代码如下
var Plane = function() {
this.blood = 100;
this.attackLevel = 1;
this.defenseLevel = 1;
};
var _plane = new Plane()
_plane.blood = 500;
_plane.attackLevel = 2;
_plane.defenseLevel = 2;
var clonePlane = Object.create( _plane );
console.log( clonePlane ) // {blood: 500, attackLevel: 2, defenseLevel: 2}
//不支持Object.create方法的浏览器中,可以使用以下代码
Object.create = Object.create || function( obj ) {
var F = function() {};
F.prototype = obj;
return new F();
}
原型继承
在javascript语言里,我们并不关心克隆的细节,因为这是引擎内部实现的。我们只是显式的调用
var object1 = new Object()或者 var object2 = {};此时,引擎内部会从Object.protype上面克隆出一个对象来,我们最终得到的就是这个对象。
我们看看通过new运算符从构造器中得到一个对象,下面的代码最熟悉不过了。
function Preson( name ) {
this.name = name;
}
var a = new Preson("seven2");
console.log(a.name) //seven2
Preson.prototype.getName = function() {
return this.name
}
console.log(a.getName()) //seven2
对象会记住它的原型。
var b = new Object();
console.log(b.__proto__ === Object.prototype) ;//true
附上我们最常用的原型继承方式
var obj = {name:'seven3'};
var A = function(){};
A.prototype = obj; //{name:'seven3'};
var aa = new A()
console.log(aa.name)
我们常期望一个类继承另外一个类时 ,往往使用以下代码来模拟
var AA = function() {};
AA.prototype = {name:"seven4"}
var BB = function() {};
BB.prototype = new AA()
var bb = new BB();
console.log(bb.name);//seven4
(一)面向对象的javascript的更多相关文章
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 前端开发:面向对象与javascript中的面向对象实现(一)
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- 面向对象的 JavaScript
面向对象的javascript 一.创建对象 创建对象的几种方式: var obj = {}; var obj = new Object(); var obj = Object.create(fath ...
- 摘抄--全面理解面向对象的 JavaScript
全面理解面向对象的 JavaScript JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或 ...
- 面向对象的JavaScript --- 动态类型语言
面向对象的JavaScript --- 动态类型语言 动态类型语言与面向接口编程 JavaScript 没有提供传统面向对象语言中的类式继承,而是通过原型委托的方式来实现对象与对象之间的继承. Jav ...
- 面向对象的JavaScript --- 封装
面向对象的JavaScript --- 封装 封装 封装的目的是将信息隐藏.一般而言,我们讨论的封装是封装数据和封装实现.真正的封装为更广义的封装,不仅包括封装数据和封装实现,还包括封装类型和封装变化 ...
- 面向对象的JavaScript --- 多态
面向对象的JavaScript --- 多态 多态 "多态"一词源于希腊文 polymorphism,拆开来看是poly(复数)+ morph(形态)+ism,从字面上我们可以理解 ...
- 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统
面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...
- 第1章 面向对象的JavaScript
针对基础知识的每一个小点,我都写了一些小例子,https://github.com/huyanluanyu1989/DesignPatterns.git,便于大家理解,如有疑问,大家可留言给我,最近工 ...
- javascript面向对象之Javascript 继承
转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...
随机推荐
- asp.net core 使用identityServer4的密码模式来进行身份认证(一)
IdentityServer4是ASP.NET Core的一个包含OpenID和OAuth 2.0协议的框架.具体Oauth 2.0和openId请百度. 前言本博文适用于前后端分离或者为移动产品来后 ...
- asp.net 下载EXCEL文件
一.需要导入NPOI 库文件 打开VS2012 工具>>库程序包管理器>>管理解决方案的NuGet程序包,搜索NPOI,如下图 安装完成: 添加 using NPOI.HSSF ...
- 如何使用socket进行java网络编程(三)
本篇文章继续记录java网络通讯编程的学习.在本系列笔记的第一篇中曾经记录过一个项目中的程序,当时还处于项目早期,还未进入与第三方公司的联调阶段,笔者只是用java写了一个client程序模拟了一下第 ...
- 盗墓笔记—阿里旺旺ActiveX控件imageMan.dll栈溢出漏洞研究
本文作者:i春秋作家——cq5f7a075d 也许现在还研究Activex就是挖坟,但是呢,笔者是摸金校尉,挖坟,呸!盗墓是笔者的本职工作. 额,不扯了,本次研究的是阿里旺旺ActiveX控件imag ...
- webpack快速入门——给webpack增加babel支持
1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...
- 2019 OO第一单元总结(表达式求导)
一. 基于度量的程序结构分析 1. 第一次作业 这次作业是我上手的第一个java程序,使用了4个类来实现功能.多项式采用两个arraylist来存,系数和幂指数一一对应. private ArrayL ...
- 一对一关联查询注解@OneToOne的实例详解
表的关联查询比较复杂,应用的场景很多,本文根据自己的经验解释@OneToOne注解中的属性在项目中的应用.本打算一篇博客把增删改查写在一起,但是在改的时候遇到了一些问题,感觉挺有意思,所以写下第二篇专 ...
- 奇怪的Java题:为什么1000 == 1000返回为False,而100 == 100会返回为True?
如果你运行如下代码: 1 2 3 4 Integer a = 1000, b = 1000; System.out.println(a == b);//1 Integer c = 100, d = ...
- 纯css实现不固定行数的文本在一个容器内垂直居中
项目中要实现的效果如图: html代码 及 css代码: <!DOCTYPE html> <html> <head> <meta charset=" ...
- docker微服务部署之:七、Rancher进行微服务扩容和缩容
docker微服务部署之:六.Rancher管理部署微服务 Rancher有两个特色用起来很方便,那就是扩容和缩容. 一.扩容前的准备工作 为了能直观的查看效果,需要修改下demo_article项目 ...