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的更多相关文章

  1. js中OOP小指南

    js中OOP小指南 在指南中,我将尝试解析以面向对象规范聚焦的es6的新特性. 首先, 什么是设计模式 范例是某个事务的例子或模型,在某种情况下,按照一种模式创建了计算机程序. 什么是面向对象 显然你 ...

  2. js高级之函数高级部分

    基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码 博客下载 原型与原型链 prototype : 显式原型属性,它默认指向一个Object空对象(即称为: ...

  3. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  4. 前端进阶试题css(来自js高级前端开发---豪情)既然被发现了HOHO,那我就置顶了嘿嘿!觉得自己技术OK的可以把这套题目做完哦,然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  5. Node.js高级编程读书笔记Outline

    Motivation 世俗一把,看看前端的JavaScript究竟能做什么. 顺便检验一下自己的学习能力. Audience 想看偏后台的Java程序员关于前端JavaScript的认识的职业前端工程 ...

  6. 读JS高级——第五章-引用类型 _记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  8. 《JS高级程序设计》笔记 —— 解析查询字符串

    今天在继续翻阅<JS高级程序设计>的时候,正好翻到location对象这一小节,其中有一部分就是讲的解析查询字符串.看到这个内容立马想到了做去哪儿秋招笔试题的时候有这么一道题. 去哪儿笔试 ...

  9. js 高级函数 之示例

    js 高级函数作用域安全构造函数 function Person(name, age)    {        this.name = name;        this.age = age;     ...

  10. 惰性函数——JS高级

    我们先来看一下js的异步提交. XHR我们在原生的时候常常用到,因为常用到,我们更多把封装到了工具库中 先看下他最常用的实现 // 旧方法 function createXHR() { var xhr ...

随机推荐

  1. spring xml头文件xmlns和xsi的意思

    在spring的配置中,总能看见如下的代码: <beans xmlns="http://www.springframework.org/schema/beans" xmlns ...

  2. CentOS systemctl命令

    systemctl命令是系统服务管理器指令,它实际上将 service 和 chkconfig 这两个命令组合到一起. 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3  ...

  3. 二分图 最小点覆盖 poj 3041

    题目链接:Asteroids - POJ 3041 - Virtual Judge  https://vjudge.net/problem/POJ-3041 第一行输入一个n和一个m表示在n*n的网格 ...

  4. DRF的权限和频率

    DRF的权限 权限组件源码 权限和频率以及版本认证都是在initial方法里初始化的 我们的权限类一定要有has_permission方法~否则就会抛出异常~~这也是框架给我提供的钩子~~ 在rest ...

  5. Quagga的安装和使用

    Quagga的安装和使用 测试环境:VM 12   CentOS 6.5 64位 Quagga是一款功能比较强大的开源路由软件,支持rip, ospf,bgp等协议. 1.       Quagga的 ...

  6. 类似No module named 'bs4'等错误的解决方法

    最近开始接触爬虫,写了如下源代码: from bs4 import BeautifulSoup import requests url='https://www.tripadvisor.cn/Attr ...

  7. echarts柱形图x轴显示不全或者每隔一个不显示的问题

    问题原因可能:x轴数据间隔太小: 问题解决: 1.调整间隔属性 xAxis: { type: 'category', //坐标轴斜着显示 axisLabel: { interval:0, rotate ...

  8. [z]oracle 创建job

    https://www.cnblogs.com/lijiasnong/p/3382578.html alter system enable restricted session;--创建表create ...

  9. HTML DOM 事件对象

    HTML DOM 事件对象 由 youj 创建,小路依依 最后一次修改 2016-08-04 HTML DOM 事件 HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文 ...

  10. 【转】我为什么把think in java 读了10遍

    我在想写这篇博文之前,就曾经对我媳妇(她是做web前端的)讲,我把think in java看了几次几次,媳妇那时就用很羡慕和莫名的眼神看着我说,你真有毅力,我当时就蒙了,我以为她会说,你现在基础一定 ...