JavaScript高级 4.23

JS高级

1.类和对象

1.1constructor构造函数（共用属性）

constructor()是类的构造函数，用于传递参数，返回实例对象。如果没有显示定义，类内部会自动创建constructor()
类名一般首字母大写

1.2添加方法（共有方法）

• 方法名()
• 函数不写function
• 多个方法之间不需要逗号分隔

1.3类的继承

子类继承父类的一些属性和方法：class Son extends Father

1.3.1super关键字

• 用于访问和调用对象父类上的函数，可以调用父类的构造函数和普通函数
• 继承中，实例化子类输出的方法，先看子类有没有这个方法，有先执行子类
• 如果子类没有，去父类查找（就近原则）
• super必须在子类定义之前调用，即在this前面

1.4注意

• 先定义类再实例化
• 类里面的共有属性和方法要加this使用
• this指向：constructor里面的this指向实例对象，方法里面的this指向调用者，实例对象

1.5类的本质

类的本质是函数，可以理解为构造函数的另一种写法

2.构造函数和原型

2.1概述

ES6之前没有类的概念，通过构建函数的特殊函数来定义对象和特征

2.2构造函数

初始化对象，与new一起使用。

• 创建对象时首字母大写
• 与new一起使用
• new：
  内存中创建新的空对象
  this指向新对象
  执行构造函数里的代码，添加属性和方法
  返回新对象（不需要return）

2.3实例成员

构造函数内部通过this添加的成员，只能通过实例化的对象来访问

2.4静态成员

在构造函数本身上添加的成员，只能通过构造函数来访问

2.5原型prototype

构造函数通过原型分配的函数是所有对象共享的，每个构造函数中都有prototype属性，不需开辟额外的内存空间来存储函数

class.prototype.方法 = function(){}

2.6对象原型_proto_

对象都有_proto_属性，指向构造函数的原型对象
若修改了原来的原型对象，并且以对象的形式赋值，则需要手动添加constructor：原来的构造函数

2.7构造函数和原型对象的关系

2.8原型链

Star原型对象里的_proto_指向Object.prototype
Object原型对象里的_proto_指向null

2.9成员查找机制

• 查找对象自身的属性或方法
• 没有则查找原型
• 还没有查找原型对象的原型(Object的原型对象)
• 直到找到Object(null)

2.10原型中this指向

原型对象函数里面的this指向实例对象即调用者

2.11扩展内置对象

通过原型对象，扩展内置对象
比如数组添加求和方法：

Array.prototype.sum = function(){}

数组和字符串内置对象不能给原型对象覆盖操作，即用对象方式赋值，应采取上述操作

2.12继承

ES6之前没有extends继承，通过构造函数+原型函数的方式继承，称为组合继承

2.12.1call()

调用函数并修改函数运行时this的指向

fun.call(thisArg,arg1,arg2,...)

• thisArg:当前调用函数this的指向对象
• arg1:其他参数

2.12.2借用构造函数继承父类属性

通过call()把父类型的this指向子类型的this

2.12.3借用构造函数继承父类方法

Son.prototype = new Father()；
Son.prototype.constructor = Son；

3.ES5新增方法

3.1数组方法

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

array.forEach(function(currentValue,index,arr))

• currentValue:数组当前项的值
• index:当前项索引号
• arr:数组对象本身
  filter()：筛选数组，返回新数组

array.filter(function(currentValue,index,arr))

some():检测数组中满足指定条件的元素，返回布尔值,找到第一个满足条件的元素就终止

array.some(function(currentValue,index,arr))

forEach里面的return不会终止循环

3.2字符串方法

trim()删除字符串两端的空白字符，不影响字符串本身，返回新字符串

str.trim()

3.3对象方法

Object.defineProperty()定义对象新属性或修改属性

Object.defineProperty(obj,prop,descriptor)

• obj:必需，目标对象
• prop：必需，需要定义或修改的属性名
• descriptor：必需，目标属性拥有的特性{
  value:属性值
  writable：值是否可以重写，默认false
  enumerable：是否可以枚举（遍历），默认false
  configurable：是否可以被删除或再次修改，默认false
  }

Object.keys()获取对象自身所有的属性

Object.keys(obj)

• 效果类似for……in……
• 返回一个新数组

