发表于: 2017-06-02 21:16:01
1 1235
今天完成的事:上午体检,下午学习了下JavaScript的封装,看了下有微钱的bug。
明天计划的事:完善ppt,改有微钱的bug,看论文相关的代码。
困难:暂无。
收获:之前写修真院13期的时候,画左侧导航条的canvas时封装成函数更好用,但是当时封起来一直出错,也不太熟悉,自己js的基础很差,今天趁有点时间看了下js封装的知识,因为js是一种基于对象的语言,但是它并不是真正的面向对象编程(没有类),封装最原始的方法是:举个例子,水杯(刚好看到水杯。。)是一个对象,有高度和容量两个属性,就可以写:
var cup={height:‘’,volume:‘’}//原型
如果我们需要生成实例,就需要var cup1={};cup1.height=‘30cm’;cup1.volume=‘500ml’;//实例
但是这样有个问题,如果需要很多实例(比如我要写很多个杯子),就特别麻烦,且原型和实例没啥联系;
后来就有了我们比较熟悉的封装成函数:
function cup(x,y){
return{
height:x,
volume:y}
}//相当于封了个水杯函数,但是可以直接调用了;
var cup1=cup(‘30cm’,‘500ml’)//这个和上面那个效果是一样的,但是就简单很多了,原型和实例也联系起来了,但是生成的实例彼此之间也没啥联系;
这个时候应该用到JavaScript提供的一个构造函数(constructor)模式(之前我都不知道啊,没什么概念),
所谓"构造函数",其实就是一个普通函数,但是内部使用了this
变量。对构造函数使用new
运算符,就能生成实例,并且this
变量会绑定在实例对象上。
这个时候,之前的那个原型能写成:
function cup(x,y){
this.height=x;
this.volume=y
}
生成实例就直接:
var cup1=new cup('30cm','500ml');
var cup2=new cup('20cm','400ml');
这个时候cup1和cup2会有自动的constructor属性,指向他们的构造函数,用alert(cup1.constructor==cup);//会返回true
或者用instanceof运算符,也可以证明原型和实例的关系。
最后又发现!构造函数好用但是会存在内存浪费,就是如果给构造函数多加两个属性,比如加个color=‘蓝色’,word=‘乐扣’,每次生成实例的时候,实例都会默认带上这两个属性,但是他们都是一样的啊!重复的生成实际上就会占用过多的内存了。
于是发现:
Javascript规定,每一个构造函数都有一个prototype
属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
我们把那些啥不变的东西(属性,方法?)都放去prototype上面,共同的属性就放在同一个内存地址,实例要用就去那里取,而不用再重复生成,写法就是:
function cup(x,y){
this.height=x;
this.volume=y;
}
cup.prototype.color='蓝色';
cup.prototype.word='乐扣';
这个时候下面那两个就放一个内存地址,如果生成实例,只会生成height和volume了。
懂了吗哈哈哈反正我觉得挺清楚。。
评论