JS是面向过程、面向对象还是基于对象？面向对象的代码体现

最新推荐文章于 2024-04-08 07:42:56 发布

weixin_30940783

最新推荐文章于 2024-04-08 07:42:56 发布

阅读量379

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/nangezi/p/10170281.html

版权

一、问题

　　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").οnclick=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.οnclick=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.οnclick=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();//调用方法