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

时间：2021-08-19 22:39:27

一、问题

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

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

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

四、结束

　　

JS是面向过程、面向对象还是基于对象？面向对象的代码体现的更多相关文章

  1. 重学前端--js是面向对象还是基于对象？

    重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...

  2. 理解面向过程（OPP）、面向对象（OOP）、面向切面（AOP）

    概念 面向过程编程OPP:Procedure Oriented Programming,是一种以事物为中心的编程思想.主要关注“怎么做”,即完成任务的具体细节. 面向对象编程OOP:Object Or ...

  3. python之面向过程，函数式编程，面向对象浅析

    python编程有面向过程.面向函数.面向对象三种,那么他们区别在哪呢?这个问题,让我想起我在学习编程的时候,我的老师给我举的例子.分享给大家. 面向过程就是将编程当成是做一件事,要按步骤完成! 比如 ...

  4. JavaSE——面向对象与面向过程、类与对象、&lpar;属性、方法、构造器&rpar;等

    一:面向对象与面向过程 二者都是一种思想,面向对象是相对于面向过程而言的. 面向过程: 1.面向过程思想强调的是过程(动作). 2.在面向过程的开发中,其实就是面向着具体的每一个步骤和过程,把每一个步 ...

  5. 面向过程（POP）、面向对象（OOP）、面向接口（IOP）、面向切面（AOP）

    面向过程:典型的是C/C++的结构体,结构体里只有变量,没有处理变量的方法,需要专门编写处理变量的方法. 面向对象:ArrayList<Integer> list=new ArrayLis ...

  6. 面向对象与基于对象 学习记录 thread举例

    /********************************************************************/* @file* @author def< qq gr ...

  7. JavaScript基于对象&lpar;面向对象&rpar;&lt&semi;一&gt&semi;类和对象

    javascript中一切皆对象,比如:Array,Date.....这些都是对象.javascript中没有class的定义,function既是定义函数,也可以是定义类.function Obj( ...

  8. JavaScript学习总结&lpar;九&rpar;——Javascript面向&lpar;基于&rpar;对象编程

    一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫“原型对象”,因此"类=原型对象" 二.类(原型对象)和 ...

  9. JavaScript学习总结（5）——Javascript面向&lpar;基于&rpar;对象编程

    一.澄清概念 1.JS中"基于对象=面向对象" 2.JS中没有类(Class),但是它取了一个新的名字叫"原型对象",因此"类=原型对象" ...

随机推荐

  1. Mac Virtual System On Windows

    Win8.1下利用虚拟机安装苹果操作系统 所需文件: 虚拟机:VMware -10.0.1,这个就是中文版的了. 虚拟机密钥生成器:vm10keygen,要对应虚拟机的版本. 虚拟机的插件: unlo ...

  2. &lbrack;转&rsqb;Ionic &plus; AngularJS angular-translate 国际化本地化解决方案

    本文转自:http://www.cnblogs.com/maoyazhi/p/4332362.html 欢迎访问我们的网站,网站上有更多关于技术性的交流:http://www.ncloud.hk/技术 ...

  3. linux svn迁移备份的三种方法

    原文:http://www.iitshare.com/linux-svn-migration.html svn备份方式对比分析 一般采用三种方式: 1.svnadmin dump 2.svnadmin ...

  4. 用例图 UseCase Diagram

    从上面的用例图模型,我们可以大致了解用例图所描述的是什么.下面进行详细介绍. 用例图,即用来描述什么角色通过某某系统能做什么事情的图,用例图关注的是系统的外在表现,系统与人的交互,系统与其它系统的交互 ...

  5. 使用jquery模拟键盘事件，但window系统并不会真的响应事件，只是浏览器当前页面会响应而已

    <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...

  6. selenium7种元素识别

    我们以百度主页搜索框为例:= <input autocomplete="off" maxlength="255" value="" c ...

  7. MySQL中&comma; 如何查询某一天&comma; 某一月&comma; 某一年的数据&period;

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天(包括昨天和今天的数据) SELECT * FROM 表名 WHERE TO_ ...

  8. &lbrack;kuangbin带你飞&rsqb;专题二十二 区间DP-E-POJ - 1651

    区间DP模板题 做区间DP的题目的时候,我们考虑DP[i][j]的含义是什么? 由题意大概是这样的,我们可以从n个数中每次选一个我们以前没选过的数字拿走,需要消耗a[i]*a[i+1]*a[i-1]的 ...

  9. 咸鱼入门到放弃3--tomcat

    Tomcat学习与使用 一. Tomcat安装及配置 二.项目部署(虚拟目录映射) Web应用开发好后,若想供外界访问,需要把web应用所在目录交给web服务器管理,这个过程称之为虚似目录的映射. 虚 ...

  10. 归并排序之python

    想更好的了解归并排序, 需先了解, 将两个有序列表, 组成一个有序列表 有两个列表  l1 = [1, 3, 5, 7] l2 = [2, 4, 6] 需要将 l1 和 l2 组成一个 有序大列表   ...

相关文章