原型

原型模式的执行流程

  1. 先查找构造函数实例里的属性或方法，如果有，立刻返回
  2. 如果构造函数实例里没有，则去它的原型对象里找，如果有，就返回

构造函数实例属性方法

构建原型属性方法

构造函数体内什么都没有，这里如果有，叫作实例属性，实例方法

  1. Box.prototype.name='lee'; //原型属性
  2. Box.prototype.age=23;
  3.     return this.name+this.age+"运行中......";
  4. };

如果是实例化方法，不同的实例化，他们的地址是不一样的，是唯一的，如果是原型方法，那么他们地址是共享的，大家都一样，看以下示例box1.run==box2.run。

  1. var box1=new Box();
  2. var box2=new Box();
  3. alert(box1.run==box2.run);  // true

这个属性是一个对象，访问不到

  1. alert(box1.prototype);

构造属性可以获取构造函数本身，作用是被原型指针定位，然后得到构造函数本身，其实就是对象实例对应的原型对象的作用

  1. alert(box1.constructor);

字面量创建对象

  1. function Box(){}

使用字面量的方式创建原型对象，这里{}就是对象(Object),new Object就相当于{}

  1. Box.prototype={
  2.     name:'lee',
  3.     age:20,
  4.     run:function(){
  5.         return this.name+this.age+"运行中.......";
  6.     }
  7. };
  9. var box1=new Box();
  10. alert(box1.constructor);//返回function Object(){}对象

构造函数创建对象

  2.     this.name=name;
  3.     this.age=age;
  4.     this.run=function(){
  5.         return this.name+this.age+"运行中....";
  6.     };
  7. }
  9. var box1=new Box('zhangsan',20);
  10. alert(box1.constructor); //返回的是function Box(){}

原型对象的重写需要注意的问题

  1. 重写原型对象之后，不会保存之前原型的任何信息
  2. 把原来的原型对象和构造函数对象实例之间的关系切断了

重写原型

  1. Box.prototype={
  2. }
  3. var box1=new Box();
  4. alert(box1.name); // undefined
  1. String.prototype.addstring=function(){
  2.     return this+'，被添加了！';
  3. };
  5. var box1=new Box();
  6. alert(box1.name.addstring()); // lee，被添加了！
  1. 先找到入口函数window.$
  2. 根据入口函数找到构造函数new ...
  3. 根据构造函数找到原型的定义

以下实例中通过Jquery或Zepto操作dom元素，例如css方法、text方法都是操作的原型上的的方法。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Zepto</title>
  5.     <!--<script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.js"></script>
  6.     <script src="zepto.js"></script>
  7.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> -->
  8.     <script src="jquery.js"></script>
  9. </head>
  10. <body>
  11.     <div> 这是一个测试 </div>
  12.     <div> 这是一个测试2 </div>
  13.     <script>
  14.         var div = $('div'); // 得到一个实例
  15.         div.css('color', 'red'); // 原型方法css
  16.         alert(div.text()); // 原型方法text
  17.     </script>
  18. </body>
  19. </html>

Zepto源码地址：

以下实例也是取了关于原型部分的源码

var Zepto = (function() {
    var $, zepto={}, emptyArray=[], slice=emptyArray.slice, document=window.document;

    // 构造函数
    zepto.Z = function(dom, selector) {
        dom = dom || []
        dom.__proto__ = $.fn
        dom.selector = selector || '';

        return dom
    }

    zepto.init = function(selector) {
        var dom;

        // 如果选择器不存在，返回一个空的Zepto集合
        if (!selector) return zepto.Z();

        // 优化字符串选择器
        if (typeof selector === 'string') {
            selector = selector.trim();

            // 还有一系列的判断此处忽略，进行简化 ...
            dom = slice.call(document.querySelectorAll(selector))
        } else {
            // 更多可以去查看源码 ...
        }

        return zepto.Z(dom, selector)
    }

    $ = function(selector) {
        return zepto.init(selector);
    } 

    $.fn = {
        text: function() {
            return (0 in this ? this[0].textContent : null)
        },
        css: function() {
            alert('css');
        }
    }

    // $.fn赋值给构造函数的原型
    zepto.Z.prototype = $.fn;

    return $;
})()

window.Zepto = Zepto;
window.$ === undefined && (window.$ = Zepto); // 如果window.$不存在，赋予window.$为Zepto;

Jquery源码地址：https://cdn.bootcss.com/jquery/3.3.1/jquery.js

  1. 对外开放的只有$，构造函数并没有开放

实例: