面向对象和面向过程的区别: 面向过程简单来讲就是讲问题解决过程描述成一个个步骤,然后用函数把这些步骤挨个实现,比如表单校验,针对不同输入框,写了几个不同的校验规则函数,那么这个就是一个面向过程的一种实现方式,并且这种方式会导致页面中添加了很多全局变量,不利于别人重复使用,而一旦别人使用了,那么你就不能轻易去修改这些方法,不利于团队代码的维护,所以下面引出了面向对象的概念。 面向对象就是将你的需求抽象成一个对象,然后针对这个对象分析它的属性和方法,而这个对象我们简称为类。面向对象其中很重要的一个特点就是封装,把所需要的功能放在一个对象里面统一进行管理,接下来将通过例子说明js中的面向对象,以及分别包括es5的继承方式和es6的继承方式等。
js中声明一个函数保存在一个变量里面,然后按照习惯将变量名首字母大写,然后在这个函数/构造函数(类)的内部通过对this变量添加属性或者方法来实现对类属性和方法的添加
var Person = function(id, name) { this.id = id; this.name = name; }也可以在类的原型上添加属性和方法,有两种方式
// 第一种: Person.prototype.eat = function() { console.log("吃饭"); } // 第二种 Person.prototype = { eat: function() { console.log("吃饭"); } }这样我们就将所需要的方法和属性都封装在了抽象的Person类中,使用时不能直接使用Person类型,而需要使用new关键字来实例化对象,然后用对象打点的方式去访问,比如
var p1 = new Person(1, "tome"); console.log(p1.name);所以通过this添加和通过prototype的区别在哪里? 通过this添加的属性和方法是在当前对象上添加的,所以我们每一次去创建,也就是去new的时候,其对应的属性和方法都会相应的去创建一次。prototype,也就是原型,每创建一个对象他都有一个原型用于指向其继承的属性和方法,所以通过原型继承的方法并不是对象自身的,所以使用这些方法,需要通过prototype去一层一层去找,也就是之后会说到的原型链。因此,通过原型创建的方法,再次创建对象的时候它不会再次创建。
js中函数级作用域的关系,声明在函数内部的变量和方法在外部是无法访问到的,所以通过这个特性可以创建类的私有变量和私有方法,通过函数内部的this可以创建类的共有属性和共有方法,比如:
var Person = function (name, sex) { // 私有属性 var height = "180"; // 私有方法 function getHeight () { console.log("这人的身高是",height+ "cm"); } // 共有属性 this.name = name; this.sex = sex; // 共有方法 this.getName = function() { console.log(this.name); } this.getSex = function() { console.log(this.sex); } }由于new关键字创建新对象的时,由于类外面通过打点添加的属性和方法没有执行到,所以新创建的对象是无法使用的,所以怎么使用呢?通过类打点的方法去使用,因此这种属性和方法称为类的静态属性和静态方法
Person.height = "180"; Person.getHeight = function() { console.log(Person.height); } Person.getHeight(); // 打印180代码如下(示例):
Person.prototype = { // 共有属性 height: "180", // 共有方法 getHeight: function() { console.log(Person.height); } } var p2 = new Person("tome", "男"); p2.getHeight(); // 180所以类的静态属性和方法和prototype创建的属性和方法区别就是类的静态属性和方法只能通过类打点去调用,而prototype创建的属性和方法在类的实例对象中是可以通过this去访问,这是因为新对象的prototype和类的peototype是指向同一个对象的。