从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程
一、构造函数的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象编程</title>
</head>
<body>
<script>
/*构造函数(构造函数命名一般此采用大驼峰式命名即驼峰式命名首字母大写)*/
// 构造函数中的this指向的是即将生成的对象
// ES5的语法
function Es5Person(name) {
this.name = name;
this.sleep = function () {
console.log('喜欢睡觉!');
};
}
// ES6语法
class Es6Person {
constructor(name) {
this.name = name;
}
//定义方法省略关键字,且方法直接绑定到原型对象
sleep() {
console.log('喜欢睡觉!');
}
}
var personOne = new Es5Person('小明');
var personTwo = new Es6Person('小张');
console.log(personOne);
console.log(personTwo);
</script>
</body>
</html>
二、构造函数和对象的关系
对象是由构造函数new 出来的,即对象是构造函数的实例。
三、使用JSON创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象编程</title>
</head>
<body>
<script>
// json创建对象的方式(适合单个对象)
const liuneng = {
name: '刘能',
sleep: function () {
console.log('喜欢睡觉!');
}
};
console.log(liuneng);
</script>
</body>
</html>
四、面向对象和面向过程的区别
1)面向过程:面向过程专注于如何去解决一个问题的过程步骤。编程特点是由一个个函数去实现每一步的过程步骤,没有类和对象的概念。
2)面向对象:专注于由哪一个对象来解决这个问题,编程特点是出现了一个类,从类中拿到对象,由这个对象去解决具体问题。
对于调用者来说,面向过程需要调用者自己去实现各种函数。而面向对象,只需要告诉调用者,对象中具体方法的功能,而不需要调用者了解方法中的实现细节。
七、类和对象
类 :对一群具有相同特征的对象的集合的描述;
对象:真实存在的对象个体;
对象和类的理解:面向对象,而不是面向类。
类只是我们用来组织对象和构造程序的一种形式,它本质上源自于人们对于现实世界中的一种概念映射,即:凡是具有共同点的部分便可以抽象成一类,抽象层次越高,类在继承体系中的层级越高(或者说越低,看你从哪个方向来看了,总之就是越来越基础,直到成为一切衍生类型的始祖)。
在 Javascript 里,一切对象归根结底都是源自于 Object
,如果你扩展(重载)了 Object
的原型(Javascript 基于原型继承),那么其他的一切对象都可以获得这些扩展(重载)。所以在 Javascript 的世界里,类不是必须的,没有类一样可以面向对象。
Javascript中function作为构造函数时,就是一个类(类本质也是个函数),搭配上new操作符,可以返回一个对象。
在JavaScript中采用构造函数来模拟类,只是为了能在应用的业务领域里重现基于类语言的那种类型化(更容易和我们看待事物的方式相匹配),但是由于一些语言设计上的不足甚至是错误,使得 Javascript 很难完整的实现经典类型系统。继承靠原型链,多态靠弱类型,封装靠闭包。
八、JSON字符串和对象直接的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象编程</title>
</head>
<body>
<script>
// 对象转字符串
var obj1 = {name: '张三', hello: function () {}};
console.log(JSON.stringify(obj1));
// 字符串转对象
var obj2 = '{"name": "张三"}';
console.log(JSON.parse(obj2));
</script>
</body>
</html>
附录:类实现模态框
待补充……