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>