JS是面向过程、面向对象还是基于对象？面向对象的代码体现
一、问题
javascript是面向对象的，还是面向过程的？基于对象是什么意思？
对象： 指的是对某一类事物进行抽象，抽象出这一类事物共同的特征以及行为（也就是属性和方法），那些拥有这一共同属性和方法的事物就是对象
二、分析
面向对象和基于对象的区别：引用一个例子，比如建造房子
- 面向对象：是先设计好图纸，然后按照这个图纸的设计去建造房子
- 基于对象：是先建造一个房子，然后根据房子的样子，再去建造房子
也就是说：
- 面向对象：是先有一个抽象的对象描述（类）， 然后根据这个描述去构建新的对象（实例化对象）
- 基于对象： 是先有一个具体的对象，然后根据这个具体的对象，再去创建新的对象（实例化对象）
面向对象的三大基本特征：封装,继承,多态。
基于对象：也使用了对象,但是无法利用现有的对象的模板产生新的对象类型,继而产生新的对象,基于对象是没有继承的特点。
多态体现的就是继承,没有了继承就无从谈论多态。多态一般体现在抽象类上。JavaScript语言就是基于对象的,它封装了一些好的对象,调用对象的方法,设置对象的属性,但是却无法让开发者派生出新的类。只能使用现有对象的方法和属性。
三、javascript中对象的体现和使用
我们通过多种方式来实现点击按钮，更改某个div的属性样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div: {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="点击变化" id="btn" />
<div id="div"></div>
<script>
//点击按钮修改div的样式
//面向过程和面向对象实现方式
</script>
</body>
</html>
面向过程的实现方式：知道需求，理清思路过程，然后按照这个过程从头到尾写
//点击按钮，改变div的样式--面向过程实现
document.getElementById("btn").onclick=function() {
document.getElementById("div").style.backgroundColor="yellow"
}
面向对象思想的实现方式（初级）：
按钮是一个对象；div是个对象；颜色是一个属性
//点击按钮，改变div的样式--面向对象（初级）
//ChangeStyle是构造函数
function ChangeStyle(btnId,divId,color){
this.btnObj=document.getElementById("btnId");
this.divObj=document.getElementById("divId");
this.color = color;
}
//数据共享的方式来改变样式
ChangeStyle.prototype.init = function() {
console.log(this) // 此this就是实例对象--即当前对象
var that = this; // 此处必须转存this，因为在function中this表示该点击事件的对象
this.btnObj.onclick=function() {
that.divObj.style.backgroundColor=that.color;
}
}
//实例化对象
var test = new ChangeStyle("btn", "div", "yellow");
test.init();//即打印当前的test实例对象
面向对象实现（高级）：
//点击按钮，改变div的样式--面向对象（高级）
//ChangeStyle是构造函数
function ChangeStyle(btnObj,divObj,json){
this.btnObj=btnObj;
this.divObj=divObj;
this.json = json;
}
ChangeStyle.prototype.init = function() {
//点击按钮改变div样式
var that = this; // 此处必须转存this，因为在function中this表示该点击事件的对象
this.btnObj.onclick=function() {
for(var key in that.json){
that.divObj.style[key]=that.json[key];
}
}
}
//实例化对象
var btnObj=document.getElementById("btnId");
var divObj=document.getElementById("divId");
var json = {"width": "500px","height": "500px","backgroundColor": "green","opacity": "0.1",}
var test = new ChangeStyle(btnObj, divObj, json);
test.init();//调用方法
上面的代码更加具有共用性：只要使用最后的两行代码，可以通过任一对象的点击事件，操作任意对象的样式
这就是面向对象的魅力所在！
四、结束
