足球游戏_中国足彩网¥体育资讯$

简单理解JavaScript中的封装与继承特性
来源:易贤网 阅读:570 次 日期:2016-07-19 14:38:14
温馨提示:易贤网小编为您整理了“简单理解JavaScript中的封装与继承特性”,方便广大网友查阅!

这篇文章主要介绍了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)+"!!!"; 

 }

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标