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

时间 2020-05-20

标签面向过程面向对象仍是基于对象代码体现栏目 JavaScript 繁體版

原文原文链接

1、问题

　　javascript是面向对象的，仍是面向过程的？基于对象是什么意思？javascript

　　对象：指的是对某一类事物进行抽象，抽象出这一类事物共同的特征以及行为（也就是属性和方法），那些拥有这一共同属性和方法的事物就是对象html

2、分析

　　面向对象和基于对象的区别：引用一个例子，好比建造房子java

面向对象：是先设计好图纸，而后按照这个图纸的设计去建造房子
基于对象：是先建造一个房子，而后根据房子的样子，再去建造房子

　　也就是说： json

面向对象：是先有一个抽象的对象描述（类），而后根据这个描述去构建新的对象（实例化对象）
基于对象：是先有一个具体的对象，而后根据这个具体的对象，再去建立新的对象（实例化对象）

面向对象的三大基本特征：封装,继承,多态。函数

基于对象：也使用了对象,可是没法利用现有的对象的模板产生新的对象类型,继而产生新的对象,基于对象是没有继承的特色。this

多态体现的就是继承,没有了继承就无从谈论多态。多态通常体如今抽象类上。JavaScript语言就是基于对象的,它封装了一些好的对象,调用对象的方法,设置对象的属性,可是却没法让开发者派生出新的类。只能使用现有对象的方法和属性。spa

3、javascript中对象的体现和使用

　　咱们经过多种方式来实现点击按钮，更改某个div的属性样式prototype

<!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" }

　　面向对象思想的实现方式（初级）： code

　　按钮是一个对象；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、问题

2、分析

3、javascript中对象的体现和使用

4、结束