前言
面向对象有三大特性:封装继承多态。
不过,js和java的封装继承多态是不一样的,我和从事java开发的朋友有过一次对话(抬杠 !--)。
我说:javascript也是面向对象语言,
他说:不对吧,js不是面向对象吧。
我说:是的,官方说的就是面向对象语言。
他说:那你知道三大特性吗?
我说:封装继承多态。
然后他说:那你说一下那都是啥意思。
我说:构造函数...原型对象...原型链....
他说:你说的这都是啥呀,构造函数和原型链是啥,听都没听过,面向对象使用类,你那js是假的面向对象吧。
我说:js后面用的是类,但在类之前用的是原型链。其实,类也是原型链的语法糖,不归根到底还是原型链吗。
因为我不懂java,他不懂js。不过js确实和java在面向对象的实现上是不一致的,js在class出来之前,是通过原型链的特性实现了面向对象编程。
家有儿女
今天这篇文章,我用《家有儿女》来通俗的说一下js中原型链是怎么完成封装继承多态的,class相关的这篇文章不提。
构造函数构建家庭成员
function Family(name, gender, token) {
//姓名
this.name = name
//性别
this.gender = gender
//身份
this.token = token
//家里有好多本书
this.bookList = ['资治通鉴', '百家菜谱', '七龙珠', '三体']
//家里的厨房可以用来做饭
this.useChuFang = function (type, name) {
console.log(`我用${type}做出了我想吃的${name}`)
}
//使用电脑
this.computer = function (type) {
//电脑有显卡,键盘,内存条,处理器等
let xianka = () => { }
let jianpan = () => { }
let chuliqi = () => { }
let write = () => {
console.log(`我是${this.name},我会用电脑写小说`)
}
let playGame = () => {
console.log(`我是${this.name},我会用电脑打游戏`)
}
switch (type) {
case "write":
write()
break
case "playGame":
playGame()
break
default:
console.log(`我是${this.name}抱歉,我不懂电脑的构造和具体原理`)
}
}
//使用化妆品
this.useHuaZhuangPin = function(){
if (this.gender === 'woman') {
console.log(this.name,'你是女性,可以使用这些化妆品')
} else {
console.log(this.name,'男人就别作妖了')
}
}
//私有变量,10瓶饮料
drinks = 10
//闭包返回函数
let fn = (num,name, drinks) => {
if(drinks>-1){
console.log(`我是${name},我拿了${num}瓶饮料,还剩${drinks}瓶饮料`)
}else{
console.log(`我是${name},我想拿饮料,发现没了`)
}
}
//闭包封装私有变量,家里的饮料
this.drinkFun = (num,name) => {
drinks = drinks - num
return fn(num,name, drinks)
}
//家庭有一笔1百万的存折
bankBook = 1000000
}
let XiaDongHai = new Family('夏东海', 'man', '父亲')
let XiaoXue = new Family('小雪', 'woman', '女儿')
let LiuMei = new Family('刘梅', 'woman', '母亲')
let LiuXing = new Family('流星', 'man', '儿子')
console.log(XiaDongHai, '夏东海')
console.log(XiaoXue, '小雪')
console.log(LiuMei, '刘梅')
console.log(LiuXing, '流星')测试
结论:
一个构造函数就像是一个家庭,这个家庭有一些资产,是大家所共有的,每个家庭成员都可以去使用和调配这些资产,每个家庭成员都有原型链定义的方法属性和自己独有的属性。
封装
//1.构造函数封装公共方法
//夏东海用电脑写文章
XiaDongHai.computer('write')
//流星用电脑打游戏
LiuXing.computer('playGame')
//你问他们电脑的显卡原理是什么
XiaDongHai.computer('xiaka')
//他们虽然不懂电脑是怎么运行的,但是他们可以用电脑做到自己想做的事。
//2.闭包封装私有变量
//全家喝饮料
XiaDongHai.drinkFun(3,'夏东海')
LiuMei.drinkFun(2,'刘梅')
LiuXing.drinkFun(4,'流星')
XiaoXue.drinkFun(1,'小雪')
XiaDongHai.drinkFun(1,'夏东海')测试
结论
构造函数内部可以封装公共属性方法,闭包可以封装私有变量,都可以让所有的实例对象去操作这些属性方法,并且无需知道这些属性方法是内部是如何构造的。
公共资产只要你是这个家庭成员,你就可以用它。你可以不用知道这个东西的构造原理是什么,你只需要会使用它。
你不需要会包饺子,你只需要会吃饺子
继承
//给构造函数,也就是全家添加100万元的家庭资产和一辆奔驰轿车
Family.prototype.bankBook = 1000000
Family.prototype.car = '奔驰'
//接下来我就用代码来清晰的展示面向对象的这些特征
//构建家庭成员,其实构造函数的本质作用,就是用来批量创建一些拥有相同属性或者方法的对象,不让代
码大量冗余重复。
let XiaDongHai = new Family('夏东海', 'man', '父亲')
let XiaoXue = new Family('小雪', 'woman', '女儿')
let LiuMei = new Family('刘梅', 'woman', '母亲')
let LiuXing = new Family('流星', 'man', '儿子')
测试
//夏东海将原来的奔驰车卖掉了,换了一辆新宝马车,花了10万元
Family.prototype.car = '宝马'
console.log(Family.prototype.bankBook,'???')
Family.prototype.bankBook = Family.prototype.bankBook - 100000
console.log(XiaDongHai.car,XiaDongHai.bankBook,'夏东海')
console.log(LiuMei.car,LiuMei.bankBook,'刘梅') 
结论
原型链可以添加,重写一些公共属性,所有实例对象继承原型对象的属性都会受到影响。
夏东海花了家里的公共财产,所有家庭成员拥有的共同财产就会减少。但是买了新车,以后所有成员就都能坐上宝马新车了。
同甘共苦
多态
//夏东海和刘梅做饭
LiuMei.useChuFang('鸡块','大盘鸡')
XiaDongHai.useChuFang('方便面','泡面')
//流星和小雪化妆
LiuXing.useHuaZhuangPin()
XiaoXue.useHuaZhuangPin()测试
结论
不同的方法被不同的对象调用,结果会多样性。
龙生九子各不同
结束语
其实我说的也不是很详尽,只是想变着法的想让看客明白原型链的具体作用和实际运用方法,熟练理解原型链是js开发者最重要的技能之一,现在你可以想一下vue是不是也是使用原型链的特性去让各组件操作原型上的实例方法呢。
更多继承方法请看:
js中继承的方法-CSDN博客
感觉有用的给个赞吧!
