Javascript 面向对象编程(一):封装

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

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

一、 生成对象的原始模式

假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

  var Cat = {

    name : '',

    color : ''

  }

现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象。

  var cat1 = {}; // 创建一个空对象

    cat1.name = "大毛"; // 按照原型对象的属性赋值

    cat1.color = "黄色";

  var cat2 = {};

    cat2.name = "二毛";

    cat2.color = "黑色";

好了,这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。

二、 原始模式的改进

我们可以写一个函数,解决代码重复的问题。

  function Cat(name,color){

    return {

      name:name,

      color:color

    }

  }

然后生成实例对象,就等于是在调用函数:

  var cat1 = Cat("大毛","黄色");

  var cat2 = Cat("二毛","黑色");

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

三、 构造函数模式

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

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

比如,猫的原型对象现在可以这样写,

  function Cat(name,color){

    this.name=name;

    this.color=color;

  }

我们现在就可以生成实例对象了。

  var cat1 = new Cat("大毛","黄色");

  var cat2 = new Cat("二毛","黑色");

  alert(cat1.name); // 大毛

  alert(cat1.color); // 黄色

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

  alert(cat1.constructor == Cat); //true

  alert(cat2.constructor == Cat); //true

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

  alert(cat1 instanceof Cat); //true

  alert(cat2 instanceof Cat); //true

四、构造函数模式的问题

构造函数方法很好用,但是存在一个浪费内存的问题。

请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。那么,原型对象Cat就变成了下面这样:

  function Cat(name,color){

    this.name = name;

    this.color = color;

    this.type = "猫科动物";

    this.eat = function(){alert("吃老鼠");};

  }

还是采用同样的方法,生成实例:

  var cat1 = new Cat("大毛","黄色");

  var cat2 = new Cat ("二毛","黑色");

  alert(cat1.type); // 猫科动物

  cat1.eat(); // 吃老鼠

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

  alert(cat1.eat == cat2.eat); //false

能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?回答是可以的。

五、 Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

  function Cat(name,color){

    this.name = name;

    this.color = color;

  }

  Cat.prototype.type = "猫科动物";

  Cat.prototype.eat = function(){alert("吃老鼠")};

然后,生成实例。

  var cat1 = new Cat("大毛","黄色");

  var cat2 = new Cat("二毛","黑色");

  alert(cat1.type); // 猫科动物

  cat1.eat(); // 吃老鼠

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

  alert(cat1.eat == cat2.eat); //true

六、 Prototype模式的验证方法

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

6.1 isPrototypeOf()

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

  alert(Cat.prototype.isPrototypeOf(cat1)); //true

  alert(Cat.prototype.isPrototypeOf(cat2)); //true

6.2 hasOwnProperty()

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

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

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

6.3 in运算符

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

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

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

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

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

转载于:https://www.cnblogs.com/mingjixiaohui/p/5503012.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/284679.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ArcGIS Pro微课1000例】0016:ArcGIS Pro 2.8浮雕效果地图制图案例教程

ArcGIS Pro制作地图时可以制作出很多很炫的效果,比如地图阴影、地图晕渲效果、浮雕效果、三维效果等等。本实验讲解在ArcGIS Pro 2.8中制作浮雕效果地图,效果如下所示: 【参考阅读】:ArcGIS实验教程——实验四十四:ArcGIS地图浮雕效果制作完整案例教程 1. 加载矢量数据 …

用正则实现多行文本合并,从而保存为csv文件

有如下文本,想实现每三行合并为一行,最终生成csv文件 分数 人数 累计人数 661及以上 23 23 660 3 26 659 5 31 658 5 36 657 9 45 656 10 55 655 4 59 654 6 65 653 15 80查找项: ^(.) ^(.) ^(.)替换项: $1,$2,$3替换结果&…

聊一聊 C# 后台GC 到底是怎么回事?

一:背景 写这一篇的目的主要是因为.NET领域内几本关于阐述GC方面的书,都是纯理论,所以懂得人自然懂,不懂得人也没法亲自验证,这一篇我就用 windbg 源码 让大家眼见为实。二:为什么要引入后台GC 1. 后台GC到…

【BIM入门实战】Revit中的墙体层次以及常见问题解答

一、Revit墙体的层次 1. Revit墙体的层次如图 Revit绘制墙体时,要先选择定位线,可以选核心层中心线,也可以选墙中心线,当墙体为对称时,核心层中心线与墙中心线会重合。 2. 具体层次 1)结构[1]:必须在核心边界内 2)衬底[2]:其他材质基础的材料,如胶合板或石膏板 3…

Spring Boot 使用Redis

转载自:http://www.cnblogs.com/ityouknow/p/5748830.html Redis支持更丰富的数据结构,例如hashes, lists, sets等,同时支持数据持久化。除此之外,Redis还提供一些类数据库的特性,比如事务,HA,主…

工具链接

