这周心血来潮，翻看了现在比较流行的几个JS脚本框架的底层代码，虽然是走马观花，但也受益良多，感叹先人们的伟大……

感叹是为了缓解严肃的气氛并引出今天要讲的话题，”javascript面向对象编程”，接下来，我们围绕面向对象的几大关键字：封装，继承，多态，展开。

封装：javascript中创建对象的模式中，个人认为通过闭包才算的上是真正意义上的封装，所以首先我们先来简单介绍一下闭包，看下面这个例子：

<script type="text/javascript">// <![CDATA[
function myInfo(){
var name ="老鱼",age =27;
var myInfo = "my name is" + name + "i am" + age +"years old";
function showInfo(){
alert(myInfo);
}
return showInfo;
}
var oldFish = myInfo();
oldFish();
// ]]></script>

是不是很眼熟呢？没错了，这其实就是一个简单的闭包应用了。简单解释一下：上面的函数myInfo中定义的变量，在它的内嵌函数showInfo中是可访问的（这个很好理解），但是当我们把这个内嵌函数的返回引用赋值给一个变量oldFish，这个时候函数showInfo是在myInfo函数体外被调用，但是同样可以访问到定义在函数体内的变量。oh yeah!

总结一下闭包的原理吧：函数是运行在定义他们的作用域中而不是调用他们的作用域中。其实返回一个内嵌函数也是创建闭包最常用的一种方法！

如果觉得上面的解释太抽象的话，那么我们一起重塑上面的函数，看看这样是否层次鲜明一些：

<script type="text/javascript">// <![CDATA[
var ioldFish = function(name,age){
var name = name,age = age;
var myInfo = "my name is" + name + "i am" + age +"years old";
return{
showInfo:function(){
alert(myInfo);
}
}
}
ioldFish("老鱼",27).showInfo();
// ]]></script>

上例中的编码风格是ext yui中比较常见的，公私分明，一目了然。通过闭包，我们可以很方便的把一些不希望被外部直接访问到的东西隐藏起来，你要访问函数内定义的变量，只能通过特定的方法才可以访问的到，直接从外部访问是访问不到的，写的挺累，饶了一圈终于转回来了，封装嘛，不就是把不希望被别人看到的东西隐藏起来嘛！哈哈……

上例如果转换成JQ的风格的话，应该如下例所写， 这样的封装模式属于门户大开型模式，里面定义的变量是可以被外部访问到的（下面的例子如果你先实例化一个对象，然后在函数外部访问对象的name或者age属性都是可以读取到的）当然这种模式下我们可以设置一些”潜规则”，让团队开发成员明白哪些变量是私用的，通常我们人为的在私有变量和方法前加下划线”_”，标识警戒讯号！从而实现”封装”

<script type="text/javascript">// <![CDATA[
var ioldFish = function(name,age){
return ioldFish.func.init(name,age);
};
ioldFish.func = ioldFish.prototype ={
init:function(name,age){
this.name = name;
this.age = age;
return this;
},
showInfo:function(){
var info = "my name is" + this.name +"i am " +this.age+"years old";
alert(info);
}
};
ioldFish.func.init.prototype = ioldFish.func;
ioldFish(" 老 鱼",27).showInfo();
//var oldFish = new ioldFish("老鱼",27);
//alert(oldFish.name);
// ]]></script>

可能有人会问，哪种模式好呢？这个怎么说呢？两种方式都有优缺点，结合着用呗！总之一个原则，一定一定不能直接被外部对象访问的东西，就用闭包封装吧。”一定一定”四个字很深奥，不断实践中才能体会真谛！

继承：提到这个的时候，要顺便再补充一句：闭包封装中的一个缺点，不利于子类的派生，所以闭包有风险，封装需谨慎！直观起见，下面例子中创建对象的方式，采用”门户大开型”模式。

在javascript中继承一般分为三种方式：”类式继承”，”原型继承”,”掺元类”。下面简单的介绍一下三类继承方式的原理。

A.类式继承：这个是现在主流框架中常用的继承方式，看下例：

<script type="text/javascript">// <![CDATA[
var Name = function(name){
this.name = name;
};
Name.prototype.getName = function(){
alert(this.name);
};
var Fish = function(name,age){
Name.call(this,name);
this.age = age;
};
Fish.prototype = new Name();
Fish.prototype.constructor = Fish;
Fish.prototype.showInfo = function(){
alert(this.age);
}
var ioldFish = new Fish("老鱼",27);
ioldFish.getName();
// ]]></script>

