面向过程
面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现， 使用的时候再一个一个的依次调用就可以了。
面向对象
面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。
1
2
3
4
5
6
7
8
9
10
11
| 面向过程
理解:亲力亲为
优点:性能高
缺点:不好维护
面向对象
理解:把一个个东西当做对象来使用(对象,往往都是被人封装好的代码)
优点:好维护,复用,扩展
缺点:性能稍低
都是一种思维
|
类
在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实 例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个， 通过类实例化一个具体的对象
创建类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
class Star{
constructor(uname){
this.uname=uname;
}
sing(song){
console.log(this.uname+song);
}
}
var ldh = new Star('刘德华');
ldh.sing('冰雨');
1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个
函数,类也会自动生成这个函数
4. 多个函数方法之间不需要添加逗号分隔
5. 生成实例 new 不能省略
6. 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需
要加function
|
类的继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
class Father{
constructor(){
}
money(){
console.log(100);
}
}
class Son extends Father{
}
var son = new Son();
son.money();
|
super
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
class Father{
constructor(x,y){
this.x=x;
this.y=y;
}
sum(){
console.log(this.x+this.y);
}
}
class Son extends Father{
constructor(x,y){
super(x,y);
}
}
var son = new Son(1,2);
son.sum();
class Father{
say(){
return '我是爸爸';
}
}
class Son extends Father{
say(){
console.log(super.say()+'的儿子');
}
}
注意:
1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用
4. 时刻注意this的指向问题,类里面的共有的属性和方法一定要加this使用
1. constructor中的this指向的是new出来的实例对象
2. 自定义的方法,一般也指向的new出来的实例对象
3. 绑定事件之后this指向的就是触发事件的事件源
5.在ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象
类里面的共有的属性和方法一定要加this使用。
|
字符串转节点添加
1
2
3
4
5
| element.insertAdjacentHTML(position, text);
'beforebegin'：元素自身的前面。
'afterbegin'：插入元素内部的第一个子节点之前。
'beforeend'：插入元素内部的最后一个子节点之后。
'afterend'：元素自身的后面。
|
选中
双击禁止选中文字
1
| window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
|
静态成员和实例成员
构造函数和原型
构造函数通过原型分配的函数是所有对象所共享的。
JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个 prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可 以共享这些方法。
1
2
3
4
5
6
7
8
9
10
11
| function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function() {
console.log('我会唱歌');
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
ldh.sing();
zxy.sing();
|
原型
1
2
3
4
5
6
7
8
9
10
11
12
| 所有对象都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
所有对象的__proto__属性指向它构造函数的prototype
所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，
共享方法
不必开辟新的空间
__proto__
|
constructor 构造函数
原型链
原型链查找规则
原型对象的this指向
1
2
| 1. 构造函数中,this指向是实例对象
2. 原型对象里面的this指向的也是实例对象
|
扩展内置对象方法
1
2
3
4
5
6
7
8
9
10
| Array.prototype.sum = function(){
var sum=0;
for(var i = 0 ;i<this.length;i++){
sum += this[i];
}
return sum;
}
var arr = [1,2,3]
console.log(arr.sum());
|
call方法
借用父构造函数继承属性
1
2
3
4
5
6
7
8
9
10
11
| function Father(uname,age){
this.uname=uname;
this.age=age;
}
function Son(uname,age){
Father.call(this,uname,age);
}
Son.prototype = new Father();
Son.prototype.constructor = Son;
|
类的本质
ES5新增方法
数组方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| array.forEach(function(value,index,array){
})
var newArr = array.filter(function(value,index,array){
return value % 2 === 0;
})
var flag = array.some(function(value,index,array){
return value >= 20;
})
var flag = array.every(function(value,index,array){
return value >= 20;
})
var flag = array.map(function(value,index,array){
return value + 1；
})
|
字符串方法
对象方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| Object.keys(obj);
Object.values(obj);
Object.entries(obj);
Object.defineProperty
Object.defineProperty(obj，'修改或新增的属性名'，{
get:function(){},
set:function(anotherVariable){},
value:修改或新增的属性的值 (默认undefined),
writable:true/false,
enumerable: false,
configurable: false
})
|
函数的定义和调用方式
1
2
| var fn = new Function('a','b','console.log(a+b)');
f(1,2);
|
改变函数内部this指向
1
2
3
4
5
6
| .call(obj,a,b)
.apply(obj,[a,b])
.bind(obj,a,b)
|
严格模式
1
2
3
4
| 1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
2.消除代码运行的一些不安全之处，保证代码运行的安全。
3.提高编译器效率，增加运行速度。
4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<script>
'use strict';
</script>
<script>
(function(){
'use strict';
})() ;
</script>
<script>
function(){
'use strict';
}
</script>
|
严格模式的变化
高阶函数
闭包
递归函数
深浅拷贝
1
2
3
4
| Object.assign(新对象,老对象)
|
正则表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| var regexp = new RegExp(/123/);
var rg = /123/;
rg.test(str);
1.
包含
2. 边界符 ^ $
^ 开头
$ 结尾
3. [] 限定 其中的一个
[-] 范围
[a-z] 26个英文字母(小写)
[a-zA-Z0-9_-] 26个英文字母(大小写)和数字和下划线
[^] 取反
4. 量词符 设定某个模式出现的次数
*
+
?
{x}
{x,}
{,x}
{x,y}
5. () 表示优先级
6. 预定义类
\d
\D
\w
\W
\s
\S
7. 或者 |
|
replace替换
1
2
3
4
5
| str.replace('abc','baby')
str.replace(/abc/,'baby')
str.replace(/abc/g,'baby')
str.replace(/abc/i,'baby')
str.replace(/abc/gi,'baby')
|
其他
1
| Object.create:用来创建对象，创建出来的对象的原型指向第一个形参
|
