JavaScript知識點總結-5

js原型繼承：js中每個對象都繼承自己的原型！

原型鏈：由多級原型組成的繼承關係，就叫原型鏈

 

何時修改構造函數的prototype屬性：

一個類型希望使用已有對象的現成功能！

修改構造函數的原型可以讓對象使用父類型的功能——繼承！

語法：子類型構造函數.prototype=new 父類型()

 

isPrototypeOf()方法：

判斷一個對象，是否繼承自另一個父類型對象

語法：父類型對象.isPrototypeOf(子類型對象);

判斷子類型對象是否繼承自父類型對象！

何時使用：如果原型可能已經發生變化，調用子類型方法前，都要先判斷原型，再調用方法！

 

無法獲得父元素類型的具體對象時：

"屬性" in 對象判斷某個屬性是否包含在對象的原型鏈上。

 

js中的繼承總結：

js中的繼承都是通過原型對象實現的：父類型.prototype

修改父類型.prototype，可以讓類型繼承新的對象中的屬性和功能

修改prototype的方法：

1. 子類型.prototype=父類型對象

   var obj=new 子類型();

2.Object.setPrototypeOf(子類型對象，父類型對象)

 

驗證子類型的prototype:

父類型對象.isPrototypeOf(子類型對象)

 

驗證子類型可用的方法：

"方法/屬性名" in 子類型對象

 

總結：

js中如何自定義類型：

function 構造函數(){

   屬性;方法

}

創建自定義類型的對象：

var obj=new 構造函數();

一共做幾件事？

1. 創建空對象

2. 以構造函數的定義爲模板，初始化對象中的屬性和方法

3. 設置當前對象的__proto__，指向自己的原型

 

凡是希望共有的屬性都要設置在原型對象中：

構造函數.prototype.共有屬性名=值

對象.__proto__.共有屬性名=值 X

 

如何擴展內置對象的共用功能：

內置對象類型.prototype.新方法=function(){}

 

凡是希望某一個對象獨有的屬性：

對象.自有屬性=值

 

凡是用prototype屬性設置的都是共有屬性--唯一辦法！

凡是用對象直接設置的屬性一定是當前對象獨有！

 

繼承：將子類型對象的原型，修改爲要繼承的父類型對象！

原型繼承：一切繼承都是通過修改原型對象實現的

如何繼承：

1. 使用構造函數，直接修改所有子類型的原型：

子類型構造函數.prototype=父類型對象

必須在創建子類型對象前調用！

2. 直接修改當前子類型對象的__proto__

Object.setPrototypeOf(子類型對象，父類型對象)

 

 

 

 

 

Js包含3部分：

ECMAScript（核心語法）+DOM（專門操作網頁內容API）

+BOM（專門操作瀏覽器窗口API）

 

HTML XML XHTMLDHTML

HTML：描述超文本內容的標記語言

XML：持久化存儲格式化數據的標記語言

XHTML：嚴格的HTML和XML格式標準！

DHTML：實現網頁動態效果的所有技術的統稱。

    HTML css  javascript

 

Window對象：js程序的全局對象，代表當前窗口對象

history對象：當前窗口，本次打開後的瀏覽歷史記錄

   history控制：前進，後退，刷新

navigator對象：當前瀏覽器軟件的版本和配置信息

document對象：當前正在瀏覽的頁面文件！

    網頁內容：增刪改查

location對象：當前窗口正在瀏覽的地址

修改location的屬性，可以實現打開新網頁，僅能替換當前頁

screen對象：當前環境的顯示器和分辨率

    檢測當前瀏覽器的分辨率

event：代表網頁中觸發的事件對象。

 

document對象：網頁一加載，首先創建document對象

document對象整個網頁文檔樹的根節點

 

DOM節點樹：DOM模型，將網頁中的每個元素，屬性，內容都當做節點，組成一棵樹形結構。

節點之間的關係：父子，兄弟

 

文檔節點：document

元素節點：一對兒HTML標籤及其之間包含的子內容

文本節點：HTML中純文本內容

屬性節點：html開始標籤中的每個屬性都是一個節點

 

如何查找元素對象：

按id值，查找*一個*元素對象：

varelmObj=document.getElementById("id值");

如果找不到，返回null！儘量先驗證，再使用查找結果。

 

節點信息：

nodeName：一般是找到的標籤名。

如果碰到文本節點，nodeName返回#text

*nodeName永遠返回全大寫字母的標籤名*

做判斷時，都要先轉換大小寫，再比較！

 

nodeType：節點的類型：元素節點：1  文本節點：3

只要判斷得到的節點是否正確時，使用nodeName或nodeType

 

innerHTML：開始標籤和結束標籤之間包含的HTML文本

*innerHTML：清空父元素下的所有子內容！--最快！

*parent.innerHTML="";

*使用DOM對網頁內容的一切修改，都只在內存中臨時進行*

網頁源文件不變！刷新後頁面效果恢復！

 

textContent：獲得開始標籤和結束標籤之間的文本，自動清除內容中的html標籤，變爲純文本內容！

何時使用：1. 確實要獲得不帶標籤的文本內容時

2. 清除當前內容中的樣式！

 

瞭解：IE8 不支持textContent：先判斷是否支持，再調用

   if(elmObj.textContent){//說明支持

        可用

   }else{

   替換成innerText

   }

 

在html元素的事件中使用this：指代當前觸發事件的元素對象