OmniGraffle Pro 7.0.2 Mac中文破解版 | 史蒂芬周的博客        http://www.sdifenzhou.com/omnigrafflepro702.html 转载于:https://www.cnblogs.com/wfwenchao/p/6393097.html

FlashCache初体验

FlashCache初体验 注意: 测试用的是CentOS6.5 内核版本2.6.32-431.el6.x86_64 步骤: 上传CentOS6.5做本地yum源,安装以下包。 yum install gcc yum install *kernel* yum install perl 将flashcache master打包下载至测试机上,可以…

用python将指定目录下的所有json文件合并成一个csv文件

#!/usr/bin/env python # -*- encoding: utf-8 -*-import sys import json import os import pandas as pd import csv""" 获取文件名列表 """ def list_file_names(folder):exist_files os.listdir(folder)file_list []for f in exist_files:…

【系统设计】分布式键值数据库

键值存储 ( key-value store ),也称为 K/V 存储或键值数据库,这是一种非关系型数据库。每个值都有一个唯一的 key 关联,也就是我们常说的 键值对。常见的键值存储有 Redis, Amazon DynamoDB,Microsoft Azure Cosmos DB&#xff0c…

keras系列︱Application中五款已训练模型、VGG16框架(Sequential式、Model式)解读(二)...

引自:http://blog.csdn.net/sinat_26917383/article/details/72859145 中文文档:http://keras-cn.readthedocs.io/en/latest/ 官方文档:https://keras.io/ 文档主要是以keras2.0。 . . Keras系列: 1、keras系列︱Sequential与Mo…

【BIM入门实战】Revit建筑墙体:构造、包络、叠层图文详解

本文主要讲解Revit建筑墙体:构造、包络、叠层。 一、基本墙 第一步: 选择菜单栏的【建筑】选项卡中的【墙】下拉菜单→【属性】面板中切换至基本墙→点击属性面板中的【编辑类型】,弹出如下墙体对话框。 第二步: 选择【复制】按钮→重新进行编辑名称,命名为“外墙-1F-2…

win11 恢复win10开始菜单及任务栏

Windows Registry Editor Version 5.00[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced] "Start_ShowClassicMode"dword:00000001 "TaskbarSi"dword:00000000将上述代码存为reg文件,双击导入注册表。 任务栏…

CentOS安装Tomcat

1. 下载Tomcat安装包: Tomcat官网 解压下载下来的tar.gz至任意目录下,执行命令: Java代码 tar -xzf apache-tomcat-7.0.56.tar.gz 解压后如图: 如果是在windows上,则直接解压zip包到任意目录&…

【BIM+GIS】ArcGIS Pro2.8如何打开Revit模型,BIM和GIS融合?

ArcGIS Pro2.8中,可以直接打开Revit模型(.rvt)项目文件,实现了从数据格式方面BIM与GIS的有机融合,具体操作如下所示: 1. Revit2018模型绘制 打开Revit2018软件,选择【建筑样板】,打开标高1楼层平面,新建一个简单的户型:包括四面墙体、2个门和一扇窗户,如下图所示。…

Edge 开发者沙龙|一小时精通Edge扩展开发

点击蓝字关注我们编辑:Alan Wang排版:Rani Sun微软 Reactor 为帮助广开发者,技术爱好者,更好的学习 .NET Core, C#, Python,数据科学,机器学习,AI,区块链, IoT 等技术,将…

tomcat 开启远程debug

1、linux服务器上tomcat配置startup.sh 文件末尾添加(不换行):declare -x CATALINA_OPTS"-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:transportdt_socket,servery,suspendn,address9876"2、eclipse配置:…

公历还是很简单的

1 import java.util.*;2 class CalendarTest3 {4 /*先输出提示语句,并接受用户输入的年、月。5 根据用户输入的年,先判断是否是闰年。6 根据用户输入的年份来判断月的天数。7 用循环计算用户输入的年份距1900年1月1日的总天数。8 用…

【测绘程序设计】坐标反算神器V1.0(附C/C#/VB源程序)

【拓展阅读】:【测绘程序设计】坐标正算神器V1.0(附C/C#/VB源程序) 一、坐标反算原理 ​坐标反算:已知两点坐标,反求边长和方位角,称为坐标反算。 原理坐标系: 计算公式: 二、C#程序实现 1. 界面设计 2

在二维数组中查找一个数

在一个二维数组中,每一行都按照从左到右递增的顺序排列,每一列也按照从上到下递增的顺序排列。在这样一个序列中查找一个数1 2 8 92 4 9 124 7 10 136 8 11 15例如查找7,就从第一行的最左边查找,9大于7,则9以下的也不用…

ASP.NET Core 6框架揭秘实例演示[01]: 编程初体验

本篇提供的20个简单的演示实例基本涵盖了ASP.NET Core 6基本的编程模式,我们不仅会利用它们来演示针对控制台、API、MVC、gRPC应用的构建与编程,还会演示Dapr在.NET 6中的应用。除此之外,这20个实例还涵盖了针对依赖注入、配置选项、日志记录…