其实,不需要搞明白面向过程编程和面向对象编程的区别,只需要明白面向对象的特点:变量必须有家长,万事家长做主.慢慢就能理解面向对象的优劣.

1.变量有所属.

 常规方式

var a = 1
let b = ['1', '2']
const c = function (name) {
  return name
}
console.log(a, b, c)

 常规的变量申明,这些变量作用于自己的作用域内.这种方式有一些缺陷.

        其一,在同一个作用域内,同名变量会导致前一个变量被覆盖.假如现在引入了两个不同的js文件,里面各自都有一个叫check的函数,那么后引入的函数会覆盖前一个函数.那么这时候我就得去修改函数名,可能就会导致开发量变大.

       其二,不方便管理.首先,如果没有函数名没有语义化,或者语义比较模糊,那我们看到它的第一眼,并不知道它的作用在哪儿.那么维护代码的时候我们,必须围绕整个流程看一遍以确认需要维护的变量.其次,假如多处用到相同的几个变量,那我们只能全部复制粘贴一遍,在需要修改的地方再进行修改.复用性不高.

      其他暂且不提.为了解决上述问题,我们引入了面向对象编程的方案.

面向对象

const obj = {
  a: 1,
  b: ['1', '2'],
  c: function () {
    return name
  }
}
console.log(obj.a, obj.b, obj.c)

 最明显的特点就是,同样的变量,我把它们放进了obj这个对象中,它们被约束在obj中.

好处1:同一个文件,我可以重复命名变量(作为盒子的对象不可同名)

const obj = {
  a: 1,
  b: ['1', '2'],
  c: function () {
    return name
  }
}
console.log(obj.a, obj.b, obj.c)
const obj1 = {
  a: 1,
  b: ['1', '2'],
  c: function () {
    return name
  }
}
console.log(obj1.a, obj1.b, obj1.c)

 可以看见,你不需要想破脑袋去想6个变量名,只要3个变量名就行,只要同一个对象中不要有重复的属性名就行.

好处2.我可以对不同的变量进行分类,已明确其在代码的作用,从而方便查找维护

面向过程:申明的时候,我们并不知道这6个变量有啥区别,实际console的时候再回头一个个去找,需要修改的时候再修改

var a = 1
let b = ['1', '2']
const c = function (name) {
  return name
}
var d = 1
let e = ['1', '2']
const f = function (name) {
  return name
}
console.log(a, b, c)
setTimeout(() => {
  console.log(d, e, f)
}, 1000)

 面向对象:6个变量已经提前分类好了,后续一看,就很清楚这6个变量分别再哪里发挥作用.

const obj = {
  a: 1,
  b: ['1', '2'],
  c: function () {
    return name
  }
}
console.log(obj.a, obj.b, obj.c)
const obj1 = {
  a: 1,
  b: ['1', '2'],
  c: function () {
    return name
  }
}
setTimeout(() => {
  console.log(obj1.a, obj1.b, obj1.c)
}, 1000)

 2.家长需做主

由于变量变成了对象的属性,所以没法直接使用.需要经过对象(家长)才能获取.比如上面的obj.a,而直接拿a是拿不到的.这也就是变量名可以重复的原因.毕竟obj.a和obj1.a不是同一个东西.这就是