JS高级- OOP-ES5
1. OOP
面向对象三大特点: 封装,继承,多态
封装:
问题: 构造函数可重用代码和结构定义,但无法节约内存
为什么: 放在构造函数内的方法定义,每new一次,都会反复创建副本——浪费内存
解决: 继承
继承:
什么是: 父对象的成员,子对象无需重复创建,就可直接使用
为什么: 代码重用, 节约内存
何时: 只要发现多个子对象,希望拥有共同的方法定义时
如何: js中都是通过继承原型对象来实现继承关系
原型对象: 集中存储多个子对象,共有成员的父对象
何时: js中只要实现继承,都要使用原型对象
如何:
创建: 不用自己创建。买一赠一!
只要创建一个构造函数,都附赠一个原型对象
构造函数的prototype属性指向原型对象
如何继承: 不用自己继承。
new的第二步: 让新对象自动继承构造函数的原型对象
本质: 设置新对象的__proto__指向父对象
凡是从__proto__指出的引用,都是继承关系
我们做什么: 决定将那些方法集中添加到原型对象中
构造函数中,不再包含任何方法定义
调用对象的方法时:
现在子对象本地找方法,
如果找不到,就延__proto__,向父元素查找
内置对象的原型对象:
内置对象: ES标准中规定的,浏览器厂商已经实现的对象
11个:
String Number Boolean ——包装类型
Array Date RegExp Math
Error
Function Object
Global(浏览器中被window代替)
其实能new的,都是构造函数
每个构造函数都有一个原型对象
原型对象中保存着该类型的所有子对象共用的API
问题: 旧浏览器不支持新的API
解决: 在该类型的原型对象中添加自定义方法
强调: 在方法内,可用this指代将来调用该方法的.前的对象
捷径: 在网上搜索: MDN 类型.prototype.方法名
找Polyfill, 直接复制粘贴即可
包装类型: String Number Boolean
什么是: 专门保存原始类型的值,并提供操作原始类型值的API
为什么: 原始类型的值本身什么功能都没有
何时: 只要用原始类型的值,打.访问方法或属性时
如何: 不用自己用!
比如: var n=345.678; n.toFixed(2);
typeof n
number
new Number(n).toFixed(2) 345.68
//new Number释放
var str="hello"; str.replace("o","0");
typeof str string
new String(str).replace("o","0");
//new String释放
原型链(prototype
chain):
什么是: 由多级父元素,逐级继承,形成的链式结构
保存着所有对象,以及对象的成员
控制着对象成员的使用顺序:
先自有,再向父级找共用
vs
作用域链:
保存所有孤立的变量, 控制着变量的使用顺序:
先局部,后全局
自有属性 vs 共有属性:
自有属性: 当前对象本地保存的属性
共有属性: 原型链中父级对象中的属性
读取属性值: 子对象.属性名
修改属性值: 自有属性: 用子对象.属性名=值
共有属性: 必须用父对象.属性名=值
鄙视: 判断一个对象是数组, 共有几种方法: 4种
typeof:
只能区分原始类型和function
不能进一步区分引用类型
1. 判断原型对象:
//obj.__proto__==Array.prototype
father.isPrototypeOf(child)
判断father是不是child的父对象
判断数组:
Array.prototype.isPrototypeOf(obj)
2. 判断构造函数:
//obj.constructor == Array
child
instanceof 构造函数
判断child是否是构造函数new出的子对象
判断数组: obj instanceof
Array
问题: 不够严格: 不但检查直接父对象,而且检查整个原型链
解决: 验证对象的class属性
3. 验证对象的class属性:
每个对象都有一个隐藏的class属性(不能用.直接访问)
class属性的值,在创建对象时就确定了,用于保存类型名
class属性不随后天继承关系的改变而改变
如何获得class属性:
唯一的办法: 调用顶级父对象Object.prototype中的toString()
问题: 每种内置类型的原型对象都重写了顶级父对象中的toString(),已经不再返回class属性值
所有子对象无法调用到Object.prototype中的toString()
解决: 抢!
要抢的函数.call(对象)
在执行时: 对象.要抢的函数()
判断对象是不是数组类型:
Object.prototype.toString.call(obj)==="[object
Array]"
用obj去抢顶级父对象中的toString(),如果返回"[object
Array]" 就说明是数组
4. Array.isArray(obj)
多态:
什么是: 同一个函数在不同情况下表现出不同的状态
包括:
1.
重载:
2.
重写(override):
什么是: 子对象定义了和父对象相同的成员
为什么: 从父对象继承来的东西,可能不好用
何时: 只要觉得从父对象继承来的东西,不好用
如何: 在子对象中定义和父对象重名的成员
自定义继承关系: 3种:
1. 仅修改一个对象的父对象:
//child.__proto__=father
Objext.setPrototypeOf(child,father)
2. 批量修改所有子对象的父对象:
构造函数.prototype=father
时机: 在定义构造函数后,立刻更换
JS高级- OOP-ES5的更多相关文章
- js中OOP小指南
js中OOP小指南 在指南中,我将尝试解析以面向对象规范聚焦的es6的新特性. 首先, 什么是设计模式 范例是某个事务的例子或模型,在某种情况下,按照一种模式创建了计算机程序. 什么是面向对象 显然你 ...
- js高级之函数高级部分
基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 原型与原型链 prototype : 显式原型属性,它默认指向一个Object空对象(即称为: ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯
http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...
- Node.js高级编程读书笔记Outline
Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...
- 读JS高级——第五章-引用类型 _记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定
js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...
- 《JS高级程序设计》笔记 —— 解析查询字符串
今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...
- js 高级函数 之示例
js 高级函数作用域安全构造函数 function Person(name, age) { this.name = name; this.age = age; ...
- 惰性函数——JS高级
我们先来看一下js的异步提交. XHR我们在原生的时候常常用到,因为常用到,我们更多把封装到了工具库中 先看下他最常用的实现 // 旧方法 function createXHR() { var xhr ...
随机推荐
- Oracle 存储过程例子返回记录集
转载:https://www.cnblogs.com/mikalshao/articles/1454134.html Oracle 不支持批量查询,因此无法从一个命令返回多个结果集.使用存储过程时,返 ...
- IntelliJ IDEA 运行 Maven 项目
1.官方文档说IntelliJ IDEA已经自身集成了maven,则不用劳心去下载maven 2.导入一个程序,看是否是maven程序的关键在于工程之中有没有pom.xml这个文件,比如这里 3. ...
- day 10 函数名的运用,闭包,迭代器
函数名的本质 函数名本质上就是函数的内存地址 函数名的五种运用: 1.函数名是一个变量 def func(): print(666) print(func) # 函数的内存地址 <functio ...
- mysql left join 多条记录 1:n 的处理方法
一.准备两张表,文章表和评伦表 CREATE TABLE `article` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID', ...
- YII2中添加自定义模块
有些时候系统功能过于复杂,这时我们需要通过模块把一些功能区分开来,便于管理与维护. 我用的是Yii2的基本应用程序模板,程序其实已经给我们提供了一个模块,就是app本身.YII2中是可以无限嵌套模块的 ...
- Django——模板语言相关内容
Django模板语言相关内容 Django模板系统 官方文档 常用语法 只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} ...
- windows上安装RabbitMQ
windows下 安装 rabbitMQ 及操作常用命令 rabbitMQ是一个在AMQP协议标准基础上完整的,可服用的企业消息系统.它遵循Mozilla Public License开源协议,采用 ...
- PCR技术
qRT-PCR是指先由RNA进行反转录生成cDNA,然后以cDNA为模板进行检测,检测的是该cDNA的含量,而cDNA由特定的RNA逆转录而来,所以间接地检测了RNA的含量. 基因表达: 转录:DNA ...
- UOJ 67 新年的毒瘤 - Tarjan
Description 给出一个无向图, 要求找出某个点$u$, 去掉$u$和$u$所连的边, 所剩下的节点构成一棵树. Solution 首先, 割点肯定是不可能满足条件的, 因为去掉割点后会构成若 ...
- 09. pt-fingerprint
vim pt-fingerprint.txt select name, password from user where id=5;select name, password from user wh ...