面向对象编程
创建类
语法： class name {
// class body
}
示例：var xx = new name(); // 类必须使用 new 实例化对象
类 constructor 构造函数
constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过 new 命令生成对象实例时
，自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor()
语法：
class Person {
constructor(name,age) { // constructor 构造方法或者构造函数
this.name = name;
this.age = age;
}
}
创建实例：
var ldh = new Person('刘德华', 18);
console.log(ldh.name)
在类中添加方法
直接在consract函数中添加方法即可。
注意： 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。
类的继承
语法：
class Father{ // 父类
}
class Son extends Father { // 子类继承父类
}
super 关键字
super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数
语法：
class Father {
constructor(surname) {
this.surname = surname;
}
saySurname() {
console.log('我的姓是' + this.surname);
}
}
class Son extends Father { // 这样子类就继承了父类的属性和方法
constructor(surname, fristname) {
super(surname); // 调用父类的constructor(surname)
this.fristname = fristname;
}
sayFristname() {
console.log("我的名字是：" + this.fristname);
}
}
var damao = new Son('刘', "德华");
damao.saySurname();
damao.sayFristname();
注意: 子类在构造函数中使用super, 必须放到 this 前面 (必须先调用父类的构造方法,在使用子类构造方法)
ES6 中的类和对象
- 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
- 类里面的共有属性和方法一定要加this使用.
- 类里面的this指向问题.
constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者
一些高级方法：
insertAdjacentHTML(追加的位置,‘要追加的字符串元素’)
利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中
appendChild 不支持追加字符串的子元素, insertAdjacentHTML 支持追加字符串的元素
构造函数和原型
构造函数原型 prototype
每一个构造函数都有一个 prototype 属性，指向另一个对象。注意这个 prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。
目的：主要是解决调用构造函数是对方法的调用产生重复，造成存储浪费
总结：一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上。
存储多个方法的prototype对象原型
当prototype对象原型需要存储多个方法时，需要以对象的形式存储方法和相关属性。就需要对构造函数的对象原型进行修改，如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数。
<script>
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
// 很多情况下,我们需要手动的利用constructor 这个属性指回 原来的构造函数
// Star.prototype.sing = function() {
// console.log('我会唱歌');
// };
// Star.prototype.movie = function() {
// console.log('我会演电影');
// }
Star.prototype = {
// 如果我们修改了原来的原型对象,给原型对象赋值的是一个对象,则必须手动的利用constructor指回原来的构造函数
constructor: Star,
sing: function() {
console.log('我会唱歌');
},
movie: function() {
console.log('我会演电影');
}
}
</script>
原型链
JavaScript 的成员查找机制(规则)
① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
② 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）。
③ 如果还没有就查找原型对象的原型（Object的原型对象）。
④ 依此类推一直找到 Object 为止（null）。
⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线。
原型函数中的this指向问题
- 原型对象里面放的是方法, 这个方法里面的this 指向的是 这个方法的调用者, 也就是这个实例对象.
- 而构造函数里的this的指向也是实例对象
继承
call()
调用这个函数, 并且修改函数运行时的 this 指向
语法：fun.call(thisArg, arg1, arg2, …)
- thisArg ：当前调用函数时 this 的指向对象
本参数填写的变量即为this所指向的对象 - arg1，arg2：传递的其他参数
借用构造函数继承父类型属性
// 父类
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
// 子类
function Student(name, age, sex, score) {
Person.call(this, name, age, sex); // 此时父类的 this 指向子类的 this，同时调用这个函数
this.score = score;
}
var s1 = new Student('zs', 18, '男', 100);
console.dir(s1);
ES5 中的新增方法
数组方法
forEach（）方法：array.forEach(function(currentValue, index, arr))
解释：遍历迭代，类似于jq中的each
currentValue：数组当前项的值
index：数组当前项的索引
arr：数组对象本身
array.filter(function(currentValue, index, arr))
解释： filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组， 注意它直接返回一个新数组
参数解释同上
// filter 筛选数组
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index) {
// return value >= 20;
return value % 2 === 0;
});
console.log(newArr);
array.some(function(currentValue, index, arr))
解释：some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素，注意它返回值是布尔值, 如果查找到这个元素, 就返回true , 如果查找不到就返回false. 如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
字符串方法
str.trim()
trim() 方法会从一个字符串的两端删除空白字符注意：字符串中间的空格不会受删除影响
trim() 方法并不影响原字符串本身，它返回的是一个新的字符串
#对象方法
Object.keys(obj)
Object.keys() 方法返回一个所有元素为字符串的数组。
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(value) {
console.log(value);
})
Object.defineProperty(obj, prop, descriptor)
Object.defineProperty() 第三个参数 descriptor 说明：
value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
Object.defineProperty(obj, 'address', {
value: '中国山东蓝翔技校xx单元',
// 如果只为false 不允许修改这个属性值 默认值也是false
writable: false,
// enumerable 如果值为false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为false
configurable: false
});
函数进阶
函数的定义和调用
函数调用的归纳
// 1. 普通函数
function fn() {
console.log('人生的巅峰');
}
// fn(); fn.call()
// 2. 对象的方法
var o = {
sayHi: function() {
console.log('人生的巅峰');
}
}
o.sayHi();
// 3. 构造函数
function Star() {};
new Star();
// 4. 绑定事件函数
// btn.onclick = function() {}; // 点击了按钮就可以调用这个函数
// 5. 定时器函数
// setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次
// 6. 立即执行函数
(function() {
console.log('人生的巅峰');
})();
// 立即执行函数是自动调用
函数内 this 的指向归纳
改变函数内部 this 指向
fun.apply(thisArg, [argsArray])
apply() 方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的 this 指向
thisArg：在fun函数运行时指定的 this 值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值
fun.bind(thisArg, arg1, arg2, ...)
bind() 方法不会调用函数。但是能改变函数内部this 指向
thisArg：在 fun 函数运行时指定的 this 值
arg1，arg2：传递的其他参数
返回由指定的 this 值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind
call apply bind 总结
相同点:
都可以改变函数内部的this指向.
区别点:
- call 和 apply 会调用函数, 并且改变函数内部this指向.
- call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply 必须数组形式[arg]
- bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景: - call 经常做继承.
- apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
- bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
严格模式
为脚本开启严格模式
为整个脚本文件开启严格模式，需要在所有语句之前放一个特定语句“use strict”;（或‘use strict’;）。
有的 script 基本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件
放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他 script 脚本文件
一、
<script>
"use strict";
console.log("这是严格模式。");
</script>
二、立即执行函数
<script>
(function (){
"use strict";
var num = 10;
function fn() {}
})();
</script>·
为函数开启严格模式
要给某个函数开启严格模式，需要把“use strict”; (或 ‘use strict’; ) 声明放在函数体所有语句之前
function fn(){
"use strict";
return "这是严格模式。";
}
严格模式中的变化
1. 变量规定
① 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，变量都必须先用
var 命令声明，然后再使用。
② 严禁删除已经声明变量。例如，delete x; 语法是错误的。
严格模式下 this 指向问题
① 以前在全局作用域函数中的 this 指向 window 对象。
② 严格模式下全局作用域中函数中的 this 是 undefined。
③ 以前构造函数时不加 new也可以 调用,当普通函数，this 指向全局对象
④ 严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错
⑤ new 实例化的构造函数指向创建的对象实例。
⑥ 定时器 this 还是指向 window 。
⑦ 事件、对象还是指向调用者。
3. 函数变化
① 函数不能有重名的参数。
② 函数必须声明在顶层.新版本的 JavaScript 会引入“块级作用域”（ ES6 中已引入）。为了与新版本接轨，
不允许在非函数的代码块内声明函数。
高阶函数
高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出。
<script>
function fn(callback){
callback&&callback();
}
fn(function(){alert('hi')}
</script>
<script>
function fn(){
return function() {}
}
fn();
</script>
此时fn 就是一个高阶函数
函数也是一种数据类型，同样可以作为参数，传递给另外一个参数使用。 最典型的就是作为回调函数。
同理函数也可以作为返回值传递回来
浅拷贝
es6新增浅拷贝函数：
Object.assign(o, obj);
o为拷贝的目的对象，obj为被拷贝的对象
正则表达式
创建正则表达式
- 通过调用 RegExp 对象的构造函数创建
var 变量名 = new RegExp(/表达式/); - 通过字面量创建
var 变量名 = /表达式/; // 注释中间放表达式就是正则字面量
测试正则表达式 test
test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串
语法： regexObj.test(str)
- regexObj 是写的正则表达式
- str 我们要测试的文本
- 就是检测str文本是否符合我们写的正则表达式规范.
正则表达式特殊字符
边界符
如果 ^ 和 $ 在一起，表示必须是精确匹配。
例如：
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false
字符类
语法：/[abc]/.test('andy') // true
字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。
后面的字符串只要包含 abc 中任意一个字符，都返回 true 。
语法：/^[a-z]$/.test(c') // true
方括号内部加上 - 表示范围，这里表示 a 到 z 26个英文字母都可以。
语法：/[^abc]/.test('andy') // false
方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false
注意和边界符 ^ 区别，边界符写到方括号外面
量词符
量词是设定某个模式出现的次数
var reg = /^[a-zA-Z0-9_-]{6,16}$/;设定该模式能输入6到16次
预定义类
replace 替换
语法：stringObject.replace(regexp/substr,replacement)
replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式
- 第一个参数: 被替换的字符串 或者 正则表达式
- 第二个参数: 替换为的字符串
- 返回值是一个替换完毕的新字符串
正则表达式参数
语法/表达式/[switch]
switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：
g：全局匹配
i：忽略大小写
gi：全局匹配 + 忽略大小写
ES6
关键字
let关键字
- let声明的变量只在所处于的块级有效
注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性 - 不存在变量提升
- 暂时性死区
var num = 10
if (true) {
console.log(num);
let num = 20;
}
解释：在大括号内用let定义了变量num，意味着本块大括号与num变量进行了绑定，不会再向上级作用域寻找num，即会报出未定义变量num的错
const关键字
作用：声明常量，常量就是值（内存地址）不能变化的量。
- 具有块级作用域
- 声明常量时必须赋值
- 常量赋值后，值不能修改。
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b'];
ary = ['a', 'b']; // Assignment to constant variable.
解释：const声明常量就是声明其地址，在复杂数据类型中，不改变其变量地址的时候可以改变内部元素的值，但是如例子中的直接对数组进行赋值的操作是错误的，因为他直接改变了整个数组的变量的地址
三种关键字对比
在不需要更改变量的时候使用const效率更高，因为他不用实时监视变量的变化。
解构赋值
按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量。
数组解构
let [a, b, c] = [1, 2, 3];
console.log(a)
console.log(b)
console.log(c)
如果解构不成功，变量的值为undefined
对象解构
let person = { name: 'zhangsan', age: 20 };
let { name, age } = person;
console.log(name); // 'zhangsan'
console.log(age); // 20
let {name: myName, age: myAge} = person; // myName myAge 属于别名 name与person对象中的name属性进行匹配，匹配成功则将其值赋给myAge
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
箭头函数
语法：() => {}
const fn = () => {}
函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
function sum(num1, num2) {
return num1 + num2;
}
const sum = (num1, num2) => num1 + num2; //本条语句与上个函数实现相同的功能
如果形参只有一个，可以省略小括号
function fn (v) {
return v;
}
const fn = v => v;
箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。
const obj = { name: '张三'}
function fn () {
console.log(this);
return () => {
console.log(this)
}
}
const resFn = fn.call(obj);
resFn();
输出为obj对象
剩余参数
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
function sum (first, ...args) { //把sum中除了前面元素（first）对应的变量外，剩余的变量全部赋值给args，arge即为一个承载剩余变量的数组[20,30]
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
剩余参数和解构配合使用
let students = ['wangwu', 'zhangsan', 'lisi'];
let [s1, ...s2] = students;
console.log(s1); // 'wangwu'
console.log(s2); // ['zhangsan', 'lisi']
Array 的扩展方法
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
let ary = [1, 2, 3];
...ary // 1, 2, 3
console.log(...ary); // 1 2 3
console.log(1, 2, 3) //与上一行的输出结果相同
扩展运算符可以应用于合并数组。
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];
// 方法二
ary1.push(...ary2);
将类数组或可遍历对象转换为真正的数组
var oDivs = document.getElementsByTagName('div');
console.log(oDivs)//输出的是伪数组
var ary = [...oDivs];//转换为真正的数组
ary.push('a');//只有转换为真正的数组以后才能使用数组对象的属性和方法
console.log(ary);
构造函数方法：Array.from()
将类数组或可遍历对象转换为真正的数组
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
实例方法：find()
用于找出第一个符合条件的数组成员，如果没有找到返回undefined
let ary = [{
id: 1,
name: '张三‘
}, {
id: 2,
name: '李四‘
}];
let target = ary.find((item, index) => item.id == 2);//公式
item：当前循环到的值，index：当前循环的索引
用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
实例方法：includes()
表示某个数组是否包含给定的值，返回布尔值。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
String 的扩展方法
模板字符串
ES6新增的创建字符串的方式，使用反引号定义。
let name = `zhangsan`;
模板字符串中可以解析变量
语法：在反引号中加入${变量名}即可引入变量
let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan
模板字符串中可以换行
let result = {
name: 'zhangsan',
age: 20,
sex: '男'
}
let html = ` <div>
<span>${result.name}</span>
<span>${result.age}</span>
<span>${result.sex}</span>
</div> `;//在控制台的显示也是当前格式样式，可以看着美观
在模板字符串中可以调用函数
const sayHello = function () {
return '哈哈哈哈 追不到我吧 我就是这么强大';
};
let greet = `${sayHello()} 哈哈哈哈`;
console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
实例方法：startsWith() 和 endsWith()
startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
let str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
实例方法：repeat()
repeat方法表示将原字符串重复n次，返回一个新字符串。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
Set 数据结构
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成 Set 数据结构。
const s = new Set();
Set函数可以接受一个数组作为参数，用来初始化。
const set = new Set([1, 2, 3, 4, 4]);
实例方法
add(value)：添加某个值，返回 Set 结构本身
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
has(value)：返回一个布尔值，表示该值是否为 Set 的成员
clear()：清除所有成员，没有返回值
const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2) // 删除 set 结构中的2值
s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
s.clear() // 清除 set 结构中的所有值
Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
扫一扫
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
