Javascript 之封装(Package)

 更新时间:2018年09月14日 16:04:23   作者:java面试笔试  
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]); }

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

相关文章

  • 详解 TypeScript 枚举类型

    详解 TypeScript 枚举类型

    这篇文章主要介绍了TypeScript 枚举类型,TypeScript 在 ES 原有类型基础上加入枚举类型,使得在 TypeScript 中也可以给一组数值赋予名字,这样对开发者比较友好,可以理解枚举就是一个字典,文章内容围绕TypeScript 枚举类型展开内容,需要的朋友可以参考一下
    2021-10-10
  • WebAssembly使用方法研究

    WebAssembly使用方法研究

    这篇文章主要为大家介绍了WebAssembly使用方法研究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 微信小程序 label 组件详解及简单实例

    微信小程序 label 组件详解及简单实例

    这篇文章主要介绍了微信小程序 label 组件详解及简单实例的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 获取javascript 里的数据

    微信小程序 获取javascript 里的数据

    这篇文章主要介绍了微信小程序 获取javascript 里的数据的相关资料,这里通过实例来说明如何获取javascript里的数据,希望能帮助到大家,需要的朋友可以参考下
    2017-08-08
  • 微信小程序的日期选择器的实例详解

    微信小程序的日期选择器的实例详解

    这篇文章主要介绍了微信小程序的日期选择器的实例详解的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • 微信小程序 picker-view 组件详解及简单实例

    微信小程序 picker-view 组件详解及简单实例

    这篇文章主要介绍了微信小程序 picker-view 组件详解及简单实例的相关资料,需要的朋友可以参考下
    2017-01-01
  • 解密效果

    解密效果

    解密效果...
    2006-06-06
  • 前端框架ECharts dataset对数据可视化的高级管理

    前端框架ECharts dataset对数据可视化的高级管理

    这篇文章主要为大家介绍了前端框架ECharts dataset对数据可视化的高级管理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • reduce探索lodash.reduce实现原理解析

    reduce探索lodash.reduce实现原理解析

    这篇文章主要为大家介绍了reduce探索lodash.reduce实现原理示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 关于js typeof 与 instanceof 判断数据类型区别及开发使用

    关于js typeof 与 instanceof 判断数据类型区别及开发使用

    我们经常会遇到判断一个变量的数据类型或该变量是否为空值的情况,你是如何去选择判断类型操作符的?本文来记录一下我们开发人员必须掌握关于 typeof 和 instanceof 的知识点及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题,需要的朋友可参考下文章内容
    2021-10-10

最新评论