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();//调用方法

　　上面的代码更加具有共用性：只要使用最后的两行代码，可以通过任一对象的点击事件，操作任意对象的样式

　　这就是面向对象的魅力所在！

四、结束