JavaScript - 面向对象编程总结

Flavor_
1,165 阅读9分钟

面向对象编程介绍

  1. 面向过程编程： 朝着步骤实现
  2. 向对象编程 OOP：以对象功能来划分问题，而不是步骤
  3. 特点：封装性，继承性，多态性

ES6中的类和对象

思维特点：

  1. 取对象共用的属性和行为组织（封装）成一个类
  2. 对类进行实例化，获取类的对象

  • 对象：是一组无序的相关属性和方法的集合 ，所有事物都是对象（）是一个具体的事物 对象是由属性和方法组成

  • 类 class 抽象了对象的公共部分，泛指的某一大类class

  • 创建类

      class name{

  }
  new Star();

  • 类 constructor构造函数

  • 类添加方法： 类里面的函数不需要加function 多个函数之间不需要添加逗号

类的继承

  1. 关键字 extends
  2. super 关键字 ：可以调用父级的构造函数 super(x,x)也可以调用父级的普通函super.say()
  3. 继承中的属性或者方法查找原则：就近原则
  4. 子类继承父类方法同时拓展自己方法 super() 必须放在this的前面

使用类注意事项

  1. 在ES6中类没有变量提升，所以必须先定义类，才能通过类实例化对象
  2. 类里面的共有的属性和方法一定要加this使用
  3. 类里面this的指向问题：构造方法中this指向的是实例化对象 谁调用this就指向谁

补充：

  • insertAdjacentHTML(position,text) 可以直接把字符串格式元素追加到父元素中
  • appendChild 不支持字符串追加子元素
  • element.click() 自动调用点击事件 不需要鼠标触发
  • ondblclick 双击事件
  • input.select() 让表单里边的文字处于选定状态
  • window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()双击禁止选中文字

一、构造函数和原型

1.构造函数

  • 不可以通过构造函数来访问实例成员
  • 静态成员在构造函数本身上添加的成员,只能通过构造函数来访,不能通过对象来访问 2.构造方法:存在浪费内存的问题

3.构造函数原型prototype （原型对象）

每个构造函数都有一个prototype属性，指向另一个对象,这个prototype是个对象,该对象所有的属性和方法,都会被构造函数所拥有

把不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这一方法

面试问答：

  1. 原型是什么？ 一个对象，我们也称为prototype为原型对象
  2. 原型的作用是什么？ 共享方法 一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上

4.对象原型 __proto__两个下划线

对象都有一个属性 __proto__ 指向构造函数的prototype原型对象

ldh.__proto__ === Star.prototype

方法的查找原则：首先看ldh 对象身上是否有sing方法，如果有就执行这个对象上的sing方法，如果没有sing这个方法，因为有__proto__的存在，就去构造函数原型对象prototype身上去查找sing这个方法

5.constructor 构造函数 很多情况下，我们需要手动的利用constructor 这个属性指挥原来的构造函数

如果我们修改了原来的原型对象，给原型对象赋值一个对象，则必须手动的利用constructor指挥原来的构造函数

构造函数，实例，原型对象三者的关系：

每个构造函数都有一个原型对象，原型对象上包含着一个指向构造函数的指针，而实例都包含着一个指向原型对象的内部指针。通俗的说，实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。

7.原型链

我们Star原型对象里面的__proto__原型指向的是 Objet.prototype Objet.prototype原型对象里面的__proto__原型 指向为 null

8.js的成员查找机制（规则） 即按原型链查找（就近原则)

9.原型对象中this指向问题

  • 在构造函数中，里面的this指向的是对象实例
  • 原型对象函数里面的this 指向的是 实例对象 10.扩展内置对象

注意：数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype={} 只能Array.prototype.sum=function(){}

二、继承 ：ES6之前 构造函数+原型对象 模拟实现继承 被称为组合继承

1.call() 调用这个函数，并且修改函数运行时的this指向

fun.call(thisArg,arg1,arg2,..)
  • thisArg:当前调用函数this的指向对象
  • arg1，arg2：传递其他参数 2.借用构造函数继承父类型属性

核心原理：通过call() 把父类型的this指向子类型的

子构造函数中： Father.call(this, uname, age)

3.借用原型对象继承父类型属性

Son.prototype = Father.prototype 这样直接赋值会有问题，如果修改了子原型对象，父原型对象也会跟着一起修改

  Son.prototype = new Father();

如果利用对象形式修改了原型对象，别忘了利用constructor 指回原来的构造函数

  Son.prototype.constructor = Son;

三、ES5新增方法

1.概述

数组方法 字符串方法 对象方法

2.数组方法

迭代（遍历）方法：forEach(),map(),filter(),some(),every()

  • array.forEach(function(value:数组当前项的值,index:数组当前项的索引,array:数组对象本身))

  • filter()方法创建一个新的数组，主要用于筛选数组 注意它直接返回一个新数组

      var newArr=array.filter(function(value,index,array){
          return value > ?;
  })

  • some()方法用于检测数组中的元素是否满足指定条件，通俗点 查找数组中是否有满足 条件的元素 注意它返回值是布尔值，如果查找到这个元素，就返回true 否则 返回false

      var flag=array.some(function(value,index,array){
          return value > ?;
  })

    如果查询一个满足条件的元素，用some更高效

