要是以前别人问我。随口道来，封装继承多态，万物皆对象。。。一大推。说的自己都以为自己掌握了面向对象。呵呵一笑。确实掌握了 只是不会用。。。。。
以前 学。Net 虽然MVC 本身就是面向对象。也就没管什么思想，就记住步骤，跟着写就好。
现在想想，那时候还是太年轻了，当我看了设计模式里面对MCV的一个解释。发现并不是这么回事，面向对象 学问可大了，学好面向对象，锻炼思想，便开始虚心起来，觉得不简单。
废话说了那么多。
什么是面向对象编程。现在 我觉得 就是以对象的方式去写代码，不在考虑怎么一步步的实现效果。
按照之前我们可能会 先写10个DIV 然后随机位置 随机颜色 一步步
按照面向对象 就不在这样想了 先看有几个对象 在属性 方法。。
这个有一个盒子对象。 盒子有大小 位置 背景颜色这些属性
有随机颜色 随机位置 和出现的方法
那么就可以开始动手了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
height: 800px;
background-color: #cccccc;
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script>
// 方块对象box
//盒子有大小，位置 背景颜色等属性。
//方法有随机改变位置 随机背景颜色
function Box(element) {
this.width = 20
this.height = 20
this.backgroundColor = ‘red‘
this.x = 50
this.y = 50
this.elemen=element
this.div=document.createElement(‘div‘)
element.appendChild(this.div)
}
//初始化
Box.prototype.init=function(){
this.randombc()
this.randomxy()
this.div.style.width=this.width+‘px‘;
this.div.style.height=this.height+‘px‘
this.div.style.backgroundColor=this.backgroundColor
this.div.style.position=‘absolute‘
this.div.style.left=this.x+‘px‘
this.div.style.top=this.y+‘px‘
console.log(this.div)
}
Box.prototype.randomxy=function(){
this.x=randomNum(0,(this.elemen.offsetWidth-this.width)/this.width)*this.width
this.y=randomNum(0,(this.elemen.offsetHeight-this.height)/this.height)*this.height
}
Box.prototype.randombc = function () {
let r = randomNum(0, 255)
let g = randomNum(0, 255)
let b = randomNum(0, 255)
this.backgroundColor = ‘rgb(‘ + r + ‘,‘ + g + ‘,‘ + b + ‘)‘
}
function randomNum(minNum, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)
}
let ele=document.getElementById(‘container‘)
let arr=[]
for (let i=0;i<10;i++){
arr[i]=new Box(ele)
arr[i].init()
}
setInterval(function () {
for (let i=0;i<arr.length;i++){
arr[i].init()
}
},500)
</script>
</html>
面向对象 博大精深 需慢慢体会
原文：https://www.cnblogs.com/ruogu/p/10830381.html