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

 更新时间:2016年03月19日 15:07:36   作者:sjpsega  
这篇文章主要介绍了JavaScript中的封装与继承特性,封装与继承是基于对象编程概念中的基本特性,需要的朋友可以参考下

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 function函数种类

    浅谈JavaScript function函数种类

    这篇文章主要介绍了JavaScript function函数种类,包括普通函数、匿名函数、闭包函数、十分的全面,并附上了示例,这里推荐给大家,希望对大家能有所帮助。
    2014-12-12
  • 简单谈谈Javascript函数中的arguments

    简单谈谈Javascript函数中的arguments

    在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。下面这篇文章主要介绍了关于Javascript函数中的arguments面貌以及如何转化为数组的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • window.open的功能全解析

    window.open的功能全解析

    window.open的功能全解析...
    2006-10-10
  • 实例解析JS布尔对象的toString()方法和valueOf()方法

    实例解析JS布尔对象的toString()方法和valueOf()方法

    这篇文章主要介绍了JS的布尔对象的toString()方法和valueOf()方法,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2015-10-10
  • 关于js中alert弹出窗口文本换行问题简单详细说明

    关于js中alert弹出窗口文本换行问题简单详细说明

    js中alert弹出窗口文本换行是一个小问题,本人很是郁闷,于是搜集整理下,晒出来和大家分享
    2012-12-12
  • 详解javascript设计模式三:代理模式

    详解javascript设计模式三:代理模式

    这篇文章主要介绍了javascript设计模式三:代理模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • javascript冒泡排序小结

    javascript冒泡排序小结

    冒泡排序由于比较简单和容易理解,往往会成为人们首先想到的排序算法。最基本的想法就是在一次里面比较两个数字,并且确保他们在移动到其他项目之前有一个正确的顺序。在每一关结束,有价值的“排序”到正确的位置,最终只留下其他项目排序。
    2016-04-04
  • 全面了解JavaScript的数据类型转换

    全面了解JavaScript的数据类型转换

    下面小编就为大家带来一篇全面了解JavaScript的数据类型转换。小编觉得挺不错的,现在就分享给大家看,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 经常用到的JavasScript事件的翻译

    经常用到的JavasScript事件的翻译

    经常用到的JavasScript事件的翻译...
    2007-04-04
  • window.onload和$(function(){})的区别介绍

    window.onload和$(function(){})的区别介绍

    window.onload和$(function(){})有什么区别。window.onload表示页面加载完了后(包括dom和js),再执行函数里面的内容,感兴趣的朋友可以了解下
    2013-10-10

最新评论