课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
接触前端也有一段时间了,作为一个非科班出身的前端程序员,每天浪在各路大神的博客中学习着。一定程度后发现,各路大神的博客虽对各种技术有着深入的刨析,但是对于我等非科班出身的程序员来说,自身的前端之路仍旧充满迷雾。机缘巧合之下,选择跟随Udacity去学习,去了解硅谷公司眼中的前端。这一篇学习总结是在完成了前端进阶纳米学位课程项目一《经典街机游戏克隆》之后对于面向对象相关知识的总结。
生活中,你想吃美味的披萨,你需要
1)先制作一个饼底
2)放上各种爱吃的肉类、蔬菜、果粒
3)撒上各种马苏、芝士、沙拉
4) 还需要一个烤箱
5)最后静静的等待45分钟
当然你还有另外一种选择
1)拨打400-812-3123(必胜宅急送)
2) 然后静等美味披萨的上门
工作中,我们在编写代码的时候往往需要将某一特定的代码进行重复的编写从而实现多种相似目的泛化代码。因此,当我们注意到代码中有某两处相似之处时,可以尝试提取其中的相似因子并写入可以重复使用的代码库,这样就无需在两个地方重复使用相似的代码。这也就是面向对象编程的基本思想。
类是面向对象的一种说法,它能创建大量遵从大致相同模式的相似对象,定义了同一组对象的共有属性和方法。
构造函数:在JavaScript中,创建这些相似对象的函数被称为构造函数,构造函数就是用来创建同属一类的对象。
实例:这些调用构造函数所返回的对象被称为实例
实例化:当我们调用构造函数来创建一个实例时,这个操作被称为实例化
var Car = function(loc) { // Car就是一个构造函数,它可以创建大量拥有初始位置、 var obj = {loc: loc}; // 以及move方法的对象 obj.move = function(){ obj.loc++; } return obj; }var policeCar = new Car(9); // 这个过程就称之为 实例化; // 而 policeCar 就是我们所创建的实例
上面的代码简单的介绍了 构造函数、实例 以及 实例化的过程, 当时在工作中,我们一般并不这样创建对象。
装饰器函数
之所以叫做装饰器函数,在创建对象的时候,主要的是通过接收一个外部传入的对象作为参数,然后为该对象添加一些特有的属性和方法。
var carlike = function(obj, loc) { obj.loc = loc; obj.move = function() { this.loc++; } return obj;}var amy = carlike({}, 1);amy.move();var ben = carlike({}, 9);ben.move();
原型模式
原型模式主要在装饰器函数的基础上进行了性能上一些优化。使得用该模式创建多个对象的时候,无需为每一个实例开辟一片内存空间来存放其方法,而是通过原型继承的方式,将公用的函数方法放在原型中,以此来优化性能。
var Car = function(loc) { var obj = Object.create(Car.prototype); // 将原型当中的方法进行继承 obj.loc = loc; return obj;};Car.prototype.move = function(){ this.loc++;}var amy = Car(9);amy.move();
伪类模式
之所以将其称之为伪类模式,是因为它是仿照其他语言中类系统试图增添一些语法上的便利。通过new关键字进行声明的时候,函数内会自动帮助我们添加继承自原型的this对象,并将其返回。
var Car = function(loc) { // this = Object.create(Car.prototype); // 当使用new关键字进行声明的时候,函数内会自动 this.loc = loc; // 帮助我们添加继承自原型的this对象 // return this; // 并且将他返回}Car.prototype.move=function() { this.loc++;}var amy = new Car(1); amy.move();var ben = new Car(9);ben.move();
超类与子类
我们会先构造一个通用类(超类)做大部分的工作,然后让Van和Cop类(子类)做剩下的少量定制。
我们把这个先创建的函数称之为 超类(父类),其他的一些类将使用父类作为他们的起始点。
var Car = function(loc) { // 这个类具有构造一些通用移动的方法 var obj = { loc: loc }; obj.move = function() { obj.loc++; }; return obj;}var Van = function(loc){ // 而Van 和 Cop 是父类的两个特殊版本,拥有一些特殊的属性和方法 var obj = Car(loc); obj.grab = function(){ /*…………*/ }; return obj;}var Cop= function(loc){ var obj = Car(loc); obj.call = function(){ /*…………*/ }; return obj;}
PS:此处所介绍的创建对象的方式非工作当中会选择的一些较为优秀的方式,写在这里的主要目的是为了想初学者介绍这些创建对象的方式的演变,从简单=>复杂,从耗费资源=>性能优秀。
在经历了项目一的学习后,对于 优达学城 也有了一些自己的认识。简单的说,对比国内的MOOC平台和各类技术博客,优达的课程设计可能较为注重基础知识的演变与发展,他会充分的告诉你每个知识点的本来面貌,又会告诉你在何种需求下,它被添加了哪一些新的思想,从而又演变成当下的何种流行用法。这样的一种学习方式或许能够让每一个萌新程序员都能在脑海中演化出属于自己的知识结构。最后附上最终完成了项目经典街机游戏克隆(传送门#/p/30542747), 有兴趣的朋友可以和我一起学习,共同进步