面向对象编程介绍

面向过程编程

面向过程,就是按照我们分析好了的步骤,按照步骤解决问题

面向过程编程(Procedure Oriented Programming, POP)就是分析出解决问题所需的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。

面向对象编程

面向对象,就是以对象功能来划分问题,而不是步骤

面向对象编程(Object Oriented Programming, OOP)是把事务分解成一个个对象,然后由对象之间分工与合作。

面向过程与面向对象的对比

  1. 面向过程
    • 优点:性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程
    • 缺点:没有面向对象易维护、易复用、易扩展
  2. 面向对象
    • 优点:易维护、衣服用、易扩展,由于面向对象有封装、继承、多态性等特点,可以设计出低耦合的系统,使系统更灵活,更好维护
    • 缺点:性能比面向过程低

ES6 中的类和对象

对象是由属性和方法组成的:

  • 属性:事物的特征,在对象中用属性来表示(常用名词)
  • 方法:事物的行为,在对象中用方法来表示(常用动词)

类 class

在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象
类抽象了对象的公共部分,它泛指某一大类,对象特指某一个通过类实例化具体的对象

  1. 抽取对象共用的属性和行为组织(封装)成一个类
  2. 对类进行实例化,得到具体的对象

创建类

类必须使用 new 实例化对象

1
2
3
4
5
class Name {
// class body
}

var xx = new Name();

构造函数 constructor

constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例化对象,通过 new 命令生成对象实例时,自动调用该方法,如果没有显示定义,类内部会自动给我们创建一个 constructor()

1
2
3
4
5
6
7
8
9
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}

var ldh = new Person('刘德华', 18);
console.log(ldh.name);

添加方法

方法之间不能加逗号分隔,同时方法不需要添加 function 关键字

1
2
3
4
5
6
7
8
9
10
11
12
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name + '你好');
}
}

var ldh = new Person('刘德华', 18);
ldh.say();

类的继承

子类可以继承父类中的一些属性和方法

1
2
3
4
5
6
7
8
9
class Father {
constructor() {}
money() {
console.log(100);
}
}
class Son extends Father {}
var son = new Son();
son.money();

super 关键字

super 关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// super 关键字调用父类普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
// console.log('我是儿子');
console.log(super.say() + '的儿子');
// super.say() 就是调用父类中的普通函数 say()
}
}
var son = new Son();
son.say();

继承中的属性或者方法查找原则: 就近原则

  1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
  2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
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
// 父类有加法方法
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 调用父类的构造函数
// super 必须在子类this之前调用
super(x, y);
this.x = x;
this.y = y;
}
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.subtract();
son.sum();

小结

  1. 类里面的 this 指向问题
  2. 类里面的共有属性和方法一定要加 this 使用
  3. constructor 里面的 this 指向实例对象,方法里面的 this 指向这个方法的调用者

综合案例-Tab 栏切换

insertAdjacentHTML

appendChild 不支持追加字符串的子元素,insertAdjacentHTML 支持追加字符串的元素

element.insertAdjacentHTML(position, text);
  • 'beforebegin':元素自身的前面。
  • 'afterbegin':插入元素内部的第一个子节点之前。
  • 'beforeend':插入元素内部的最后一个子节点之后。
  • 'afterend':元素自身的后面。
1
2
3
4
5
6
// 原为 <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 此时,新结构变成:
// <div id="one">one</div><div id="two">two</div>

ondblclick

element.ondblclick = function() { alert("触发了双击事件!"); };
1
2
3
4
5
6
7
8
9
10
// 原为来的结构为:
// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.ondblclick = function () {
this.id = 'two';
this.innerHTML = 'two';
};

// 此时,新结构变成:
// <div id="two">two</div>

构造函数和原型

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用,我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

new 在执行时会做四件事情:

  1. 在内存中创建一个新的空对象
  2. 让 this 指向这个新的对象
  3. 执行构造函数里的代码,给这个新对象添加属性和方法
  4. 返回这个新对象(所以构造函数里面不需要 return)

静态成员

JavaScript 的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的 this 上添加,就分别被称为静态成员和实例成员。

  • 静态成员:在构造函数本身上添加的成员,只能由构造函数本身来访问
  • 实例成员:在构造函数内部创建的对象成员,只能由实例化的对象来访问
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 构造函数中的属性和方法我们称为成员, 成员可以添加
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function () {
console.log('我会唱歌');
};
}
var ldh = new Star('刘德华', 18);
// 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
// 实例成员只能通过实例化的对象来访问
console.log(ldh.uname);
ldh.sing();
// console.log(Star.uname); // 不可以通过构造函数来访问实例成员
// 2. 静态成员 在构造函数本身上添加的成员 sex 就是静态成员
Star.sex = '男';
// 静态成员只能通过构造函数来访问
console.log(Star.sex);
console.log(ldh.sex); // 不能通过对象来访问

