[js]js原型鏈繼承小結

這是以前總結的, 發現有不少的毛病,就是重點不突出,從新翻看的時候仍是得耗費很長時間去理解這玩意.

js中的繼承

js中什麼是類

1,類是函數數據類型


2.每一個類有一個自帶prototype屬性
prototype = constractor+__proto__

3,每一個類的實例指向類的原型

給人感受子類繼承父類的東西,和父類自己沒啥關係, 和父類的財產(原型)有關係.

console.log(document instanceof Document); // true
console.log(window instanceof Window);     // true

object <-- EventTarget <-- 
                            Element(1)
                                HTMLElement <-- HTMLDivElement <-- div
                                                                   odiv = document.getElementById('app');
                            Document(9)
                                    document是Document的一個實例.
                                        - 經常使用屬性
                                        document.head
                                        document.body
                                        document.title
                                        
                                        document.location.href
                                        document.location.host
                                        
                                        
                                        document.location.protocol
                                        document.location.host
                                        
                                        document.location.origin
                                        document.URL             //獲取url
                                        
                                        document.location.pathname
                                        document.location.search
                                        
                                        document.cookie
                                        document.documentElement //整個html的引用
                                        
                                        
                                        - 經常使用方法
                                        document.getElementById
                                        document.getElementsByClassName
                                        document.getElementsByTagName
                                        document.append


window.location.pathname
window.location.search
window.close() //關閉標籤
window.open()
參考: http://www.w3school.com.cn/js/js_window.asp

onchange等事件,在哪裏?

dir(HTMLDivElement)

DOM 是爲了操做文檔出現的 API，document 是其的一個對象；
BOM 是爲了操做瀏覽器出現的 API，window 是其的一個對象。

- 繼承: 本類的原型指向要繼承類的實例

- 模擬系統類
    function myObject() {

    };

    function myEventTarget() {

    };

    myEventTarget.prototype = new myObject;
    myEventTarget.prototype.addListener = function () {

    };

    function myNode() {

    }

    myNode.prototype = new myEventTarget;
    myNode.prototype.createElement = function () {

    };

    var n = new myNode;
    console.dir(n);

js

DOM節點層次圖

Dom並不是一種編程語言，Dom只是提供了一系列的接口，利用Dom的這些接口能夠很方便的讀取，修改，刪除Html和XML文件中的標籤元素和文本內容．在這裏咱們側重於講解Dom對Html文件的操做．
那麼Dom是如何讀取和管理Html文件的呢？首先你必需要了解html的源碼結構

div       > HTMLDivElement > HTMLElement > Element > Node > EventTarget
document -> HTMLDocument   > Document    >           Node > EventTarget

參考: DOM, DOCUMENT, BOM, WINDOW 有什麼區別?
https://www.zhihu.com/question/33453164

document.title = 'how to make love';

document.body;
document.getElementById('xxx');

DOM 是爲了操做文檔出現的 API，document 是其的一個對象；
BOM 是爲了操做瀏覽器出現的 API，window 是其的一個對象。

div       > HTMLDivElement > HTMLElement > Element > Node > EventTarget
document -> HTMLDocument   > Document    >           Node > EventTarget

參考: http://huang-jerryc.com/2016/06/28/JavaScript%E5%8E%9F%E5%9E%8B%E4%B8%AD%E7%9A%84%E5%93%B2%E5%AD%A6%E6%80%9D%E6%83%B3/

參考: 從原型鏈看DOM－－Node類型
http://www.cnblogs.com/venoral/p/5293575.html

參考:http://www.th7.cn/web/js/201609/188644.shtml

參考:http://www.cnblogs.com/mominger/p/3822775.html

dom操做

回顧dom

參考:
http://www.bijishequ.com/detail/413949?p=11-54-70
http://www.bijishequ.com/detail/421975?p=

這篇很經典
http://www.cnblogs.com/jscode/archive/2012/09/04/2670819.html

這篇圖解還沒怎麼理解
http://developer.51cto.com/art/201009/228137_all.htm

div#div1
    HTMLDivElement
        HTMLElement
            Element
                Node
                    EventTarget
                        Object
                            
div       > HTMLDivElement > HTMLElement > Element > Node > EventTarget
document -> HTMLDocument   > Document    >           Node > EventTarget

oDiv instanceof Node        //true
oDiv instanceof Element     //true
##################################
# 獲取元素
##################################
document.
    getElementById       獲得類數組 獲取選項/長度  遍歷
    getElementsByTagName
    getElementsByName(button獲取性別,先遍歷checkbox,oSex[i].value)
    getElementsByClassName

##################################
# 元素之間的關係
##################################
// 節點: 文字 標籤 文字 註釋都是節點  回車和空格算一個 text

//                    nodetype    nodename       nodevalue
// 元素節點: 標籤        1           大寫標籤名    null
// 文本節點: text        3           #text        文檔內容
// 註釋節點:             8           #commnet     註釋內容
// document              9           #document     null

console.log(oDiv.nodeType); //獲取全部子節點的元素節點,判斷nodetype
console.log(oDiv.nodeName);
console.log(oDiv.nodeValue);


console.log(oDiv.children);   //獲取元素子節點
console.log(oDiv.parentNode);   //獲取父親節點
console.log(oDiv.previousElementSibling);//獲取上一個哥哥節點
console.log(oDiv.nextSibling);           //獲取下一個弟弟節點
console.log(oDiv.firstChild); //獲取全部子節點中的第一個
console.log(oDiv.lastChild); //獲取全部子節點中最後一個

##################################
# 增刪改查元素
##################################
var layer = document.createElement("div");
layer.id = "div1";
layer.style.width = "300px";
layer.style.height = "200px";
layer.style.border = "5px solid red";

var btn = document.getElementById('btn');
btn.onclick = function () {
    document.body.appendChild(layer);
};
layer.onclick = function () {
    document.body.removeChild(layer);
};


oDiv.parentNode.removeChild(oDiv);
document.body.insertBefore(oP2, oP);
oDiv.parentNode.removeChild(oDiv);
var clop = oP.cloneNode();      //克隆當前
var clop2 = oP.cloneNode(true); //克隆子子孫孫


js操做的是行內樣式.
oDiv.style.width //引用數據類型
    oDiv.style.backgroundColor  //這種ok
    var bgS = oDiv.style;                bgS.backgroundColor //這種ok
    var bg = oDiv.style.backgroundColor; bg = "green" //這種不ok

constructor的事

默認類的prototype = constructor+proto

function Fn() {

};

console.log(Fn.prototype);

從新賦值後prototype = proto,沒constructor了

function Fn() {

};
Fn.prototype= {
    getX: function () {
    }
};
console.log(Fn.prototype);

var f = new Fn();
console.log(f.__proto__);

原型鏈多級繼承模擬

<script>
    //    HTMLDivElement > HTMLElement > Element > Node > EventTarget > object
    function myObject() {
    };
    myObject.prototype = {
        hasOwnProperty: function () {
            console.log("myObject");
        }
    };
    function myEventTarget() {
    };
    myEventTarget.prototype = new myObject();
    myEventTarget.prototype.sum = function () {
        console.log('myEventTarget...')
    };

    var f = new myEventTarget;
    console.dir(f);

</script>