上述子类Fish中并没定义getName方法，但是子类Fish的实例对象ioldFish依然调用到了该方法，这是因为子类Fish继承了超类Name中定义的getName方法。解释一下，这里子类Fish的prototype指到了超类的一个实例，在子类Fish中虽然没有申明getName方法，但是根据原型链原理，会向prototype指向的上一级对象中去查找是否有该方法，如果没找到该方法，会一直搜索到最初的原型对象。这其实也就是继承的原理了。这里特别说明一下，Fish.prototype.constructor = Fish;这句，由于默认子类的prototype应该是指向本身的，但是之前把prototype指向到了超类的实例对象，所以在这里要把它设置回来。当然这里可以把相关代码通过一个函数来组织起来，起到伪装extend的作用，这里不再阐述，可以关注本人下篇博文……

B.原型继承，从内存性能上看优于类式继承。

<script type="text/javascript">// <![CDATA[
function clone(object){
var F = function(){};
F.prototype = object;
return new F();
};
var Name = {
name:"who's name",
showInfo:function(){
alert(this.name);
}
};
var Fish = clone(Name);
//Fish.name = "老鱼";
Fish.showInfo();
// ]]></script>

很明显，原型继承核心就是这个clone函数，同样是原型链的原理，不同的是它直接克隆超类，这样的话子类就继承了超类的所有属性和方法.特别说一下，这类继承并不需要创建构造函数，只需要创建一个对象字变量，定义相应的属性和方法，然后在子类中只需要通过圆点”.”符号来引用属性和方法就可以了.

C.掺元类：把一些常用通用性比较大的方法统一封装在一个函数中，然后通过下面这个函数分派给要用到这些方法的类．还可以针对不同的类，选择性的传递需要的方法。

<script type="text/javascript">// <![CDATA[
function agument(receveClass,giveClass){
if(arguments[2]){
var len = arguments.length;
for(i=2;i<len;i++){
receveClass.prototype[arguments[i]] = giveClass.prototype[arguments[i]];
}
}
else{
for(method in giveClass.prototype){
if(!receveClass.prototype[method]){
receveClass.prototype[method] = giveClass.prototype[method];
}
}
}
};
var Name = function(){};
Name.prototype ={
sayLike:function(){
alert("i like oldfish");
},
sayLove:function(){
alert("i love oldfish");
}
}
var Fish = function(){};
var ioldFish = new Fish();
agument(Fish,Name,"sayLove");
ioldFish.sayLove();
ioldFish.sayLike();
// ]]></script>

多态：个人觉得这个比较抽象，很难言传，所以下面就从重载和覆盖两个方面来简单阐述一下。

重载：上面这个例子中agument函数初始带了两个参数，但是在后面的调用中，agument(Fish,Name,”sayLove”)同样可以带入任意多个参数，javascript的重载，是在函数中由用户自己通过操作arguments这个属性来实现的。

覆盖：这个很简单，就是子类中定义的方法如果与从超类中继承过来的的方法同名，就覆盖这个方法（这里并不是覆盖超类中的方法，注意一下），这里就不累赘了！

最后重点着墨说一下this和执行上下文，在前面举的封装例子中，this都是表示this所在的类的实例化对象本身，但是并不是千篇一律的，打个比方，通过HTML属性定义的事件处理代码，见如下代码：

<script type="text/javascript">// <![CDATA[
var Name = function(name) {
this.name = name;
this.getName = function () {
alert(this.name);
}
};
var ioldFish = new Name("老鱼"),
btn = document.getElementById('btn');
btn.onclick = ioldFish.getName;
//btn.onclick = function(){ioldFish.getName.call(ioldFish)};
// ]]></script>

上例中点了按钮以后弹出框里并没有显示出实例对象的属性，这是因为this的执行上下文已经改变了，他现在所在的上下文应该是input这个HTML标签，但是该标签又不存在getName这个属性，所以自然无法输出这个属性的属性值了！从这个例子我们不难看出：执行上下文是在执行时才确定的，它随时可以变。

当然你可以去掉上面我注释掉的那段代码，通过call改变this的执行上下文，从而获取getName方法。apply方法同样可以实现改变执行上下文的功能，不过在prototype框架中发现了一个更为优美的实现方法bind。看一下这个方法的实现吧，不得不感叹先人的伟大……

Function.prototype.bind = function(obj) {
var method = this,
temp = function() {
return method.apply(obj, arguments);
};
}

相信如果能看明白的话，您已经可以靠这些知识点，去写一个简单的脚本框架了，多多实践，相信不久的将来就能高手进级了！如果没看明白，也不用着急，面向对象本来就有些抽象，多练习练习，应该OK的了，加油……

这篇先写到这吧，下篇文章可以和大家一起探讨一下，javascript的设计模式，敬请期待。

