JavaScript原型和原型鏈——構造函數

時間 2019-11-08

標籤 javascript 原型構造函數欄目 JavaScript 简体版

原文原文鏈接

1、instanceof：判斷引用類型（數組、對象、函數）的變量是由哪個 構造函數 派生出來的。（o instanceof Object）javascript

2、原型規則和示例css

　　一、全部的引用類型（數組、對象、函數），都具備對象特性，能夠自由擴展屬性（除了 "null「之外）。html

　　二、全部的引用類型（數組、對象、函數），都具備__proto__屬性（隱式原型），且__proto__屬性的值是一個普通的對象。java

　　三、全部的函數，都有一個 prototype 屬性（顯式原型），且 prototype 屬性的值也是一個普通的對象。jquery

　　四、全部的引用類型（數組、對象、函數），__proto__屬性值指向其構造函數的 prototype 屬性值。數組

　　五、當試圖獲得一個對象的某個屬性時，若是這個對象自己沒有這個屬性，那麼會去它的__proto__（即它的構造函數的 prototype）中尋找。函數

3、描述 new 一個對象的過程this

　　一、建立一個新對象（空對象）prototype

　　二、將構造函數的做用域賦給新對象（所以 this 就指向了這個新對象）htm

　　三、執行構造函數中的代碼（爲這個新對象添加屬性，即對 this 賦值）

　　四、返回新對象（返回 this）

　　代碼示例：

function File(name,type){
    this.name = name;
    this.type = type;
    this.state = 1;
    return this;                            
}
var js = new File("構造函數","JavaScript");

4、寫一個原型鏈繼承的例子

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>原型鏈繼承--封裝DOM查詢的例子</title>
    <style type="text/css" media="all">
        body{
            width: 500px;
            margin: 100px auto;
        }
        div{
            background: #ddd;
        }
    </style>
  </head>
  <body>
    <div id="div1">DIV1</div>
    <div id ="div2">DIV2</div>
    <script type="text/javascript" charset="utf-8">　
        //經過DOM節點的Id名返回DOM對象，相似jquery的 $("#Id")      
        function Elem(id){
            this.elem = document.getElementById(id);
        }
　　　　 //獲取或修改DOM節點的內容，相似jquery的 $("#Id").html()
        Elem.prototype.html = function(val){
            var e = this.elem;
            if(val){
                e.innerHTML = val;
                return this;
            }else{
                return e.innerHTML;
            }
        }
　　　　 //爲DOM節點綁定事件，相似jquery的 $("#Id").on("click",function(...))      
        Elem.prototype.on = function(type,fn){
            var e = this.elem;
            e.addEventListener(type,fn);
            return this;
        }
        //點擊div1，修改div2內容
        var div1 = new Elem("div1");
        var div2 = new Elem("div2");
        div1.on("click",function(){
            div2.html("Hello world");
        })
    </script>
  </body>
</html>