网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 简单理解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)+"!!!"; 
     }
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 16:22:51