zoukankan      html  css  js  c++  java
  • JavaScript原型和原型链——构造函数

    一、instanceof:判断引用类型(数组、对象、函数)的变量是由哪一个 构造函数 派生出来的。(o instanceof Object)

    二、原型规则和示例

      1、所有的引用类型(数组、对象、函数),都具有对象特性,可以自由扩展属性(除了 "null“ 以外)。

      2、所有的引用类型(数组、对象、函数),都具有__proto__属性(隐式原型),且__proto__属性的值是一个普通的对象。

      3、所有的 函数 ,都有一个 prototype 属性(显式原型),且 prototype 属性的值也是一个普通的对象。

      4、所有的引用类型(数组、对象、函数),__proto__属性值指向其构造函数的 prototype 属性值。

      5、当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的 prototype)中寻找。

    三、描述 new 一个对象的过程

      1、创建一个新对象(空对象)

      2、将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象)

      3、执行构造函数中的代码(为这个新对象添加属性,即对 this 赋值)

      4、返回新对象(返回 this)

      代码示例:

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

    四、写一个原型链继承的例子

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>原型链继承--封装DOM查询的例子</title>
        <style type="text/css" media="all">
            body{
                 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>
  • 相关阅读:
    最强PostMan使用教程
    Fiddler模拟post四种请求数据
    关于Spring集成Quartz的concurrent属性
    数据事务四种隔离机制和七种传播行为
    eclipse properties 文件查看和编辑插件
    RabbitMq的整理 exchange、route、queue关系
    MySQL关闭查询缓存(QC)的两种方法
    Map集合的四种遍历方式
    springBoot使用外部Tomcat启动项目
    解决tomcat闪退问题
  • 原文地址:https://www.cnblogs.com/CassieHouse/p/8515746.html
Copyright © 2011-2022 走看看