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