4.函数进阶

4.1函数定义

• 自定义函数（命名函数）
  function fn() {};
• 函数表达式（匿名函数）
  var fun = function() {};
• 新增：new Function(‘参数1’,‘参数2’，‘函数体’);
  里面参数必须为字符串的形式
  所有函数都是Function的实例

4.2函数调用

• 普通函数：fn() 或 fn.call()
• 对象的方法: obj.fn()
• 构造函数：new Star();
• 绑定事件函数：触发事件即调用
• 定时器函数：定时器自动调用
• 立即执行函数：自动调用

4.3this指向

4.3.1改变函数内部this指向

• call()

fun.call(thisArg,arg1,arg2,...)

• apply()

fun.apply(thisArg,[argsArray])

参数必须为数组（伪数组）形式
主要应用：借助数学内置对象处理数组

var arr= [1,5,6,33];
Math.max.apply(null,arr)

• bind()

fun.bind(thisArg,arg1,arg2,...)

不会调用函数，返回由指定的this值和初始化参数改造的原函数拷贝
若有的函数不需要立即调用，但又想改变函数的this指向，此时用bind()，在函数后面加bind()

5.严格模式

5.1概念

IE10以上支持：

• 消除JS中不合理、不严格的地方
• 消除代码的不安全之处
• 提高编译效率，增加运行速度
• 禁用了ECMAScript未来版本中可能会定义的语法，class、extends等不能做变量名

5.2开启严格模式

5.2.1脚本开启

‘use strict’

5.2.2函数开启

函数第一行’use strict’

5.3严格模式中的变化

5.3.1变量

• 禁止未声明就赋值
• 严禁删除已声明变量

5.3.2this指向

• 全局作用域中this指向undefined
• 构造函数不使用new调用，this会报错
• 定时器的this还是指向window

5.3.3函数

• 函数不能有重名的参数
• 函数声明必须在顶层，不允许在非函数代码块中声明，如if，for

6.高阶函数

对其他函数进行操作的函数，接收函数作为参数或将函数作为返回值输出

7.闭包

定义：有权访问另一个函数作用域中变量的函数（闭包是函数）
被访问的局部变量所在的函数称为闭包函数
作用：扩大了变量的作用范围

8.递归

函数内部自己调用自己

9.深拷贝和浅拷贝

• 浅拷贝只拷贝一层，更深层次对象级别的只拷贝引用

Object.assign(target,sources)

• 深拷贝拷贝多层，每一级别的数据都会拷贝

10.正则表达式

10.1概念

用于匹配字符串中字符组合的模式，属于对象。

10.2在JS中的使用

10.2.1创建

	var 变量名 = new RegExp(/表达式/);

或

	var 变量名 = /表达式/;

10.2.2测试正则表达式test

test()检测字符串是否符合规则，返回布尔值

	regexObj.test(str)

10.3特殊字符

10.3.1组成

特殊字符也称为元字符，如^、$、+等

• 边界符：
  ^：匹配行首的文本
  $：匹配行尾的文本
  ^abc $表示是精确匹配，只能是abc
• 字符类：
  [ ]：表示有一系列字符供选择，只要匹配一个即可
  ^ [abc ]$：三选一，只能是a或b或c
  [ a-z ]：表示a到z字母
  字符组合：[a-zA-Z0-9_-]表示英文字符数字_-都可以
  [ ]中的^表示取反，不能取其中的值
• 量词符：
  *：相当于>=0,可以出现0次或很多次
  +：相当于>=1
  ?：相当于 1 | | 0
  {n}：重复n次
  {n,}：大于等于n次
  {n,m)：大于等于n，小于等于m，中间没有空格
  ^ [a-zA-Z0-9_-]&{n,m}：表示n到m个英文字符数字_-
  /^abc{3}$/：表示c重复3次
• 小括号：优先级
• 预定义类：
  \d:相当于[0-9]
  \D:相当于[ ^0-9]
  \w:相当于[A-Za-z0-9_]
  \W:相当于[ ^A-Za-z0-9_]
  \s:匹配空格（换行符，制表符，空格符等），相当于[\t\r\n\v\f]
  \S:匹配非空格，相当于[ ^\t\r\n\v\f]

10.4replace替换

	stringObject.replace(regexp/substr,replacement)

