发表于: 2017-10-25 22:21:09

1 616


今日完成:完成了wang富文本编辑器的使用,感觉挺好的简单方便,又挺好看。看了下原型继承的东西:

原型继承

JavaScript不是真正意义上的面向对象语言,没有提供传统的继承方式,它提供的是一种叫做原型继承的方式。但是它拥有面向对象和函数式的编程特点,理解原型继承,对我们使用JS来实现面向对象很有帮助。

原型

在Javascript中,每个函数都有一个原型属性prototype指向函数自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的原型(null),这样就形成了原型链。

结合一下图,认真思考下:


理解几点:

prototype: 在函数身上,指向原型对象

__proto__: 在对象身上(包括函数创建的对象, 函数本身和原型对象),指向自身的原型

constructor: 在原型对象上,指向构造函数, 在多级继承的时候,指明构造函数方便在对象上扩展原型属性

Object.__protp__为null: 原型的顶端

原型使用方式

方式一

通过给Calculator对象的prototype属性赋值对象字面量来设定Calculator对象的原型。

方式二

赋值原型prototype的时候使用function立即执行的表达式来赋值,即如下格式:Calculator.prototype = function () { } ();, 可以封装私有的function,通过return的形式暴露出简单的使用名称,以达到public/private的效果。

方式三

分别设置原型对象:

原型的作用

最主要的一点是数据共享,创建对象的时候,我们会把公共的方法和属性挂载到原型上,避免资源浪费。

原型链

原型对象也有自己的原型,直到对象的原型为 null 为止(也就是没有原型)。这种一级一级的链结构就称为原型链。原型继承的模型就是JavaScript实现继承的原理。真正形成原型链的是每个对象的__proto__属性,而不是函数的prototype属性,这是很重要的。

看了一些,没全看完,明天接着啃。

原文地址:https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/prototypal-inheritance.html

明日计划:接着完成任务10剩余部分

问题:都是图片进度条那个地方吧,感觉那个地方好像是根据上传的状态的变化,让那个进度条动起来的吧,进度条的样式倒是在bootstrap上看到了,但是怎么让它动起来这个地方感觉还很困惑。

收获:这次的富文本编辑器算是我第一次真正的接触插件了,有完整的容易阅读的文档,仔细看了下,里面包含了很多东西,包括怎么调整样式,以及一些小功能,还有获取里面的信息的方法,感觉挺好的,简单省事。


返回列表 返回列表
评论

    分享到