JavaScript-面向对象与原型
程序员文章站
2022-05-23 15:05:55
...
JavaScript-面向对象与原型
一、前言
ECMAScript有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。
面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但ECMAScript没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。
二、创建对象最基本的方式：创建一个对象，然后给这个对象新建属性和方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>面向对象和原型</title>
</head>
<body>
<script type="text/javascript">
var obj = new Object();
obj.name = '胖彤';
obj.sex = '女';
obj.sayHello = function (){
return '大家好，我是'+this.name+'性别'+this.sex;
};
alert(obj.sayHello());
</script>
</body>
</html>缺点：如果要创建一个类似的对象，就会输出大量代码，就会出现实例对象产生大量重复代码。
三、工厂模式——解决实例化对象产生大量重复的问题
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>面向对象和原型</title>
</head>
<body>
<script type="text/javascript">
function Student(name,sex){
var obj = new Object();
obj.name = name;
obj.sex = sex;
obj.sayHello = function (){
return '大家好，我是'+this.name+'性别'+this.sex;
};
return obj;
}
var student1 = Student('胖彤','女');
var student2 = Student('帅彤','男');
alert(student1.sayHello()); //大家好，我是胖彤性别女
alert(student2.sayHello()); //大家好，我是帅彤性别男
</script>
</body>
</html>缺点：
工厂模式解决了重复实例化的问题，但还有一个问题，那就是识别问题，根本无法搞清楚他们到底是哪个对象的实例。
四、采用构造函数(构造方法)来创建特定的对象
ECMAScript中可以采用构造函数(构造方法)可用来创建特定的对象。类型于Object对象。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>面向对象和原型</title>
</head>
<body>
<script type="text/javascript">
function Student(name,sex){
this.name = name;
this.sex = sex;
this.sayHello = function (){
return '大家好，我是'+this.name+'性别'+this.sex;
};
}
var student1 = new Student('胖彤','女');
var student2 = new Student('帅彤','男');
alert(student1.sayHello()); //大家好，我是胖彤性别女
alert(student2.sayHello()); //大家好，我是帅彤性别男
alert(typeof student1); //object
alert(student1 instanceof Student); //true 很清晰的识别属于Student
</script>
</body>
</html>优点：
使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题
五、使用构造函数的方法，和使用工厂模式的方法不同之处
- 构造函数方法没有显式的创建对象(new Object())。
- 直接将属性和方法赋值给this对象。
- 没有renturn语句。
六、使用构造函数的方法，有一些规范
- 函数名和实例化构造名相同且大写(非强制，但这么写有助于区分构造函数和普通函数)。
- 通过构造函数创建对象，必须使用new运算符。