构造函数的缺点

构造函数方法很好用,但是存在浪费内存的问题

原型对象 prototype

JavaScript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象,注意这个 prototype 就是一个对象,所以我们也把 prototype 称为原型对象这个对象的所有属性和方法,都会被构造函数所拥有。因此我们可以把那些不变的方法,直接定义在 prototype 对象上,这样所有对象的实例就可以共享这些方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 1. 构造函数的问题.
function Star(uname, age) {
this.uname = uname;
this.age = age;
// this.sing = function() {
// console.log('我会唱歌');

// }
}
Star.prototype.sing = function () {
console.log('我会唱歌');
};
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(ldh.sing === zxy.sing);
// console.dir(Star);
ldh.sing();
zxy.sing();
// 2. 一般情况下,我们的公共属性定义到构造函数里面, 公共的方法我们放到原型对象身上

对象原型 __proto__

对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象,之所以我们可以使用构造函数 prototype 原型对象的属性和方法,就是因为对象有 __proto__ 原型的存在。

  • __proto__ 对象原型和原型对象 prototype 是等价的
  • __proto__ 对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象 prototype
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();
console.log(ldh); // 对象身上系统自己添加一个 __proto__ 指向我们构造函数的原型对象 prototype
console.log(ldh.__proto__ === Star.prototype);
// 方法的查找规则: 首先先看ldh 对象身上是否有 sing 方法,如果有就执行这个对象上的sing
// 如果么有sing 这个方法,因为有__proto__ 的存在,就去构造函数原型对象prototype身上去查找sing这个方法

构造函数

对象原型 __proto__ 和构造函数原型对象 prototype 里面都有一个属性 constructor,constructor 我们称为构造函数,因为它指回构造函数本身。

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
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('我会演电影');
},
};
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(Star.prototype);
console.log(ldh.__proto__);
console.log(Star.prototype.constructor);
console.log(ldh.__proto__.constructor);

原型链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function () {
console.log('我会唱歌');
};
var ldh = new Star('刘德华', 18);
// 1. 只要是对象就有__proto__ 原型, 指向原型对象
console.log(Star.prototype);
console.log(Star.prototype.__proto__ === Object.prototype);
// 2.我们Star原型对象里面的__proto__原型指向的是 Object.prototype
console.log(Object.prototype.__proto__);
// 3. 我们Object.prototype原型对象里面的__proto__原型 指向为 null

JavaScript 的成员查找机制

  1. 当访问一个对象的属性时,首先查找这个对象自身有没有该属性
  2. 如果没有就查找它的原型(也就是 __proto__ 指向的 prototype 原型对象
  3. 如果还没有就查找原型对象的原型(Object 的原型对象)
  4. 以此类推,一直找到 Object 为止(null)
  5. __proto__ 对象原型的意义就在于为对象成员查找机制提供一个方向
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
Star.prototype.sing = function () {
console.log('我会唱歌');
};
Star.prototype.sex = '女';
// Object.prototype.sex = '男';
var ldh = new Star('刘德华', 18);
ldh.sex = '男';
console.log(ldh.sex);
console.log(Object.prototype);
console.log(ldh);
console.log(Star.prototype);
console.log(ldh.toString());

原型对象 this 指向

构造函数中的 this 指向我们的实例对象,原型对象里面放的是方法,这个方法里面的 this 指向的是这个方法的调用者,也就是这个实例对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function Star(uname, age) {
this.uname = uname;
this.age = age;
}
var that;
Star.prototype.sing = function () {
console.log('我会唱歌');
that = this;
};
var ldh = new Star('刘德华', 18);
// 1. 在构造函数中,里面this指向的是对象实例 ldh
ldh.sing();
// 2.原型对象函数里面的this 指向的是 实例对象 ldh
console.log(that === ldh);

扩展内置对象

数组和字符串内置对象不能给原型对象覆盖操作 Array.prototype = {}

可以通过原型对象,对原来的内置对象进行扩展自定义的方法,比如给数组增加自定义求偶数和的功能。

1
2
3
4
5
6
7
8
9
10
11
12
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());
console.log(Array.prototype);
var arr1 = new Array(11, 22, 33);
console.log(arr1.sum());

继承

ES6 之前并没有给我们提供 extends 继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。

call()

调用这个函数,并且修改函数运行时的 this 指向

fun.call(this.Arg, arg1, arg2, ...)
  • thisArg:当前调用函数 this 的指向对象
  • arg1, arg2:传递的其他参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// call 方法