转载于:https://www.cnblogs.com/gaoyoubo/articles/1743604.html

浅谈javascript面向对象编程相关推荐

  1. 浅谈JavaScript 面向对象编程[转]

    这周心血来潮,翻看了现在比较流行的几个 JS 脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大-- 感叹是为了缓解严肃的气氛并引出今天要讲的话题,"javascript 面 ...

  2. 浅谈PHP面向对象编程（二）

    和一些面向对象的语言有所不同,PHP并不是一种纯面向对象的语言,包PIP它支持面向对象的程序设计,并可以用于开发大型的商业程序.因此学好面向对象输程对PHP程序员来说也是至关重要的.本章并针对面向对象 ...

  3. 浅谈javascript面向对象理解

    1.面向对象与面向编程的比较 1.1 面向对象(oop) 面向对象是把事物分解称为一个个对象,然后由对象之间分工与合作,是以对象功能划分问题,而不是步骤 特征: 封装性.继承性.多态性 优点: 优点: ...

  4. 浅谈PHP面向对象编程（二、基础知识）

    和一些面向对象的语言有所不同,PHP并不是一种纯面向对象的语言,包PIP它支持面向对象的程序设计,并可以用于开发大型的商业程序.因此学好面向对象输程对PHP程序员来说也是至关重要的.本章并针对面向对象 ...

  5. 浅谈PHP面向对象编程（九）

    9.0 设计模式 在编写程序时经常会遇到一此典型的问题或需要完成某种特定需求,设计模式就是针对这些问题和需求,在大量的实践中总结和理论化之后优选的代码结构编程风格,以及解决问题的思考方式. 设计模式就 ...

  6. php面向对象静态常量,浅谈PHP面向对象编程（四、类常量和静态成员）

    4.0 类常量和静态成员 通过上几篇博客我们了解到,类在实例化对象时,该对象中的成员只被当前对象所有.如果希望在类中定义的成员被所有实例共享. 此时可以使用类常量或静态成员来实现,接下来将针对类常量和 ...

  7. 浅谈 JavaScript 编程语言的编码规范--转载

    原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...

  8. JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6

    Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...

  9. JavaScript 面向对象编程（三） —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝

    本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 系列笔记: JavaScript 面 ...

  10. 在JavaScript面向对象编程中使用继承(5)

    明天就要回老家去过年了,关于这个"在JavaScript面向对象编程中使用继承"的话题居然还没有说完.如果不完成,留下来一拖就拖到明年去了.所以还是抽空把它写完,今年的事情今年做, ...

最新文章

  1. logback节点配置详解
  2. JavaScript 高级技巧
  3. Android菜单详解（一）——理解android中的Menu
  4. VMware vSphere 5.1 群集深入解析（二十六）- 数据存储维护模式汇总
  5. c语言中for中声明变量,C中for循环中的变量重新声明
  6. Linux系统编程——进程替换：exec 函数族
  7. 将list中的数据类型都变成int类型
  8. python字符编码转换说明及深浅copy介绍
  9. PIFA-平面倒F天线[搬运]
  10. 实用技巧：阿里云服务器建立公网物联网服务器（解决阿里云服务器端口，公网连接不上的问题）
  11. oracle v rman status,ORACLE xtts + RMAN
  12. ContextCapture | 无人机倾斜摄影技术在农村不动产确权中的应用
  13. 第四章软件项目进度管理
  14. Java poi ppt图片置于底层_POI之PPT图片插入简单实例
  15. 计算机等级证书分几级 哪个级别最高
  16. python合并音频Couldn‘t find ffprobe or avprobe解决办法
  17. 18天精读掌握《费曼物理学讲义卷一》 第7天 2019.6.20
  18. [陈鹏导师精益项目实战]华北区家电行业精益改善项目第五期启动
  19. r语言remarkdown展示图_R语言knitr之rmarkdown
  20. 自定义相机Camera，相机/视频实时滤镜 - android

热门文章

  1. hdfs文件分块 java_Hadoop（八）Java程序访问HDFS集群中数据块与查看文件系统
  2. android 高德amap开发一（地图创建）
  3. 函数参数约定、传递顺序、传递方式
  4. ionic 网站放在服务器,Ionic4 服务器插件-服务器Httpd - Ionic Native
  5. wifinative.java_Android 中的WiFi剖析
  6. hbase java 分页查询_HBase伪快速分页查询
  7. arcgis水文分析_值得收藏！用DEM做水文分析前，你还需要储备的知识
  8. 为什么不要在android log中打印中文_Android 开发：揭开App秒开的奥秘
  9. ironpython调用c dll_在IronPython中加载模块
  10. android studio 找不到reosurce,EF 6 Bridge Table Insert Not Working