Javascript 之封装(Package) - 网站

Javascript 之封装(Package)

分类:JavaScript进阶教程_JavaScript技术文章 · 发布时间:2021-09-11 18:02 · 阅读:4905

Javascript是一种基于对象(object-based)的语言,我们在JS中遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程语言,因为它的语法中没有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]); }

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

标签:
javascript package

相关文章

一起来学习TypeScript的类型

这篇文章主要为大家详细介绍了TypeScript的类型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

JavaScript去除字符串两端空格的三种方法

本文主要介绍了JavaScript去除字符串两端空格的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

html2canvas图片跨域问题图文详解

我们在进行图片保存的时候经常会发现图片跨域了,下面下面这篇文章主要给大家介绍了关于html2canvas图片跨域问题的相关资料,需要的朋友可以参考下

JavaScript中Set基本使用方法实例

因为Set中存放的数据都是不会重复的数据,我们在编写JS代码的时候,因此我们可以利用Set来帮助我们更便捷地完成许多的事,下面这篇文章主要给大家介绍了关于JavaScript中Set基本使用方法的相关资料,需要的朋友可以参考下

详解vscode中console.log的两种快速写法

这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

返回分类 返回首页