function fn(x, y) {
console.log('我想喝手磨咖啡');
console.log(this);
console.log(x + y);
}
var o = {
name: 'andy',
};
// fn();
// 1. call() 可以调用函数
// fn.call();
// 2. call() 可以改变这个函数的this指向 此时这个函数的this 就指向了o这个对象
fn.call(o, 1, 2);

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

核心原理:通过 call() 把父类的 this 指向子类的 this,这样就可以实现子类继承父类的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
var son = new Son('刘德华', 18, 100);
console.log(son);

借用原型对象继承父类方法

一般情况下,对象的方法都在构造函数的原型对象中设置,通过构造函数无法继承父类方法。

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
// 借用父构造函数继承属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function () {
console.log(100000);
};
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
// Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
Son.prototype = new Father();
// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
Son.prototype.constructor = Son;
// 这个是子构造函数专门的方法
Son.prototype.exam = function () {
console.log('孩子要考试');
};
var son = new Son('刘德华', 18, 100);
console.log(son);
console.log(Father.prototype);
console.log(Son.prototype.constructor);

核心原理:

  1. 将子类所共享的方法提取出来,让子类的 prototype 原型对象= new 父类()
  2. 本质:子类原型对象等于是实例化父类,因为父类实例化之后另外开辟空间,就不会影响原来的父类原型对象
  3. 将子类的 constructor 重新指向子类的构造函数

ES5 中新增的方法

ES5 中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括:

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

数组方法

迭代方法:forEach()、map()、filter()、some()、every()

array.forEach(function(value, index, array) {})
  • value:数组当前项的值
  • index:数组当前项的索引号
  • array:数组对象本身
1
2
3
4
5
6
7
8
9
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function (value, index, array) {
console.log('每个数组元素' + value);
console.log('每个数组元素的索引号' + index);
console.log('数组本身' + array);
sum += value;
});
console.log(sum);
array.filter(function(value, index, array) {})
  • filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
  • 注意,该方法是直接返回一个新的数组
1
2
3
4
5
6
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(value, index, array) {})
  • some() 方法用于检测数组中是否有满足条件的元素
  • 注意,它返回的是布尔值,如果查找到这个元素,就返回 true,否则为 false
  • 如果找到第一个满足条件的元素,则终止循环,不再继续查找
1
2
3
4
5
var arr = [10, 30, 4];
var flag = arr.some(function (value) {
return value < 3;
});
console.log(flag);

综合案例-商品查询

字符串方法

trim() 方法会删除字符串两端的空白字符,它并不影响原字符串本身,它返回的是一个新的字符串。

str.trim()

对象方法

  1. Object.keys(obj) 方法返回一个所有元素为字符串的数组,类似 for...in
1
2
3
4
5
6
7
8
9
10
11
12
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000,
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function (value) {
console.log(value);
});
  1. Object.defineProperty(obj, prop, desc) 定义新属性或修改原有的属性
  • obj:必需,目标对象
  • prop:必需,定义或修改的属性名称
  • desc:必需,目标属性的描述符
  • value: 设置属性的值
  • writable:属性的值是否可以重写,默认为 false
  • enumerable:目标属性是否可以被枚举遍历,默认为 false
  • configurable:目标属性是否可以被删除或者再次修改其描述符,默认为 false
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
// Object.defineProperty() 定义新属性或修改原有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999,
};
// 1. 以前的对象添加和修改属性的方式
// obj.num = 1000;
// obj.price = 99;
// console.log(obj);
// 2. Object.defineProperty() 定义新属性或修改原有的属性
Object.defineProperty(obj, 'price', {
value: 9.9,
});
Object.defineProperty(obj, 'num', {
value: 1000,
// 如果值为 false 不允许修改这个属性值 默认值也是 false
writable: false,
// enumerable 如果值为 false 则不允许遍历, 默认的值是 false
enumerable: false,
// configurable 如果为 false 则不允许删除这个属性 不允许在修改第三个参数里面的特性 默认为 false
configurable: false,
});
obj.num = 2000;
obj.id = 2;
console.log(obj);
console.log(Object.keys(obj));
delete obj.num;
console.log(obj);
delete obj.pname;
console.log(obj);
Object.defineProperty(obj, 'address', {
value: '中国山东蓝翔技校xx单元',
// 如果值为false 不允许修改这个属性值 默认值也是 false
writable: true,
// enumerable 如果值为 false 则不允许遍历, 默认的值是 false
enumerable: true,
// configurable 如果为 false 则不允许删除这个属性 默认为false
configurable: true,
});
console.log(Object.keys(obj));