戏说js中的class,prototype,以及jQuery的$.extends

谈起js中的原型，一般都是让人头疼的话题，懂的“猿”怎么看都懂，像我们这种不懂的“鸟”，你再怎么给我解释，我还是不理解那个概念，最开始的时候我也是糊里糊涂模棱两可，后来不去看这方面的博客，因为我有自知之明啊，看不懂不会用。

直到有天突然想学react，实不相瞒，由于基础差足足看了好多天仍然很吃力。但是收获还是有的，至少在es6类的概念上有所突破，然后回头转看了es5的prototype,居然有点明白 class Point === Point.prototype.constructor的概念;下面主要讲述一下我整个理解的过程，以及用小案例对比es5,可能会更容易理解，如需改正的地方欢迎大家提出。

自我理解es6的类比es5更容易理解，而我也是从理解了es6的类之后转化到es5的。我把类比作一个孙悟空，然后就是一段惊天地泣鬼神的瞎编乱造了

大话西游谈概念

话说悟空保唐僧西天取经，遇到了人生中，不，是猴生中最大的对手——通臂猿猴，然后俩人大战了三天三夜，最终被通臂猿猴从背后一棒敲中了后脑勺，失忆了。。。除了七十二变所有技能全部遗忘，可怜的悟空被太上老君带上天庭疗伤了，但是玉帝被猴子虐过啊，心想：现在你失去了战斗力，就会个七十二变还失忆了，看来是时候报复了。

玉帝：“孙猴子，朕想要一个高100、宽100、红色空盒子，而且我给你起好名字了就叫Box;你就站在body里面表演就行了”。说是迟，那是快，只见悟空摇身一变。

    var body = document.querySelector("body");
    class Box { // class + 名字 大括号   这是固定格式
        constructor(){ 
//constructor就是孙悟空自己 不要以为换了外壳，朕就不知道你了,赶紧变我想要的样式；
            this.box = document.createElement("div"); 
            this.box.style.width = "100px";
            this.box.style.height = "100px";
            this.box.style.backgroundColor = "red";
            body.appendChild(this.box);
        }
    }  
   

卧槽，没效果？没效果就对了。原来正当施法期间。玉帝又说：“不光朕要看，王母娘娘也想看了”，猴子还是猴子，一听到这就猴急了，在地上撒泼打滚：“太累了太累了，变不了”。只见玉帝捋了捋胡子说：“如果在不赶紧变，你就离开天庭吧，外边有通臂猿猴等着你呢，凭你现在还能逃出这个星球吗，就算出了这个星球，外边还有弗利沙跟布偶等着你呢，哈哈哈哈”，尽管他失忆了，不知道什么超级赛亚人，一些乱七八糟的东西，但是还是感觉到危险，好吧。只能在威逼利诱之下服从了。但是那么多人想看我也变不过来啊，只见他猴脑一转，猴子猴孙快出来，瞬间出现不知道多个一模一样的。玉帝老儿，想要多少就有多少，我有分身。。。

  var box = new Box();
  var box1 = new Box();
    

然后道高一尺，魔高一丈啊

玉帝：“空空啊，朕想看你筋斗云飞”，

悟空一阵咬牙切齿的说了一句“mmp,我不会”，

玉帝：“那你去找其他神仙学一学，来给我表演吧”，

哎，人在屋檐下不得不低头啊，悟空嘴里说着：“$%&*$%#$&%#。。。。”，就找人学本事了。。。。。;
然后动次打次的就回来了

var body = document.querySelector("body");
class Box {
    constructor(){ 
        this.box = document.createElement("div"); 
        this.box.style.width = "100px";
        this.box.style.height = "100px";
        this.box.style.backgroundColor = "red";
        this.box.style.position = "absolute";
        this.box.style.top = "0px";
        body.appendChild(this.box);
        this.a = 10;
    }

    fly(){
        var my = this;
        var timer = setInterval(function(){
            //注意this 指向，如果用es6箭头函数可直接用this
            my.a+=5;
            my.box.style.left = my.a + "px";
            if (my.a >= 30) {
                clearInterval(timer)
            }
        },1000)
    }
}

var box = new Box();
box.fly()

