js是面向对象还是基于对象_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();//调用方法

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

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

链接: https://www.fly63.com/article/detial/3083