我来重新学习 javascript 的面向对象(part 1)
很多job 的描述都说要求精通 javascript 面向对象编程,但是根据一般的套路,写精通其实就是熟练,写熟练其实就是一般,写一般其实就是懵逼!
虽然话说如此,但是我们还是要熟练使用 javascript 面向对象编程的,毕竟这是js社会高能人才的其中一个标准,这里我就用一个鲜活的例子来说明和理解我们应该如何使用javascript 面向对象的方式来编程。
一、野蛮方式构建对象
刚开始最初,我们创建对象的方式是这样的:
// 。。。。每次都要写上面的一大段代码,只是为了创建一个 food
var food = new Object();
food.name = "苹果";food.sayName = function() {console.log("我是" + this.name);
};
复制代码
但是这样创建起来很麻烦,写的代码也是很长,如果要创建好多对象,例如我制造了10000个食物,就要写10000次这一大段代码了,所以后来聪明的工程师改为了这样写:
// 起码比之前的少了几行,也整洁了一些
var food = {name: "苹果",sayName: function() {console.log("我是" + this.name);}
};
复制代码
起码代码少了一些,但是还是没办法很好解决我要写100000段代码的问题,所以再后来的人们就开始使用一些高级玩意来解决这个问题。
二、使用工厂模式构建对象
通过抽象出创建具体对象的过程,用函数来进行封装,换句话来说,就是抽象了一个 food 的工厂,然后通过对这个工厂传入不同的材料,来生成不同的食物。
function createFood(name) {var o = new Object();o.name = name;o.sayName = function() {console.log("我是" + this.name);};return o;
}var food1 = createFood("苹果");
var food2 = createFood("苹果");
复制代码
这里可以看到food1,food2 就是这样被制造出来的,然后只需要少量的代码(预先定义好一个生产工厂函数),就可以完成大量的事情,彻底解决了问题,实现了多快好爽的新局面。但是用了一段时间之后,随之而来发现一个新问题,当食物多起来的时候,老板貌似不知道哪些食物是属于那些分类的(假设老板是 zz),那怎么办呢?
// 都统一返回是[Function: Object],没办法用区分识别(卖个关子,你不用管那个constructor)
console.log(food1.constructor) // 返回[Function: Object]
console.log(food2.constructor) // 返回[Function: Object]
复制代码
三、使用构造函数模式来区分自己人
经过一番智慧交流之后,聪明的人们想出了一个方法,使用一个在对象里面的 constructor
函数来识别那些不一样的对象,类似使用部门工牌来标记这个人是是属于哪个部门的。
function Food(name) {this.name = name;this.sayName = function() {console.log("我是" + this.name);};
}var food1 = new Food("苹果");
var food2 = new Food("苹果");// 假设这里有一个其他的食物,可能是冒充的
var food3 = new otherFood("苹果");
复制代码
因为要实现类似工牌的方式来识别,所以在创建food的工厂里做一些调整:
- 没有显式的创建对象,例如:
var o = new Object();
- 直接将属性和方法付给了
this
对象 - 没有
return
语句 - 函数使用了大写字母开头(这里只是为了区分这个函数的特别,按照惯例,大写字母开头的,一般都是 class 或者构造函数)
- 使用了 new 来创建`Food``对象
做了以上的改变之后,整个创建对象的模式被改变了:
- 首先定义了一个
Food
的构造函数(其实就是之前的工厂函数createFood,但是现在升级了) - 通过
new
来创建一个对象(现在的 Food 用 new 来先创建) - 将构造函数的作用域赋值给新对象,将
this
指向这个新对象(将升级版的工厂送给这个用new
创建的 food) - 执行构造函数的中的代码(升级版的工厂会自动将里面的零件和机器放到新的 Food 上,相当于组装放在了食物本身 身上)
- 不需要主动
return
,自动返回新对象(升级版的工厂会自动返回构造好的 food 对象)
通过这种方式,我们制造出来的食物都会有一个 constructor
为 Food 的标记来标识,如果看到不是的话,那肯定就不是我们制造的。
console.log(food1.constructor) // 返回[Function: Food]
console.log(food2.constructor) // 返回[Function: Food]
console.log(food3.constructor) // 返回[Function: OtherFood]// 检验的方式有两种
console.log(food1.constructor == Food) // 返回 true
console.log(food2.constructor == Food) // 返回 true
console.log(food3.constructor == Food) // 返回 false ,这个不是我们制造的食物console.log(food1 instanceof Food) // 返回 true
console.log(food3 instanceof Food) // 返回 false,这个不是我们制造的食物
复制代码
可以看到,使用了新技术(constructor
模式技术)之后,在没有增加工作量的情况下,解决了令人头痛的问题,简直是完美,不过过了一段时间之后,发现好像还是有些瑕疵,使用构造函数constructor
模式的时候,函数里面的每个方法都会在每个实例上重新创建一遍,那么最明显的地方是:
console.log(food1.sayName == food2.sayName); // 返回 false
复制代码
因为使用new
来创建实例,new
的话还会把构造函数里面的方法也一起创建,因为方法也是函数,而函数的实例化也会被new
触发:
// 省略了其他部分,只关注方法部分
this.sayName = function() {console.log("我是" + this.name);
};this.sayName = new function() {console.log("我是" + this.name);
}();
复制代码
这样就会造成内存和时间和性能的浪费,明明不需要重新重建新的函数实例的。
其实在之前的工厂模式里面,也存在这个问题,不过工厂模式更彻底,直接完全创建一个新对象,而构造函数模式的话只是方法会被重新创建。
那怎么解决呢?会用到原型模式,下回分解。
参考内容
- 红宝书,《javascript 高级程序设计第三版》
版权信息
作者: 怂如鼠 网站: www.whynotbetter.com 本作品著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。
转载于:https://juejin.im/post/5b7d7d6b6fb9a019b953dd67
我来重新学习 javascript 的面向对象(part 1)相关推荐
- javascript 的面向对象特性参考
最近在看用javascript+css实现rich client.javascript 也是一个蛮有意思的语言.特别是其面向对象的实现和其他"标准"的OO launguage有很大 ...
- 如何理解并学习javascript中的面向对象(OOP)
本文不适合javascript初学者看(javascript水平还停留在函数级别的朋友,看了会觉得很晕的).如果你想让你的javascript代码变得更加优美,性能更加卓越.或者,你想像jQuery的 ...
- javascript 学习笔记之面向对象编程(二):继承多态
~~接上篇~~上一篇实现了类的实现以及类成员变量和方法的定义,下面我们来了解下面向对象中两个最重要的特性:继承和多态. 继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属 ...
- 如何循序渐进有效学习 JavaScript?
张克军 , 豆瓣前端工程师 185 票,来自 haochuan . Yin .知乎用户 更多 我的建议: 1. 选本好书 http:// book.douban.com/subject /2994 ...
- 了解使用JavaScript进行面向对象编程的基础(并增强您的编码…
by Kris Baillargeon 通过克里斯·拜伦 学习使用JavaScript进行面向对象编程的基础知识(并增强您的编码能力!) (Learn the basics of object-ori ...
- 系统地学习JavaScript
入门 学会DIV+CSS布局 使用DIV+CSS布局标准网页,可以使前端XHTML代码更少.结构更清晰,这有利于轻松用JavaScript操作DOM,比如,要展示一个3 行3列的列表,如果用传统的表格 ...
- 我来重新学习js的面向对象(part 4)
我来重新学习js 的面向对象(part 4) 续上一篇,随着业务越来越大,要考虑一些继承的玩意了,大千世界,各种东西我们要认识和甄别是需要靠大智慧去分门别类,生物学中把动植物按界.门.纲.目.科.属. ...
- 为啥我从后台查到的值在页面显示的是undefined_【java笔记】046天,作购物车页面,学习JavaScript...
今天是学习java 的第46天,今天先是完成了购物车页面的简单制作,然后是开始学习JavaScript的知识. html+css 只是可以实现静态的页面无法实现动态的效果 : 购物车页面的制作: 效果 ...
- 对于初学者,如何轻松学习JavaScript?
JavaScript给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习JavaScript的途径. 我试着总结自己学习多年JavaScript的经验,希望能给后来的学 ...
最新文章
- 人人都写过的5个Bug!
- Unity UI代码自动生成
- multiple root tags怎么解决_手机ROOT后交管12123打不开怎么解决;EdXposed使用QX模块微X教程...
- 搭建Angular2环境
- (转)[Android] 利用 ant 脚本修改项目包名
- JVM类加载机制(ClassLoader)源码解析
- 多进程与多线程的区别
- google compute test Problem 1题
- 计算机组成原理哈工大期末_浅谈计算机组成原理(三)
- JAVA ulimit,java-从linux中的jvm中查找硬打开和软打开文件限制(ulimit -n和ulimit -Hn)
- 一、Team Explorer的安装
- 如何破解Mac并为其提供真正应得的精美壁纸
- INTERSPEECH2020 语音情感分析论文之我见
- 为什么现在年轻人都在寻找副业、兼职?难道只有物价生活成本上涨?
- python3.6新特性
- eclipse经常出现弹窗Refreshing workspace
- vue配置代理服务器proxy
- 数学建模三剑客MSN | CSDN博文精选
- 服务器上Ubuntu系统安装
- 【装机吧】电脑上网慢的解决方法