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

本文通过生动的大话西游故事,介绍了JavaScript中的原型和类的概念,对比了ES5与ES6的不同实现方式,并通过实例帮助读者理解构造函数、原型属性及方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

谈起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小书

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值