Javascript 之封装(Package)

所属分类: 网络编程 / JavaScript 阅读数: 262
收藏 0 赞 0 分享

一、 构造函数(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]); }

总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多