精华内容
下载资源
问答
  • 浏览器对象模型bom的作用是什么? 零、总结 1、BOM提供了独立于内容而与浏览器窗口进行交互的对象 2、BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,...

    浏览器对象模型bom的作用是什么?

    零、总结

    1、BOM提供了独立于内容而与浏览器窗口进行交互的对象

    2、BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象以使得我们可以通过这个入口来使用DOM的强大功能!!!

     

    一、什么是BOM?

    • BOM是Browser Object Model的缩写,简称浏览器对象模型
    • BOM提供了独立于内容而与浏览器窗口进行交互的对象
    • 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window
    • BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
    • BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化)
    • BOM最初是Netscape浏览器标准的一部分

    基本的BOM体系结构图

    二、能利用BOM做什么?

    BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象以使得我们可以通过这个入口来使用DOM的强大功能!!!

    window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象,例如下面两行代码是一样的:

        document.write("BOM");
        window.document.write("BOM");

     

    window -- window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,或者对它产生其他影响。

    JavaScript中的任何一个全局函数或变量都是window的属性

    window子对象

    • document 对象
    • frames 对象
    • history 对象
    • location 对象
    • navigator 对象
    • screen 对象

    window对象关系属性

    • parent:如果当前窗口为frame,指向包含该frame的窗口的frame (frame)
    • self :指向当前的window对象,与window同意。 (window对象)
    • top :如果当前窗口为frame,指向包含该frame的top-level的window对象
    • window :指向当前的window对象,与self同意。
    • opener :当窗口是用javascript打开时,指向打开它的那人窗口(开启者)

    window对象定位属性

    • IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置,但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小(显示HTML页的区域),但它们不是标准属性。
    • Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

    1、window对象的方法

    窗体控制
    moveBy(x,y)——从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
    moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点,当使用负数做为参数时会吧窗体移出屏幕的可视区域
    resizeBy(w,h)——相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
    resizeTo(w,h)——把窗体宽度调整为w个像素,高度调整为h个像素
    窗体滚动轴控制
    scrollTo(x,y)——在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
    scrollBy(x,y)—— 如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
    窗体焦点控制
    focus()—— 使窗体或控件获取焦点
    blur()——与focus函数相反,使窗体或控件失去焦点
    新建窗体
    open()——打开(弹出)一个新的窗体
    close()——关闭窗体
    opener属性——新建窗体中对父窗体的引用,中文"开启者"的意思

    window.open方法语法

        window.open(url, name, features, replace);

     

    open方法参数说明

    • url -- 要载入窗体的URL
    • name -- 新建窗体的名称(目标,将在a 标签的target属性中用到,当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式,因此页面都将以弹出的方式打开
    • features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔
    • replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定

    open函数features参数说明,如果不使用第三个参数,将打开一个新的普通窗口

    参数名称类型说明
    height Number 设置窗体的高度,不能小于100
    left Number 说明创建窗体的左坐标,不能为负值
    location Boolean 窗体是否显示地址栏,默认值为no
    resizable Boolean 窗体是否允许通过拖动边线调整大小,默认值为no
    scrollbars Boolean 窗体中内部超出窗口可视范围时是否允许拖动,默认值为no
    toolbar Boolean 窗体是否显示工具栏,默认值为no
    top Number 说明创建窗体的上坐标,不能为负值
    status Boolean 窗体是否显示状态栏,默认值为no
    width Number 创建窗体的宽度,不能小于100

      特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格

    open方法返回值为一个新窗体的window对象的引用

    对话框
    alert(str)—— 弹出消息对话框(对话框中有一个“确定”按钮)
    confirm(str)—— 弹出消息对话框(对话框中包含一个“确定”按钮与“取消”按钮)
    prompt(str,defaultValue)——弹出消息对话框(对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框),由于各个浏览器实现的不同,若没有第二个参数(文本框中的默认值)时也最好提供一个空字符串
    状态栏
    window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时),浏览器底部的区域称为状态栏,用于向用户显示信息
    window.status 属性——临时改变浏览器状态栏的显示
    时间等待与间隔函数
    setTimeout()—— 暂停指定的毫秒数后执行指定的代码
    clearTimeout()——取消指定的setTimeout函数将要执行的代码
    setInterval()——间隔指定的毫秒数不停地执行指定的代码
    clearInterval()——取消指定的setInterval函数将要执行的代码

    setTimeout与setInterval方法有两个参数,第一个参数可以为字符串形式的代码,也可以是函数引用,第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

        var tid = setTimeout("alert('1')",1000);
        alert(tid);
        clearTimeout(tid);

     

    2、History对象,在浏览器历史记录中导航

    History 对象的属性:length 返回浏览器历史列表中的 URL 数量

    History 对象的方法

    • back() 加载 history 列表中的前一个 URL
    • forward() 加载 history 列表中的下一个 URL
    • go(num) 加载 history 列表中的某个具体页面

    3、Location 对象

    Location 对象的属性

    • hash 设置或返回从井号 (#) 开始的 URL(锚)
    • host 设置或返回主机名和当前 URL 的端口号
    • hostname 设置或返回当前 URL 的主机名
    • href 设置或返回完整的 URL
    • pathname 设置或返回当前 URL 的路径部分
    • port 设置或返回当前 URL 的端口号
    • protocol 设置或返回当前 URL 的协议
    • search 设置或返回从问号 (?) 开始的 URL(查询部分)

    Location 对象的方法

    • assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
    • reload() 重新加载当前文档,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
    • replace() 用新的文档替换当前文档,replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。

    4、Navigator对象

    Navigator 对象的属性

    • appCodeName 返回浏览器的代码名
    • appName 返回浏览器的名称
    • appVersion 返回浏览器的平台和版本信息
    • browserLanguage 返回当前浏览器的语言
    • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
    • cpuClass 返回浏览器系统的 CPU 等级
    • onLine 返回指明系统是否处于脱机模式的布尔值
    • platform 返回运行浏览器的操作系统平台
    • systemLanguage 返回 OS 使用的默认语言
    • userAgent 返回由客户机发送服务器的 user-agent 头部的值
    • userLanguage 返回 OS 的自然语言设置

    三、框架与多窗口通信

    1、子窗口与父窗口

    只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中,可以通过window.open方法的返回值来访问打开的窗口!

    2、框架

    window.frames集合:在框架集或包含iframe标签的页面中,frames集合包含了对有框架中窗口的引用

        alert(frames.length);//框架的数目
        alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用
        //不但可以使用下标,还可以使用frame标签的name属性
        alert(frames["frame1"].document.title);

     

    在框架集中还可以使用ID来获取子窗口的引用

        var frame1 =document.getElementById("frame1");//这样只是获取了标签
        var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用
        //还可以直接获取框架中document的引用
        var frameDoc = frame1.contentDocument;
        alert(frameDoc);//但IE不支持contentDocument属性

     

    3、子窗口访问父窗口——window对象的parent属性

    4、子窗口访问顶层——window对象的top属性

    四、浏览器检测

    市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了,主要分为两种:1.userAgent字符串检测,2.对象检测;当然,也不能考虑所有的浏览器,我们需要按照客户需求来,如果可以确信浏览网站的用户都使用或大部分使用IE浏览器,那么你大可放心的使用IE专有的那些丰富的扩展,当然,一旦用户开始转向另一个浏览,那么痛苦的日子便开始了。下面是市场上的主流浏览器列表:

    • Internet Explorer
    • Mozilla Firefox
    • Google Chrome
    • Opera
    • Safari

    注意,浏览器总是不断更新,我们不但要为多种浏览器作兼容处理,还要对同一浏览器多个版本作兼容处理。比如IE浏览器,其6.0版本和7.0版本都很流行,因为微软IE随着操作系统绑定安装(之前也是同步发行,微软平均每两年推出一款个人桌面,同样IE也每两年更新一次;直到现在,由于火狐的流行,IE工作组才加快IE的更新),所以更新的较慢,6.0版和7.0版有很大差别。

    市场上还存在一些其它浏览器,但由于它们都是使用的上面所列浏览器的核心,或与上面浏览器使用了相同的解释引擎,所以无需多作考虑。下面是主流的浏览器解释引擎列表:

    1. Trident

      Trident (又称为MSHTML),是微软的窗口操作系统(Windows)搭载的网页浏览器—Internet Explorer的排版引擎的名称,它的第一个版本随着1997年10月Internet Explorer第四版释出,之后不断的加入新的技术并随着新版本的Internet Explorer释出。在未来最新的Internet Explorer第七版中,微软将对Trident排版引擎做了的重大的变动,除了加入新的技术之外,并增加对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其它的排版引擎。使用该引擎的主要浏览器:IE,TheWorld,MiniIE,Maxthon,腾讯TT浏览器。事实上,这些浏览器是直接使用了IE核心,因为其userAgent字符串中返回的信息与IE是一模一样的!

    2. Gecko

      壁虎,英文为"Gecko"。Gecko是由Mozilla基金会开发的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是读取诸如HTML、CSS、XUL和JavaScript等的网页内容,并呈现到用户屏幕或打印出来。Gecko已经被许多应用程序所使用,包括若干浏览器,例如Firefox、Mozilla Suite、Camino,Seamonkey等等

    3. Presto

      Presto是一个由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不断有更新版本推出,使不少错误得以修正,以及阅读Javascript效能得以最佳化,并成为速度最快的引擎。

    4. KHTML

      是HTML网页排版引擎之一,由KDE所开发。KDE系统自KDE2版起,在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写,并以LGPL授权,支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高,不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法,为了使KHTML引擎可呈现的网页达到最多,部分IE专属的语法也一并支援。目前使用KHTML的浏览器有Safari和Google Chrome。而KHTML也产生了许多衍生品,如:WebKit,WebCore引擎

    1、利用userAgent检测

    下面是各大浏览器使用弹窗显示的userAgent字符串

    IE浏览器:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

    火狐浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

    Opera浏览器:Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1

    Safari浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

    Google Chrome浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5

    可以使用下面的代码进行浏览器检测

        var Browser = {
            isIE:navigator.userAgent.indexOf("MSIE")!=-1,
            isFF:navigator.userAgent.indexOf("Firefox")!=-1,
            isOpera:navigator.userAgent.indexOf("Opera")!=-1,
            isSafari:navigator.userAgent.indexOf("Safari")!=-1
        };

     

    但这样做并不是万无一失的,一个特例便是Opera可以使用userAgent伪装自己。下面是伪装成IE的userAgent:Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64;在完全伪装的情况下,最后的“Opera 9.64”这个字符串也不会出现,但Opera也有特殊的识别自身的方法,它会自动声明一个opera全局变量!

    不但如此,我们的检测还忽略了一点,就是那些使用相同引擎而品牌不同的浏览器,所以,直接检测浏览器是没有必要的,检测浏览器的解释引擎才是有必要的

        var Browser = {
            isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera,
            isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera 
            && navigator.userAgent.indexOf("KHTML") ==-1,
            isKHTML:navigator.userAgent.indexOf("KHTML")>-1,
            isOpera:navigator.userAgent.indexOf("Opera")>-1
        };

     

    五、测试题-简答题

    1、BOM是什么的缩写,简称是什么?

    解答:BOM是Browser Object Model的缩写,简称浏览器对象模型

    2、BOM提供了独立于内容而与浏览器窗口进行交互的对象,这句话对么?

    解答:对。

    3、为什么BOM的核心对象是window?

    解答:由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。

    4、BOM的常用功能有哪些?

    解答:BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!

    5、window对象代表一个页面窗口还是整个浏览器窗口?

    解答:window对象表示整个浏览器窗口,但不必表示其中包含的内容

    6、window可以移动或调整它表示的浏览器的大小,这句话对么?

    解答:对。

    7、JavaScript中的任何一个全局函数或变量都是window的属性,这句话对么?

    解答:对。

    8、JavaScript和BOM中window对象的关系是什么?

    解答:JavaScript中的任何一个全局函数或变量都是window的属性

    9、解释window.open方法中语法中的每个字段的意思--window.open(url, name, features, replace);?

    解答:

    open方法参数说明

    • url -- 要载入窗体的URL
    • name -- 新建窗体的名称(目标,将在a 标签的target属性中用到,当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式,因此页面都将以弹出的方式打开
    • features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔。比如height,left,top等等
    • replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定

    10、window.open(url, name, features, replace);中的features字段格式有什么要求?

    解答:特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格

    features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔。比如height,left,top等等

    11、history对象的go方法怎么使用?

    解答:go(num) 加载 history 列表中的某个具体页面。

    12、BOM中什么样的窗口才能被JavaScript访问?

    解答:只有自身和使用window.open方法打开的窗口和才能被JavaScript访问

    13、window.open方法通过什么属性来访问打开窗口的父窗口?

    解答:window.open方法打开的窗口通过window.opener属性来访问父窗口。

    14、BOM中,在opener窗口中,可以通过什么方法的返回值来访问打开的窗口?

    解答:window.open方法的返回值

    15、window.frames集合是什么?

    解答:在框架集或包含iframe标签的页面中,frames集合包含了对有框架中窗口的引用

    16、window.frames集合的对象时使用了框架集或包含iframe标签的页面,这句话对么?

    解答:对

    17、哪两种情况下window.frames集合有值?

    解答:a、页面使用了框架集  b、页面使用了iframe标签

    18、如何查看一个页面框架的数量?

    解答:alert(frames.length);//框架的数目

    19、BOM中子窗口如何访问父窗口?

    解答:window对象的parent属性

    20、BOM中子窗口如何访问顶层窗口?

    解答:window对象的top属性

    21、解决浏览器兼容问题一般通过检测浏览器来实现,那么检测浏览器的那种主要方法是什么?

    解答:1.userAgent字符串检测,2.对象检测;

    22、浏览器能够伪装自己的userAgent属性么?

    解答:能,一个特例便是Opera可以使用userAgent伪装自己。

    23、因为浏览器能够伪装自己的userAgent属性和使用相同引擎而品牌不同的浏览器,所以检测浏览器最直接有效的方式是什么?

    解答:检测浏览器的解释引擎。

     

    转载于:https://www.cnblogs.com/Renyi-Fan/p/8084907.html

    展开全文
  • 前端浏览器对象模型BOM常用对象介绍,BOM即Broswer Object Model 浏览器对象模型,在JavaScript中可以理解为window对象,用来进行与浏览器相关一些操作,学习BOM就是学习 JavaScript中window对象。 一、window...

    前端浏览器对象模型BOM常用对象介绍,BOM即Broswer Object Model 浏览器对象模型,在JavaScript中可以理解为window对象,用来进行与浏览器相关的一些操作,学习BOM就是学习 JavaScript中的window对象。

    ac3498318b110f019f210c9d2bf32da3.png

    一、window对象

    BOM的核心对象是 window,它代表浏览器的一个实例。在浏览器中,window有着双重的角色:JavaScript访问浏览器的接口对象,ES中的Global对象意味着网页中的任何一个对象,变量,函数都是以window作为其Global对象。

    1、全局作用域,在ECMAScript中,window对象扮演着Global对象的角色,也就是说,所有在全局作用域声明的变量,函数都会变成window的属性和方法,都可以通过 window.属性名(或方法名) 直接调。

    2、导航和打开窗口,通过 window.open() 既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口

    二、location对象

    [^location 是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息]: JavaScript高级程序设计。

    注: window.location 和 document.location?引用的是同一个对象。location 既是 window 对象的属性,也是 document?对象的属性。

    三、 navigator对象

    navigator 对象主要用来获取浏览器的属性,区分浏览器类型;

    navigator 对象属性较多,且兼容性比较复杂。

    四、history对象

    history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,因为 history 是 window 对象的属性,因此每个浏览器窗口,每个标签乃至每个框架,都有自己的 history对象与特定的 window 对象关联。

    总结浏览器对象模型BOM中常用的对象有navigator,window, location, history

    window既是 JavaScript 的全局对象,也是BOM的一个实例,所有的全局方法,属性,BOM中的属性,都可以通过 window. 来调用;

    window作为BOM的实例,最常用的几个方法分别是:window.open(),window.close(),,分别用来打开和关闭浏览器窗口页面,这里需要注意的是,通过 open 方法打开的页面,才能通过close 方法关闭;

    location对象也是用的比较多的一个BOM对象,主要用来操作URL相关的一些信息,除了修改 Hash 之外的任何属性,页面都会重新加载,历史记录会多加一条历史记录;

    location对象还有一个 reload() 方法用于手动重新加载页面,该方法接收一个可选参数,为 true 的时候表示从服务器重新加载,否则可能从浏览器缓存中重新加载页面;

    location对象 还有一个比较特殊的方法,location.replace(),该方法可以覆盖当前页面并重新加载,同时不会在 history 中生成历史记录;

    navigator对象主要用来获取浏览器相关的一些信息,使用的时候需要注意兼容性。可以用来获取浏览器类(Chrome,safrai,FireFox,Edge,IE)等;

    history对象主要用来操作浏览器URL的历史记录,可以通过参数向前,向后,或者向指定URL跳转。可以通过 length 属性获取记录数,判断当前页面是否是打开的首个页面;

    展开全文
  • 多态的对象模型

    2017-08-06 20:44:54
    多态的对象模型,有单继承与多继承,复杂点有菱形继承和菱形虚拟继承。而需要理解多态这个概念,就得先知道虚函数,而虚函数里有叫虚函数表东西,而C++中虚函数主要作用,就是来实现其多态,简单点来说...

    多态的对象模型,有单继承与多继承,复杂点的有菱形继承和菱形虚拟继承。而需要理解多态这个概念,就得先知道虚函数,而虚函数里有叫虚函数表的东西,而C++中的虚函数的主要作用,就是来实现其多态的,简单点来说就是父类的指针或引用调用重写的虚函数,当父类指针/引用指向父类对象时调用父类的虚函数,当指向子类对象时则调用子类虚函数,一个指针,根据传参类型进而改变调用的虚函数,这便是多态

    先说下虚函数表,顾名思义跟虚函数有关,这张表的内容存的就是调用时所需的虚函数的地址,这张虚函数表解决了虚函数的重写的问题。


    下面先从简单虚函数谈起吧,后面都用画板截图方式进行阐述,可能有点乱,见谅。


    这里先创建一个Base类型的 b1实例化变量,而Base中存在virtual虚函数,则需要在实例化b1时先将虚函数表放入其中,如vs2008监视窗口里所示,虚函数表位于b1中的最上面的位置。


    通过上面的图板解释,你已经有所了解虚函数和虚函数表了吧,下面在深入一点,讲讲单继承,话不多说,上图~~~~

    下面图中的一串字不一定正确,请持怀疑的态度:



    在我写完下面的多继承时,便推翻了我在画单继承时的结论,下面请观赏下部图片:


    看到这个图是不是忽然有点头晕了呢。。。唉,我的头怎么也有点晕乎乎的呢,没事,我带领大家来解读这张"应该""貌似"是我画的图,首先,有三个类,两个基类,一个子类,Base1是基类1,里面有虚函数virtual fun1()和virtual fun2(),还有b1,基类2是Base2,里面有虚函数virtual fun3(),virtual fun4(),子类Derive继承他们两个,首先可以看到d1,它重写,还继承了Base1,Base2,如我所想,在监视器中就是如此,两个虚表地址,指向两个虚表,分别是Base1和Base2,而子类中独有的fun5()在最前面的虚表中存放,不会另开一个虚表进行存放子类的虚函数,这里可以明白,回到单继承那张图的话中,于是我就想验证一下是不是存放的是“同一个”函数呢,于是我有创建了一个Base1类的b1,通过观察b1中虚表中存放虚函数的地址来验证我的单继承结论是否正确,正好如我所想,是错误的。它们地址不同,所以我知道了我自己的结论是错的,但我有创建了一个Base1类的b3,我还是不死心,于是查看了监视器,他的虚函数地址和b1相同,所以我又得出了一个结论(虽然不知道会不会又被推翻):当两个类型相同时,他们共用一个虚函数表,但是如果重写/覆盖时,则将另分配一个虚函数表进行存放(不是“同一个”虚函数)。在最后,通过两个框,可以知道了解d1和b1的存储结构。


    讲到这里,我似乎感觉我的头更晕了,C++就是这样,如果你感觉你头晕,那么说明你在进步,如果你不头晕,两个结果,一是你可能还没入门,二是你已经精通C++,为了明天的不头晕,今天我们头更晕一点吧!!!




    展开全文
  • DOM 概念:文档对象模型 作用:让js有能力操作网页

    DOM

    概念:文档对象模型
    作用:让js有能力操作网页
    分类
    核心 DOM:进阶
    复杂语法获取标签(了解)
    标签增、删除、改(中等 重要 但是后期不用)

    HTML DOM
    简单方式获取标签
    提供了属性和方法

    CSS DOM:改标签行内样式

    HTML DOM

    var 变量名 = document.getElementById(ID属性值)

     <div id="box">你好</div>
    </body>
    <script>
       var a = document.getElementById("box")
       console.log(a);
    </script>
    

    在这里插入图片描述
    var 变量名 = document.getElementsByClassName(class属性值)

    <div class="box">你好</div>
     <div class="box">你好</div>
     <div class="box">你好</div>
    </body>
    <script>
       var a = document.getElementsByClassName("box")
       console.log(a);
    

    在这里插入图片描述
    var 变量名 = document.getElementsByTagName(标签名)

    <div>你好</div>
     <div>你好</div>
     <div>你好</div>
    </body>
    <script>
      var a = document.getElementsByTagName("div")
       console.log(a);
    

    在这里插入图片描述

    CSS DOM(常用)

    var 变量名 = document.querySelector(CSS选择器) // 标签对象 .src .value .onclick

    <div class="box">你好</div>
     <div class="box">你好</div>
     <div class="box">你好</div>
    </body>
    <script>
      var a = document.querySelector(".box")
       console.log(a);
    </script>
    

    在这里插入图片描述

    var 变量名 = document.querySelectorAll(CSS选择器) // 数组 [标签对象,…]

    <div class="box">你好</div>
     <div class="box">你好</div>
     <div class="box">你好</div>
    </body>
    <script>
      var a = document.querySelectorAll(".box")
       console.log(a);
    

    在这里插入图片描述

    属性(获取/操作属性)

    常用的属性和方法
    获取内容含HTML:标签对象.innerHTML

    <div id="box"><b>你好</b></div>
    </body>
    <script>
       document.querySelector("#box").innerHTML
      console.log( document.querySelector("#box").innerHTML);
    </script>
    </html>
    

    在这里插入图片描述
    获取内容不含HTML:标签对象.innerText

    <body>
        <div id="box">我爱中国</div>
    </body>
    <script>
    var a=document.getElementById("box").innerText
    console.log(a);
    </script>
    

    在这里插入图片描述
    获取/移除属性:标签对象.get/removeAttribute(属性名)

    <body>
        <div id="box">我爱中国</div>
        <img src="./images/4.webp" alt=""id>
    </body>
    <script>
    var a = document.querySelector("img").getAttribute("src")
    console.log(a);
    </script>
    

    在这里插入图片描述
    removeAttribute移除属性

      <div id="box">我爱中国</div>
        <img src="./images/4.webp" alt="">
    </body>
    <script>
    var a = document.querySelector("img").removeAttribute("src")
    console.log(document.querySelector("img"));
    </script>
    

    在这里插入图片描述
    设置属性:标签对象.setAttribute(属性名,属性值)

    <body>
        <div id="box">我爱中国</div>
        <img src="./images/4.webp" alt="">
    </body>
    <script>
    var a = document.querySelector("img").setAttribute("abc","2")//这里属性和属性值要都写进去
    console.log(document.querySelector("img"));
    </script>
    

    在这里插入图片描述

    this!!!

    明确需求
    在实际工作中,经常需要在方法中输出自己的信息

    思考:如果在方法中打印自己的信息呢?

    var stu = {
    name: “刘德华”,
    age: 18,
    say: () {
    console.log(stu) // 能是可以 但是总归不好,因为先声明后使用
    // 如何解决
    console.log(this)
    }
    }
    console.log(stu)

    回答:js关键词或变量 this
    语法
    arguments 存的所有实参

    this 不知道 你的位置不同 结果就不同

    细节:this是js关键词或变量 任意地方都可以打印这哥们

    作用:解释不清 写的位置不同 打印的结果页不同

    场景:
    this 指向:
    普通函数中 => window
    对象方法中 => 自己/对象本身
    事件中 => 事件源 也就是调用事件的标签对象

    小总结

    1、HTML DOM
    var 变量名 = document.getElementById(ID属性值)
    var 变量名 = document.getElementsByClassName(CLASS属性值)
    var 变量名 = document.getElementsByTagName(标签名)

    2、CSS DOM(常用)
    var 变量名 = document.qs(CSS选择器) 返回标签对象
    var 变量名 = document.qsa(CSS选择器) 返回数组 [标签对象,…,]

    3、操作标签的属性和方法

    标签对象.innerHTML/innerText
    标签对象.setAttribute(属性名, 属性值)
    标签对象.get/removeAttribute(属性名)

    练习

    关于CSS DOM的小练习
    在这里插入图片描述

     <style>
            div {width: 100px; height: 100px;background-color: pink;}
        </style>
    </head>
    
    <body>
        <div id="box">内容部分</div>
        <button id="btn1">改变宽度</button>
        <button id="btn2">改变高度</button>
        <button id="btn3">改变颜色</button>
        <button id="btn4">获取内容</button>
    </body>
    <script>
        // 1. 获取btn1标签
        var btn1Obj = document.querySelector('#btn1')
        // 2. 给btn1标签增加onclick  交给函数处理 
        btn1Obj.onclick = function() {
            // 获取box
            var boxObj = document.querySelector('#box')
            // 使用js语法改宽度
            boxObj.style.width = '300px'
        }
    
        
        var btn2Obj = document.querySelector('#btn2')
        btn2Obj.onclick = function() {
            // 获取box
            var boxObj = document.querySelector('#box')
            // 使用js语法改高度
            boxObj.style.height = '300px'
        }
    
            
        var btn3Obj = document.querySelector('#btn3')
        btn3Obj.onclick = function() {
            // 获取box
            var boxObj = document.querySelector('#box')
            // 使用js语法改背景
            // boxObj.style.color = 'green'
            // boxObj.style.background = 'green'
    
            // boxObj.style.background-color = 'green' 错误写法
            boxObj.style.backgroundColor = 'green' 
        }
    
        
        var btn4Obj = document.querySelector('#btn4')
        btn4Obj.onclick = function() {
            // 获取box
            var boxObj = document.querySelector('#box')
            // 使用js语法获取内容
            alert(boxObj.innerHTML)
        }
        </script>
    

    综合练习

    tab选项卡

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>tab选项卡</title>
    <style>
    * {margin: 0;padding: 0;}
    ul, ol, li {list-style: none;}
    .box {width: 600px;height: 400px;border: 10px solid #333;margin: 30px auto; display: flex;flex-direction: column;}
    .box > ul { width: 100%;  height: 40px;display: flex; }
    .box > ul > li {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 30px;color: #fff;background-color: hotpink;}
    .box > ul > li.active {background-color: orange;}
    .box > ol {flex: 1;position: relative;}
    .box > ol > li {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: skyblue;color: #fff;font-size: 100px;display: flex;justify-content: center;align-items: center;display: none;}
    .box > ol > li.active {display: flex;}
    </style>
    </head>
    <body>
        <!--tab选项卡 -->
        <div class="box box1">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ul>
            <ol>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
            </ol>
        </div>  
    </body>
    <script>
                //1、获取标题栏所有li
        var uliobj=document.querySelectorAll("ul li")
                //循环遍历标题栏所有li并绑上点击事件
        uliobj.forEach(function(item,index){
                //给循环的li绑定点击事件
            item.addEventListener("click",function(){
                //清除标题栏ul中所有li的样式
                document.querySelector("ul li.active").removeAttribute("class")
                //清除标题内容栏ol中所有li的样式
                document.querySelector("ol li.active").removeAttribute("class")
                //为被点击的li加样式(因为是被点击的,所以这里必须用this)
                this.setAttribute("class","active")
                //获取内容栏ol中的所有li
                var oliobj=document.querySelectorAll("ol li")
                //给被点击的ul中的li所对应的ol中的li设置样式,因为uliobj与oliobj中的下标一样,一一对应的所以可直接用index
                oliobj[index].setAttribute("class","active")
            })
        });
    </script>
    

    在这里插入图片描述

    展开全文
  • Ruby的对象模型

    2013-10-31 16:37:48
    对象模型(object model),所有语言构件存在于其中系统。对象模型是Ruby灵魂。 Ruby中class不仅是类型声明语句,更是一个作用域操作符,可以把你带到类上下文中,让你可以在其中定义方法。这样一来,你便...
  • 上一篇https://blog.csdn.net/a15929748502/article/details/80930039中我们已经一起探索了含有虚函数单继承的对象模型,这一讲我们来一起看看多继承时的对象模型。 下面就由我来构造一个含有虚函数多继承的对象...
  • javascript对象模型

    2019-07-05 12:27:27
    javascript对象模型 文章目录javascript对象模型定义类1.字面式声明方式(也称为字面值创建对象。)2.ES6之前----构造器构造类3.ES6中class关键字this不同作用域高阶对象、高阶类、或称Mixin模式继承实现高阶对象...
  • BOM使得JavaScript能与浏览器进行“对话”,主要是对window对象的操作 对象的分类 History对象 Location对象 Document对象 Window对象 Window对象 (1) 含义 Window对象表示浏览器中打开窗口 (2...
  • 浏览器对象模型BOM

    2018-12-25 21:10:00
    浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了...BOM的作用: 弹出新浏览器窗口的能力; ...
  • C++对象模型

    2016-05-10 18:02:46
    什么是C++对象模型?引用《深度探索C++对象模型》中的两个概念:语言中直接支持面向对象程序设计的...●多态C++中虚函数的作用主要是为了实现多态机制。多态,是指在继承层次中,父类的指针可以具有多种形态——当...
  • 上一篇https://blog.csdn.net/a15929748502/article/details/80941931中我们已经一起探索了含有虚函数较为普通是多继承的对象模型,这一讲我们来一起看看菱形继承时的对象模型。(如果了解菱形继承可以参考这篇...
  • 继承关系作用下虚函数手工调用 探究1: class Base { public: virtual void f() { cout << "Base::f()" << endl; } virtual void g() { cout << "Base::g()" << endl; } virtual ...
  • 5.类对象模型 5.1类对象大小 5.2类对象存储方式 5.3结构体内存对齐规则 6.this指针 6.1this指针引出 6.2this指针特性 C语言是面向过程,关注是过程,分析出求解问题步骤,通过函数调用逐步解决...
  • DOM文档对象模型

    2020-03-10 15:38:39
    DOM文档对象模型DOM:文档对象模型DOM选择器2.location对象:包含当前url相关信息,而history对象不能具体反映url相关信息3.navigator对象4.window.onscroll/onresize /onload()事件 DOM:文档对象模型 作用: ...
  • 虚基类表的作用是帮助编译器找到该类中的虚基类中各个成员变量在内存布局中的位置。虚基类表中的值是偏移值,即:各个虚基类的成员变量在子类中的内存布局中相对于虚函数指针的偏移值。 二、栗子 1、唯一父类是虚...
  • 本文算是一个VBA很有意义启蒙,本文内容我以前只给两个有VBA基础朋友讲过现在这俩,一个在学python,一个已经开了Office排版公司本文内容对于小白,有巨大启蒙作用:一、理解对象模型Office有多种文档格式,...
  • 首先要说明虚函数是用来实现函数重载,而虚拟继承是用来解决从不同途径继承来同一基类,会在子类中存在多份...上一篇已经和大家探索了虚函数基本一些内容,这一篇我们来开始探索含有虚函数的对象模型 ...
  • (一)BOM:浏览器对象模型 //宿主对象 BOM的作用:BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。BOM将浏览器中的各个部分转换成了一个一个的对象,我们通过修改这些对象的属性,调用...
  • 业务对象是指那些从实际业务场景中抽象出来的对象,这些对象在代码中对应的就是一些业务对象...下面是业务对象贫血模型图:(业务对象类既领域层的model)在贫血模型中,业务对象仅仅包含数据而不包含行为,他的作用...
  • 则 Base1 虚函数表中 trunk 项对应代码中就不包含了调整 pb1 指针位置,因为 pb1 本身就指向了 Son 类对象的首地址,所以直接调用了 Son 类对象的析构函数。 拓展: 1、虚函数表中 trunk 项,实际上一...
  • Javascript 浏览器对象模型BOM,是用于描述这种对象与对象之间层次关系模型,浏览器对象模型提供了独立于内容、可以与浏览器窗口进行互动对象结构。BOM有多个对象组成。其中逮捕浏览器窗口Window对象是BOM...
  • 7:类对象模型 8:类成员函数this指针 1:类与对象初步认识 c++是一种面向对象语言,关注是对象;将一件事情拆分成不同对象,靠对象之间交互完成。 这就设计到了类和对象;类是对一类东西统称,比如...
  • 浏览器对象模型 BOM

    2017-08-31 08:11:00
    BOM(浏览器对象模型作用 弹出新浏览器窗口能力; 移动、关闭和更改浏览器窗口大小能力; 可提供WEB浏览器详细信息导航对象; 可提供浏览器载入页面详细信息本地对象; 可提供用户屏幕分辨率详细...
  • int main() { //继承关系作用下虚函数手工调用 cout (Base) ; cout (Derive) ; Derive *d = new Derive(); //派生类指针。 long *pvptr = (long *)d; //指向对象的指针d转成了long *类型。 long *vptr = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,832
精华内容 1,932
关键字:

对象模型的作用