只有本尊学会了飞，其他new出来的分身才有会飞的技能，如果你让本尊使用其他技能，只需要往class里面加对应的函数就可以了，然后让他new出的分身释放对应的函数本领就可以了，这就class的基本概念了。下面会通过一个demo的从es6类转化到es5的转化，让你更清楚原型的操作。通过点击一个div来回切换子元素的背景色

demo对比es5&es6

demo的用通用样式布局

*{

        margin: 0;

        padding: 0;

    }

    #wrapper{

        width: 300px;

        height: 200px;

        border: 1px solid red;

        margin: 0 auto;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .box{

        width: 100px;

        height: 100px;

        background-color: red;

    }

<div id="wrapper"></div>

先从es6的类开始写逻辑

const wrapper = document.getElementById("wrapper");
class Foo {
    constructor(){
        this.box = document.createElement("div");// 创建div
        this.box.className = "box";//起名字
        wrapper.appendChild(this.box);//添加到外边的div
        this.isChange = true;//设置一个变量，通过变量来切换div的背景色
    }
    paint(){
       this.isChange = !this.isChange;
       this.isChange?this.box.style.backgroundColor =  "red" : this.box.style.backgroundColor = "green";
    }
}

const foo = new Foo();
wrapper.addEventListener("click",()=>foo.paint(),false);

然我们es6转化es5

命名一个函数name，将es6的constructor的代码复制提出来，

name.prototype.技能名字(){

将es6类对应的技能函数放到这里面就行了

}
代码如下

   const wrapper = document.getElementById("wrapper");
   function Foo(){
       this.box = document.createElement("div");
       this.box.className = "box";
       this.isChange = true;
       wrapper.appendChild(this.box);
   }
   Foo.prototype.paint = function(){
       this.isChange = !this.isChange;
       this.isChange?this.box.style.backgroundColor =  "red" : this.box.style.backgroundColor = "green";
   }
   const foo = new Foo();
   wrapper.addEventListener("click",function(){
      foo.paint();
   },false)

好了，大功告成，现在再看什么是prototype啊，也就是给本尊加一个技能，然后等着让分身 调用了。什么是constructor?就是本尊他自己了，只不过想看他变成什么样子而已。。。

下面在简单说一下jq的extends，主要分为两种用法

1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。

2.jQuery.fn.extend(object);给jQuery对象添加方法。

我将上面的demo用jq的方法封装一下，实现上面的效果

   (function(jQuery){
       $.extend({
           changColor:function(){
               let box = '<div class="box"></div>';
               let isChange = true;
               $("#wrapper").append(box);
               $("#wrapper").on("click",function(){

                   isChange = !isChange;
                   if (isChange) {
                       $(".box").css("backgroundColor","red")
                   }else{
                       $(".box").css("backgroundColor","green")
                   }
               })
           },
       });
   })(jQuery)

   $.changColor()
   

其实我感觉用拿jq举的例子并不太合适，用fn的那种方法更贴近demo的转换，又加需求了，朕要卷起袖子找产品去了，并送他们一张图...

好了，文章接近尾声了。想想自己的烂技术，是谁给我的勇气，让我去发表一遍文章了。。菜鸟一枚第一次发布文章，请大牛手下留情，还因为排版被打回去了，然后又不得不学一下MackDowm的排版。。

心得

第一次把自己的想法写出来，本身对自己的技术又不自信，但又对别人点赞的感觉蠢蠢欲动，即使第一次没发表成功，还是有点不甘心了。能写出这边文章主要也是最近将手头的app给上线了，又渴望对技术的提升，和新技术的学习，然后一头扎进react，就再也没有出来，为了学习react又恶补了周边的es6技术，到后来react还没学完，有种从入门到放弃的感觉，但是明显感觉对一些以前难以理解的概念有了不一样的看法，当初学react找不到完整的文档，可能还是有的技术看不懂吧，都是东拼西凑，直到后来快要走一遍文档的时候，才发现了react小书，不得不说写的很好了，从js到react的转变，一点点深入，对于一些基础不太好又想学react的伙伴们，可以好好看看，至少能少走很多弯路。。。
最后希望有天我能在这里发表一篇我自己对react的理解，以及一篇案例。。。

附上链接react小书