JS封装与继承：从私有变量到原型链继承的实现

JavaScript对象封装的三种模式

JavaScript中的封装简单来说，封装旨在限制外部对对象内部细节和数据的直接访问，仅暴露共有的变量和函数。在JavaScript中，创建对象并实现封装主要有三种方式：完全公开的“门户大开”模式、通过命名规范区分的半私有模式，以及利用闭包实现的真正私有变量模式。第一种是“门户大开”型，这是实现对象最基础的方法。在此模式下，所有方法和变量均为共有状态，外部可以直接访问。


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”关键字进行创建和绑定。第二种方式是通过命名规范来区分私有变量。这是“门户大开”型的优化版本，其做法是在私有变量或方法名前添加下划线“_”作为前缀。然而，这种隐藏并非真正的安全隔离，如果程序员有意通过类似_getName()的方式强行调用，依然无法阻止访问，因此变量并未被真正隐藏。第三种方式是利用闭包创建真正的私有变量。该方法利用了JavaScript中只有函数具有作用域的特性，在构造函数内部定义相关变量。这些变量可以被定义在该作用域内的所有函数访问，从而实现真正的数据隐藏。


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继承实现

JavaScript中的继承以Book基类为例：


var Book = function(name){ 
  if(this.check(name)){ 
    console.log(&quot;error&quot;); 
    throw new Error(&quot;name null&quot;); 
  } 
  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对象封装的三种模式

基于原型链的JavaScript继承实现

实用工具推荐