regexp/substr：被替换的字符串或正则表达式
replacement：替换为的字符串
返回一个新字符串，用于筛选敏感词

正则表达式参数

	/表达式/[switch]

switch参数

• g：全局匹配
• i：忽略大小写
• gi：全局+忽略大小写

11.ES6

ES6泛指15年之后发布的版本

11.1关键字let

• let声明的变量只在块级作用域生效，局部变量；var声明的变量不具有块级作用域特点
• 不存在变量提升：先声明再使用
• 暂时性死区：let声明的变量暂时只存在与块级作用域

11.2关键字const

声明常量，即值（内存地址）不变的量

• 具有块级作用域
• 必须赋初始值
• 赋值后，值不能修改，复杂数据类型可修改值，因为没有改变地址，不能重新赋值

11.3解构赋值

11.3.1数组解构

从数组中提取值，按对应位置对变量赋值，对象也可以实现解构

	let [a,b,c] = [1,2,3];
	/*a=1;
	  b=2
	  c=3;*/

解构不成功，未赋值的变量为undefined

	let [a,b,c,d] = [1,2,3];
	//d为undefined

11.3.2对象解构

	let person = { name:'zh',age:18};
	let { name,age } = person;

	let person = { name:'zh',age:18};
	let { name:myName,age:myAge } = person;//赋值给myName和myAge

11.4箭头函数

定义函数的方式，简化函数定义语法

	() => {}
	const fn = () => {}

• 函数体中只有一句代码，且代码执行结果为返回值，可省略大括号

	const sum = (num1,num2) => num1 + num2;

• 如果形参只有一个，可省略小括号

	const fn = i => i;
	/* function fn (i) {
	 			return i;
	 	}

• 箭头函数中的this指向函数定义位置的上下文this（对象不产生作用域）

11.5剩余参数

将不定数量的参数表示为一个数组,可与数组解构相结合

	function sun (first,...args){
		console.log(first);    //10
		console.log(args);	   //[20,30]即剩余参数
	}
	sum(10,20,30);

11.6Array扩展方法

11.6.1扩展运算符

…将数组或对象转为用逗号分隔的参数序列，console.log()输出时没有逗号，是因为逗号被当做参数分隔符

	let arr = ['a','b','c'];
	console.log(...arg);  //a b c

应用：合并数组

	let arr1= [1,2,3];
	let arr2= [3,4,5];
	let arr3= [...arr1,...arr2];

	let arr1= [1,2,3];
	let arr2= [3,4,5];
	arr1.push(...arr2);

将伪数组转化为真正的数组

	let oDivs = document.getElementByTagName('div');
	oDivs = [...oDivs];

11.6.2构造函数方法

Array.from()将伪数组或可遍历对象转换为数组

	let arr = Array.from(arrLike);

Array.from()还可接收第二个参数，对每个元素进行处理，放回返回的数组

11.6.3find()方法

找出第一个符合条件的数组成员，没找到返回undefined

	let target = ary.find( item => item.id == 2)

11.6.4findIndex()方法

找出第一个符合条件的数组成员的位置，没找到返回-1

11.6.5includes()方法

查找某个数组是否包含给定的值，返回布尔值

	[1,2,3].includes(2);   //true

11.7字符串扩展方法

11.7.1模板字符串

	let name = `modestr`;

• 模板字符串中可解析变量

	let name = 'zh';
	let say = `my name is ${name}`;

• 模板字符串可换行
• 可调用函数，也使用${ fn() }

11.7.2startsWith()和endWith()

• startsWith():表示参数字符串是否在原字符串的头部，返回布尔值
• endWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

11.7.3repeat()方法

表示将原字符串重复n次，返回新字符串

	z.repeat(3);   //333

11.8Set数据结构

类似数组，但成员值唯一，不可重复,size为数据个数

	const s1 = new Set(['a','b']);
	console.log(s1.size);    //2

• 数组去重：初始赋值时会去除重复数值

	const s2 =new Set(['a','b','b']);
	const arr = [...s2];   //a,b

• 实例方法
  add(value)：返回本身
  delete(value)：返回布尔值，表示是否删除成功
  has(value)：查找是否为Set成员，返回布尔值
  clear()
• 遍历

	set.forEach(value => console.log(value))