我来重新学习js的面向对象(part 4)
我来重新学习js 的面向对象(part 4)
续上一篇,随着业务越来越大,要考虑一些继承的玩意了,大千世界,各种东西我们要认识和甄别是需要靠大智慧去分门别类,生物学中把动植物按界、门、纲、目、科、属、种进行分类的方法可能是最有代表的实例之一.........
说人话就是,我们终于要学习继承的知识了,然后用这些知识去解决老板的问题。
一、继承-原型链
继承是 OOP 开发中的一个极为重要的概念,而在javascript 里面,实现继承的方式主要依靠原型链来实现的。
图片来自:https://www.lieyuncj.com/p/3087
图一,一环扣一环,形成了链条,可以适当帮助理解原型链的概念,原型链,换言之就是原型对象构成的链。
图片来源于:https://hackernoon.com/unders...
回顾一下,构造函数,原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针,当我们将原型对象等于另外一个类型的实例的时候,就会出现原型对象包含一个指向另外一个原型的指针,例如 dog原型对象 指向了 animal原型对象。
继续回到现场,我们做了一些分类,食物下面分了水果分类:
// 定义一个 Food 的构造函数
function Food() {this.type = "食物";
}
// 定义了 Food 的原型对象的一个方法 getType
Food.prototype.getType = function() {return this.type;
};
// 定义一个 Fruit 的构造函数
function Fruit() {this.type = "水果";
}
// 将 Fruit 的原型对象指向 Food 的实例
Fruit.prototype = new Food();
// 定义 Fruit 的原型对象的一个方法 getType
Fruit.prototype.getType = function() {return this.type;
};var food1 = new Fruit();
console.log(food1.getType()); // 返回 水果
- 前半段都是一样的,直至将 Fruit 的原型对象指向 Food 的实例,于是Fruit原型不仅拥有了 Food 实例的全部属性和方法,也拥有了 Food 实例的原型对象(因为 Food 实例里面有
prototype
指向Food Prototype
) - 这种粗暴的直接将父对象的实例塞进去子对象的原型里面的方式,直接促成了Fruit 继承 Food。
我最喜欢用《javascript 高级程序设计》第三版的图来说明,因为他画的比较详细而且容易看明白(虽然我也是看了十来遍才看懂),借用他的例子和图来解释我们的例子:
可以看到现在这里子对象
subtype
的 原型对象是superType
,因为也是直接粗暴的塞进去的。
如果要看完整的他的原型链,可以参看这个图:
相当详细,这里之所以有 Object
是因为 javascript 里面一切皆是对象,默认的最顶级的原型就是 Object Prototype
。(怎么看这个图,可以翻看之前一集介绍原型的内容)
下面需要注意一些原型对象的问题和技巧
1.1 确定原型和实例的关系
没办法准确知道是继承于哪一个,只要是在链条里面的,都会被认为是继承过来的。
console.log(food1 instanceof Fruit) // 返回 true
console.log(food1 instanceof Food) // 返回 true
console.log(food1 instanceof Object) // 返回 trueconsole.log(Fruit.prototype.isPrototypeOf(food1)) // 返回 true
console.log(Food.prototype.isPrototypeOf(food1)) // 返回 true
console.log(Object.prototype.isPrototypeOf(food1)) // 返回 true
这里也跟javascript 的原型搜索机制有关系,当访问一个实例属性时候,首先会在实例中搜索该属性,如果没有找到该属性,就会继续搜索实例的原型对象,在通过原型链实现继承的情况下,搜索过程就会一直沿着原型链继续向上搜索。
类似下图:
图片来源于:http://www.cnblogs.com/keepfo...
1.2 谨慎定义方法
① 给原型添加方法的代码一定要放在替换原型的语句之后
正确的例子:
// 定义一个 Food 的构造函数
function Food() {this.type = "食物";
}
// 定义了 Food 的原型对象的一个方法 getType
Food.prototype.getType = function() {return "food 的 getType 方法";
};
// 定义一个 Fruit 的构造函数
function Fruit() {this.type = "水果";
}
// 将 Fruit 的原型对象指向 Food 的实例
Fruit.prototype = new Food();
// 给子类 Fruit 的原型添加一个新方法getSubType
Fruit.prototype.getSubType = function() {return "Fruit 的getSubType";
};
// 重写父类 Food 的方法getType
Food.prototype.getType = function() {return false;
};
var food1 = new Fruit();console.log(food1.getSubType()); // 返回 Fruit 的getSubType
console.log(food1.getType()); // 返回 false
- 子类 Fruit 重写父类(超类)的原型对象的方法
getType
,在调用的时候会覆盖屌父类 Food的原型对象的getType
方法,直接使用子类Fruit的getType
- 子类 Fruit 添加一个方法到自己的原型对象里面,也是很正常的,能够被直接使用。
错误的例子:
// 定义一个 Food 的构造函数
function Food() {this.type = "食物";
}
// 定义了 Food 的原型对象的一个方法 getType
Food.prototype.getType = function() {return "food 的 getType 方法";
};
// 定义一个 Fruit 的构造函数
function Fruit() {this.type = "水果";
}
// 给子类 Fruit 的原型添加一个新方法getSubType
Fruit.prototype.getSubType = function() {return "Fruit 的getSubType";
};
// 重写父类 Food 的方法getType
Food.prototype.getType = function() {return false;
};
// 将 Fruit 的原型对象指向 Food 的实例
Fruit.prototype = new Food();var food1 = new Fruit();console.log(food1.getSubType()); // 抛出 error 异常
console.log(food1.getType()); // 返回 false
food1.getSubType()
直接抛出异常,提示说方法找不到或者未定义
主要就是因为子原型对象被替换的时候会被完全覆盖。
1.3 在通过原型链实现继承时,不能使用对象字面量方法创建原型
主要是因为对象字面量方法会重写原型链,这个原理在之前章节说过,这里只是再次提醒。
// 省略。。。
Fruit.prototype = new Food();Fruit.prototype = { // 被重写了原型链,就不属于原来的原型链范围了。
// xxxxxxx
}
// 省略。。。
1.4 原型链的问题
- 原型链最大的问题是来自包含引用类型值的原型,这种类型值的原型属性会被所有实例共享,导致没办法很好隔离,所以之前也是使用构造函数和原型模式组合使用来解决这个问题,但当时没有触及真正的继承。
- 原型链另外一个问题是,在创建子类型的实例时,不能向超类型的构造函数中传递参数,或者说,是没办法在不影响所有对象实例情况下,给超类型的构造函数传递参数。
基于以上2个问题,导致了实际环境中,很少会单独使用原型链,会结合其他方式来使用原型链,毕竟 javascript 里,所有的继承其实也是以原型链为基础的。
二、继承-借用构造函数、伪造对象、经典继承
图片来自:https://www.tvmao.com/drama/K...
鉴于之前原型链的问题两大问题,所以机智的工程师想出来利用构造函数来搭配使用,这个技术就叫做借用构造函数 constructor stealing(很 low 有没有!),有时候叫伪造对象,或者叫经典继承(逼格瞬间飙升到完全看不懂,但觉得很厉害,有木有!)
核心思想是在子类型构造函数的内部调用超类型改造函数。
单纯使用原型链继承的时候:
function Food() {this.colors = ["red", "blue"];
}function Fruit() {}Fruit.prototype = new Food();var food1 = new Fruit();
var food2 = new Fruit();
console.log(food1.colors); // 返回 [ 'red', 'blue' ]
console.log(food2.colors); // 返回 [ 'red', 'blue' ]
food1.colors.push("yellow");
console.log(food1.colors); // 返回 [ 'red', 'blue', 'yellow' ]
console.log(food2.colors); // 返回 [ 'red', 'blue', 'yellow' ]
使用借用构造函数模式继承的时候:
function Food() {this.colors = ["red", "blue"];
}function Fruit() {Food.call(this); // call 可以改变函数的this对象的指向
}var food1 = new Fruit();
console.log(food1.colors); // 返回 [ 'red', 'blue' ]food1.colors.push("yellow");
console.log(food1.colors); // 返回 [ 'red', 'blue', 'yellow' ]var food2 = new Fruit();
console.log(food2.colors); // 返回 [ 'red', 'blue' ]
可以看到截然不同的两种效果,后者的实例的数组(引用类型的数据)并没有跟随其他实例变化而变化,是互相独立的。
为什么可以这样呢?
- 利用了函数的执行环境上下文,这里的“继承”的目的只是为了能够使用超类的属性和方法(不算是真正的继承),所以直接将超类的构造函数放到子类的构造函数里面执行,从而将他们进行合体。
- 利用了 call(或者 apply 或者 bind 这种函数)改变了构造函数的 this 指向,才得以实现上面说到的将不同的构造函数放到同一个执行环境中执行。
2.1 传参
下面两个例子分别说明了,这种继承方式可以传参的,并且传参之后也是可以重写超类的属性的。
例子1:
function Food(name) {this.name = name;this.colors = ["red", "blue"];
}function Fruit() {Food.call(this, "苹果"); // call 可以改变函数的this对象的指向
}var food1 = new Fruit();
console.log(food1.name); // 返回 苹果
例子2:
function Food(name) { // 参数this.name = name;this.colors = ["red", "blue"];
}function Fruit() {Food.call(this, "苹果"); // call 可以改变函数的this对象的指向,加上了传参this.place = "非洲"; // 添加属性this.name = "香蕉"; // 重写超类属性
}var food1 = new Fruit();
console.log(food1.name); // 返回 苹果
console.log(food1.place); // 返回 非洲
2.2 这种方式的问题
图片来自:https://www.youtube.com/watch...
正如之前所说,这种不是真正的继承,只是想子类和父类进行了强行合体罢了,这种合体方式能够满足一般继承的要求,但是带了其他问题:
- 没办法使用超类的原型对象里面定义的方法。
function Food() {this.colors = ["red", "blue"];
}
Food.prototype.getType = function () {console.log("我是 food 的getType");
}
function Fruit() {Food.call(this); // call 可以改变函数的this对象的指向
}var food1 = new Fruit();
console.log(food1.getType()); // 抛出异常,没有这个 function
- 因为子类和超类都是构造函数,那么就会有之前说的,构造函数在
new
的时候,里面的方法(函数)会重复创建function
实例, 导致资源浪费。
function Food() {this.colors = ["red", "blue"];
}function Fruit() {Food.call(this); // call 可以改变函数的this对象的指向this.getType = function() {console.log("我是 food 的getType");};
}var food1 = new Fruit();
var food2 = new Fruit();console.log(food1.getType == food2.getType); // 返回 false
鉴于这种问题,在小规模程序设计里面还好,但是一旦规模稍微变得复杂之后,就没法控制代码了,那我们机智的工程师们还要继续想想办法。
参考内容
- 红宝书,javascript 高级程序设计第三版
原文转载:https://www.godblessyuan.com/...
我来重新学习js的面向对象(part 4)相关推荐
- javascript实战pdf_javascript该怎么学呢?学习Js之路
javascript该怎么学呢?Js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条& ...
- javascript该怎么学呢?值得收藏的学习Js之路
javascript该怎么学呢?Js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条& ...
- 初学者学习JAVASCRIPT很吃力怎么办?到底该如何学习JS?
Js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习Js的途径.在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条"轻松学习Js之路&qu ...
- 学习JS语言,先了解JS语言是什么?
学习JS语言,先了解JS语言是什么? 1.什么是js语言? JavaScript是一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为 ...
- 学习js,尝试写一个表单验证框架(1)-规划
斗胆放到首页来,如果不合适的话就删了吧,谢谢 其实这个框架也已经写了一点了,但是越写越乱越没把握,最终决定写成博客的形式,强迫自己慢下步调,一点点仔细地规划,设计,思考,期间也一定会遇到不少问题,还请 ...
- python 内存溢出能捕获吗_从0基础学习Python (19)[面向对象开发过程中的异常(捕获异常~相关)]...
从0基础学习Python (Day19) 面向对象开发过程中的=>异常 什么是异常 当程序在运行过程中出现的一些错误,或者语法逻辑出现问题,解释器此时无法继续正常执行了,反而出现了一些错误的 ...
- 在学习js的然后写代码的过程中我老是找不到思路怎么办?
在学习js的然后写代码的过程中我老是找不到思路怎么办? 写的少了,边写边思考: 刚刚学习的阶段,还是要多写,多借鉴别人的代码. 转载于:https://www.cnblogs.com/helloy/p ...
- 类的扩充 js中面向对象的技术
类的扩充 ps,纠正之前的一个错误,之前直接重新提交函数的,而重新提交函数表明这是讲之前的函数清空,重新引用,注意:这样的话已经不存在引用关系,所以这样对于类的修改,不会影响其原先继承的修改 类的扩充 ...
- 学习js的第五天【作用域,递归,对象,数组】
学习js的第五天[作用域,递归,对象,数组] 一.作用域 ===>变量起作用的范围 1.局部作用域:在函数体中作用范围 2.全局作用域:在整个js全局起作用 var num=100 -----& ...
最新文章
- css3价格斜切_CSS3倾斜skew()方法_CSS3教程_绿叶学习网
- 小白重装系统教程_怎么一键重装系统:安装win10系统详细图文教程
- 当我们说数据挖掘的时候我们在说什么
- HIVE中的表以及语法
- 惠普8440p拆机加内存图解_惠普电脑开不了机怎么办
- 火狐浏览器pentadatyl插件的基本设置
- 从“梁漱溟:思考问题有八层境界”所联想到的
- 一分钟读懂java的super关键字
- 免流量手机浏览器_不能不知的华为手机菜单栏,知道3个的算你手机没白买!...
- 老司机翻车现场:一个业余程序员组织如何收到滴滴的侵权通知?
- Web API应用架构在Winform混合框架中的应用(3)--Winfrom界面调用WebAPI的过程分解...
- Spring Cloud Alibaba Sentinel之持久化篇
- 制作网页版Excel表
- cuda必须装在c盘吗_怎样把C盘的所有文件移到D盘或E盘里去?
- 一、爬虫 - 新浪爱问共享资源全下载之解决方案
- 投影仪幕布增益_别再说幕布是花瓶 投影幕布的作用原来这么大
- 别再问我如何制作甘特图了!
- 准备搭建一个服务器,使用云服务器和个人电脑哪个好?
- 依据数据简单分析,发掘潜在客户
- 怎样删除usb计算机连接网络打印机驱动,USB无法识别打印机的解决办法和教程
热门文章
- c++ mysql ctime_CTime::Format
- 不想用鸿蒙系统怎么办,华为鸿蒙系统出大BUG!网友:这再也不是用户想要的鸿蒙系统...
- linux安装golang!!
- 使用JSSDK分享页面
- mybatis中association和collection的column传入多个参数值
- Atitit 基于dom的游戏引擎
- 安装Visual Studio2013
- NodeJS(四)Mac下如何安装package.json里面会产生依赖项
- BAE3.0还不支持本地写入文件
- [NOIP2002]矩形覆盖