面向对象-基础（ES5与ES6对比）

一、ES5的面向对象

1、概括：类和构造函数一样

2、属性和方法分开写的

3、具体案例讲解

//定义一个类（构造函数）
function User(name, pass) { 
    this.name = name
    this.pass = pass
}

在js中，每个构造函数都有一个原型属性prototype，因为这个属性的值通常是一个对象，又叫原型对象！通常在这个原型对象中，会包含一个constructor属性指向该原型对象的构造函数。

//定义构造函数user的原型方法
User.prototype.showName = function () {
    console.log(this.name)
}
User.prototype.showPass = function () {
    console.log(this.pass)
}

var u1 = new User('able', '1233')
u1.showName()
u1.showPass(

运行结果如下：

4、面向对象的继承

定义一个新方法VipUser
function VipUser(name, pass, level) {
    User.call(this, name, pass)// *（改变this的指向）把this指向User使用，也就是User对象代替this对象。那么 VipUser中不就有User的所有属性和方法了吗，VipUser对象就能够直接调用User的方法以及属性了。*
    
    this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {
    console.log(this.level)
}

var v1 = new VipUser('cuicui', '888888', 10)
v1.showName()
v1.showLevel()

代码运行结果：

二、ES6的面向对象

1、有了 class 关键字、构造器

2、class 里面直接加方法

class User {
    constructor(name, pass) {
        this.name = name
        this.pass = pass
    }

    showName() {
        console.log(this.name)
    }
    showPass() {
        console.log(this.pass)
    }
}

var u1 = new User('douxiaobao', '666666')
u1.showName()
u1.showPass()

运行结果：

3、继承，super 超类==父类

class VipUser extends User {
    constructor(name, pass, level) {
        super(name, pass)
        // *因此，如果我们在继承类中构建了自己的构造函数，我们必须调用super，因为如果不这样的话this指向的对象不会被创建。并且会收到一个报错。*

		//正确的写法；需要在使用this之前调用super()

        this.level = level
    }
    showLevel(){
    	console.log(this.name)
        console.log(this.level)
    }
}

v1 = new VipUser('cuicui', '123456', 10)
v1.showLevel()

运行结果：

类的应用 — React组件化，一个组件就是一个 class，用于构建用户界面的 JavaScript 库。