3.字符串方法 : 应用于判断用户输入是否为空

  • trim()方法会从一个字符串的两端删除空白符
  • str.trim() 返回一个新字符串 4.对象方法 var arr=Object.keys(obj) 用于获取对象自身的所有属性 类似 for...in 返回一个有属性名组成的数组

Object.defineProperty(obj :目标对象,prop :目标属性,descriptor :属性特性) 新增属性或者修改原有的属性

第三个属性里面 value: 设置值

  • writable：false // 不允许修改这个属性值 默认值为false
  • enumerable： false //目标属性是否可以被枚举/被遍历
  • configurable：false 目标属性是否可以被删除或是否可以再次修改特性

函数定义： new Function()

this

一.改变函数内部this指向

  1. call() 方法

  2. apply() 方法

    fun.apply(thisArg,[数组])

主要应用：利用apply 借助于数学内置对象求最大值 Math.max()

var max=Math.max().apply(Math,arr);

3.bind() 方法 和call() 一样

最大区别 绑定函数，不会调用函数， 返回值是原函数改变this之后产生的新函数 应用：如果有的函数我们不需要立即调用，但是又想改变这个函数内部的this指向 用bind() 方法

严格模式

一、什么是严格模式 IE10以上，严格条件下执行js代码

二、开启严格模式

1.为脚本开启严格模式

'use strict'

2.为函数开启严格模式 / 给某一个函数开启

function fn(){
   'use strict'
}

3.严格模式中的变化

  • 变量规定 ： 先声明后使用 ， 严禁删除已声明的变量
  • 严格模式下this指向问题
    1. 严格模式下全局作用域中函数this 指向的是 undefined
    2. 严格模式下，如果 构造函数不加new 调用， this 会报错
    3. 严格模式下，定时器this 指向还是window
  • 函数变化
    1. 严格模式下，不允许函数中的参数重名
    2. 严格模式下，不允许在非函数的代码块内声明函数

高阶函数

接受函数作为参数/将函数作为返回值输出

调用回调函数： callback && callback()

闭包

1.变量作用域

2.闭包（closure）： 是指有权访问另一个函数作用域中变量的函数 简单理解：一个作用域可以访问另外一个函数的局部变量 闭包案例 3.作用： 延伸了局部变量的作用范围

递归

什么是递归？ 一个函数在内部可以调用其本身

防止栈溢出 需要加条件 return

浅拷贝：

 for(var k in obj){ 
    //k 是属性名  obj[k] 是属性值
 }

或者 Object.assign(o,obj)

深拷贝： 递归思路

正则表达式

一、正则表达式概述 -- 对象

  1. 什么是正则表达式： 用于匹配字符串中字符组合的模式 验证表单，中文匹配，过滤敏感词，提取特定部分
  2. 特点： 灵活性 逻辑性 功能性 二、正则表达式在js中的使用

1.创建正则表达式

  1. 通过 RegExp对象创建
  2. 利用字面量创建 2.测试正则表达式 test() regexObj.test(str) 三、正则表达式的特殊字符

1.正则表达式的组成 : 特殊符号

2.边界符：用来提示字符所处的位置

  • ^:表示匹配行首的文本
  • $:表示匹配行尾的文本 3.字符类：
  • [ ]表示有一系列字符可以供选择，只要匹配到其中一个就行
  • /^[abc]&/ 三选一
  • [a-z] 连接 a到z 26个字母
  • [a-zA-Z0-9_] 大小写都可以 数字也可以 _也可以
  • [^ ] //中括号里面的^ 表示取反的意思 ，注意与边界符^ 区分 4.量词符
  • * 重复零次或更多次
  • + 重复一次或更多次
  • ？ 重复零次或一次
  • {n} 重复n次
  • {n,} 重复n次或更多次
  • {n,m} 重复n到m次 5.括号总结
  • /^[abc]&/ 三选一
  • /^abc{3}$/ reg.test('abccc') 只能c重复三次
  • /^(abc){3}$/ 小括号表示优先级 让abc重复三次

菜鸟工具 在线测试： c.runoob.com/

6.预定义类

  • \d 匹配0-9之间的任一数字，相当于[0-9]
  • \D 匹配所有0-9以外的字符，相当于[^0-9]
  • \w 匹配任意的字母，数字和下划线， 相当于[A-Za-z0-9_]
  • \W 匹配任意的字母，数字和下划线以外的字符， 相当于[^A-Za-z0-9_]
  • \s 匹配空格（包括换行符，制表符，空格符等），相当于[\t\r\n\v\f]
  • \S 匹配非空格的字符，相当于[^\t\r\n\v\f]
  • 正则里面或者符号 |

四、正则表达式中的替换

1.replace 替换

str.replace(正则表达式/要被替换的字符串，新的字符串)

2.正则表达式参数
/表达式/[switch: g 全局匹配 / i 忽略大小写 / gi ]

屏蔽敏感词：

 str.replace(/激情 | gay/g,'**');
avatar
文章
阅读
粉丝