简单理解JavaScript中的封装与继承特性


Posted in Javascript onMarch 19, 2016

JavaScript中的封装
封装简单地说就是让外界只能访问对象的共有变量和函数,隐藏细节和数据。
js中有三种方法创建对象,分别为门户大开型、用命名规范区分私有变量、闭包创建真正的私有变量三种。
1.门户大开型,是实现对象的最基础的方法,所有方法与变量都是共有的外界可以访问。

var Book = function(name){ 
  if(this.check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  this.name = name; 
} 
Book.prototype = { 
  check:function(name){ 
    if(!name){ 
      return true; 
    } 
  }, 
  getName:function(){ 
    return this.name; 
  } 
} 
 
var book = new Book("哈哈"); 
//output:哈哈 哈哈 
console.log(book.name,book.getName());

这个例子是门户大开型的典型,外界能直接访问对象的属性和方法。可以注意到属性和变量都有"this"来创建。
 
2.用命名规范区分私有变量,该方法是门户大开型的优化版本,只不过是在私有变量或方法前面用"_"区分,如果有程序员有意使用_getName()的方法来调用方法,还是无法阻止的,不是真正地将变量隐藏。
 
3.闭包创建真正的私有变量,该方法利用js中只有函数具有作用域的特性,在构造函数的作用域中定义相关变量,这些变量可以被定义域该作用域中的所有函数访问。

var Book2 = function(name){ 
  if(check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  name = name; 
  function check(name){ 
    if(!name){ 
      return true; 
    } 
  } 
  this.getName = function(){ 
    return name; 
  } 
} 
Book2.prototype = { 
  display:function(){ 
    //无法直接访问name 
    return "display:"+this.getName(); 
  } 
} 
var book2 = new Book2("哈哈"); 
//output:undefined "哈哈" "display:哈哈" 
console.log(book2.name,book2.getName(),book2.display());

 可以看到,这个例子中的结果,直接访问name会返回undefined的结果。可以看到这个例子与门户大开型的区别,门户大开型中的变量使用"this"来创建,而这个例子中使用var来创建,check函数也是如此,使得name与check函数只能在构造函数的作用域中访问,外界无法直接访问。
该方法解决了前两种方法的问题,但是也有一定的弊端。在门户大开型对象创建模式中,所有方法都创建在原型对象中,因此不管生成多少对象实例,这些方法在内存中只存在一份,而采用该方法,每生成一个新的对象都会为每个私有变量和方法创建一个新的副本,故会耗费更多的内存。

JavaScript中的继承
Book基类:

var Book = function(name){ 
  if(this.check(name)){ 
    console.log("error"); 
    throw new Error("name null"); 
  } 
  this.name = name; 
} 
Book.prototype = { 
  check:function(name){ 
    if(!name){ 
      return true; 
    } 
  }, 
  getName:function(){ 
    return this.name; 
  } 
}

继承方法:

function extend(subClz,superClz){ 
var F = function(){} 
F.prototype = superClz.prototype; 
subClz.prototype = new F(); 
subClz.prototype.constructor = subClz; 
subClz.superClass = superClz.prototype; 
if(superClz.prototype.constructor == Object.prototype.constructor){ 
  superClz.prototype.constructor = superClz; 
}

 
使用空函数F作为桥接,可以避免直接实例化父类时调用父类的构造函数带来额外开销,而且当父类的构造函数有参数时,想直接通过subClass.prototype = new superClass();实现父类构造函数的调用和原型链的继承是不行的。

subClz.superClass = superClz.prototype; 
if(superClz.prototype.constructor == Object.prototype.constructor){ 
  superClz.prototype.constructor = superClz; 
}

 
添加这三句可以避免子类继承父类写Book.call(this,name);而是简单地写ArtBook.superClass.Constructor.call(this,name)便能实现。
并且在子类重写父类方法的时候,可以调用到父类的方法:

ArtBook.prototype.getName = functiion(){ 
  return ArtBook.superClass.getName.call(this) + "!!!"; 
}

ArtBook子类:

var ArtBook = function(name,price){ 
  ArtBook.superClass.Constructor.call(this,name); 
  this.price = price; 
} 
extend(ArtBook,Book); 
ArtBook.prototype.getPrice = function(){ 
    return this.price; 
} 
ArtBook.prototype.getName = function(){ 
   return ArtBook.superClass.getName.call(this)+"!!!"; 
 }
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
JavaScript的函数式编程基础指南
Mar 19 #Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 #Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 #Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 #Javascript
JQuery用户名校验的具体实现
Mar 18 #Javascript
基于javascript实现页面加载loading效果
Sep 15 #Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 #Javascript
You might like
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php实现的用户查询类实例
2015/06/18 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
python自动点赞功能的实现思路
2020/02/26 Python
python将unicode和str互相转化的实现
2020/05/11 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
毕业自我鉴定
2013/11/05 职场文书
撤诉书怎么写
2015/05/19 职场文书
未婚证明格式
2015/06/15 职场文书