JavaScript中的封装

Javascript 之封装(Package)

原作者:阮一峰

     Javascript是一种基于对象(object-based)的语言,我们在JS中遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。

    那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?

一、 构造函数(Constructor)模式的封装

    为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。   

    所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

    举个例子,下面生成的是狗的原型对象:

    function Dog(name,color,species){
            this.name = name;
            this.color = color;
            this.species = species;
            this.type = "犬科动物";
     }

生成实例对象如下:

     var dog1 = new Dog("大黄","黄色","中华田园犬");
     var dog2 = new Dog("小黑","黑色","德国黑背");
     alert(dog1.name);  //大黄
   alert(dog2.color);  //黑色

    这时dog1和dog2会自动含有一个constructor属性,指向它们的构造函数。

  alert(dog1.constructor == Dog); //true

  alert(dog2.constructor == Dog); //true

    Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。

  alert(dog1 instanceof Dog); //true

  alert(dog2 instanceof Dog); //true

    但是,构造函数模式也存在浪费内存的问题。因为对于每一个实例对象,type属性都是一样的内容,每生成一个实例对象,都必须为重复的内容多分配一次内存,这样既不节省,也缺乏效率。因此,我们应该想出一种让type这样的属性在内存中只生成一次,并且所有实例都指向这个内存地址的方法。


二、 构造函数结合原型属性(Prototype)模式的封装

    针对构造函数方法会浪费内存的问题,有下面的解决方案,即将那些不变的属性和方法,直接定义在构造函数的Prototype对象上。

    function Dog(name,color,species){
              this.name = name;
              this.color = color;
              this.species = species;
     }
    Dog.prototype.type = "犬科动物";

    生成实例对象如下:

     var dog1 = new Dog("大黄","黄色","中华田园犬");
     var dog2 = new Dog("小黑","黑色","德国黑背");
     alert(dog1.type);  //犬科动物

    这时所有实例的type属性,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。


三、 Prototype模式的验证方法

    为了配合prototype属性,Javascript定义了一些辅助方法,帮助我们使用它。,

3.1 isPrototypeOf()

    这个方法用来判断,某个proptotype对象和某个实例之间的关系。

  alert(Dog.prototype.isPrototypeOf(dog1)); //true

  alert(Dog.prototype.isPrototypeOf(dog2)); //true

3.2 hasOwnProperty()

    每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。

  alert(dog1.hasOwnProperty("name")); // true

  alert(dog1.hasOwnProperty("type")); // false

3.3 in运算符

 in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。

  alert("name" in dog1); // true

  alert("type" in dog1); // true

 in运算符还可以用来遍历某个对象的所有属性。

  for(var prop in dog1) { alert("dog1["+prop+"]="+dog1[prop]); }

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值