ES6-class类和function构造函数

(掌握)ES6-class类和function构造函数

//通过function来定义类
function Person1(name,age){
    this.age = age
    this.name = name
}
Person1.prototype.running = function(){

}
Person1.prototype.eating = function(){

}
var p1 = new Person1("大余",25)
console.log(p1.__proto__ === Person1.prototype);//true

//class来定义类，这种写法只是上面的语法糖
class Person2{
    constructor(name,age){
        this.name = name
        this.age = age
    }

    running(){

    }
    eating(){
        
    }
}

var p2 = new Person2("小余",20)
console.log(p2.__proto__ === Person2.prototype);//true
console.log(Person2.prototype.constructor);//指回类本身，跟上面Person1是一样的
console.log(typeof Person1,typeof Person2);//都是function

• class 与 function 的不同点

//function的写法是能够作为普通函数去调用的
function Person1(name,age){
    //这两个需要写，如果不写，name，age打印不出来。如果你name能够打印出来的话，那是你之前有用过，他存到window里面去了，因为Person1函数的外面一层就是window，这个时候就算你把Person1("大满",24)的大满修改掉，控制台也是无法修改掉的，因为函数内部的this.name是去window中读取了
    this.name = name
    this.age = age
    console.log(this.name+"今年已经"+this.age);
}
Person1("大满",24)//大满今年已经24

//class定义的类，不能作为一个普通的函数进行调用
//class的写法则是不行，结果就是报错。不使用 new 的时候是不能够调用的
class Person2{
    constructor(name,age){
        this.name = name
        this.age = age
    }
}

Person2("小余",20)//Class constructor Person2 cannot be invoked without 'new'

类和构造函数的异同

• 我们来研究一下类的一些特性：你会发现它和我们的构造函数的特性其实是一致的

class Person{

}

var p = new Person()

console.log(Person);//[class Person]
console.log(Person.prototype);//{}
console.log(Person.prototype.constructor);//[class Person]
console.log(p.__proto__ === Person.prototype);//true

console.log(typeof Person);//function，类型为函数

类的构造函数(上面的总结)

• 如果我们希望在创建对象的时候给类传递一些参数，这个时候应该如何做呢？
  • 每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor；
  • 当我们通过new操作符，操作一个类的时候会调用这个类的构造函数constructor
  • 每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常
• 当我们通过new关键字操作类的时候，会调用这个constructor函数，并且执行如下操作：
  1. 在内存中创建一个新的对象（空对象）；
  2. 这个对象内部的[[prototype]]属性会被赋值为该类的prototype属性
  3. 构造函数内部的this，会指向创建出来的新对象
  4. 执行构造函数的内部代码（函数体代码）
  5. 如果构造函数没有返回非空对象，则返回创建出来的新对象

类的实例方法

• 在上面我们定义的属性都是直接放到了this上，也就意味着它是放到了创建出来的新对象中
  • 在前面我们说过对于实例的方法，我们是希望放到原型上的，这样可以被多个实例来共享
  • 这个时候我们可以直接在类中定义

class Person{
    constructor(name){
        this.name = name
    }
    learn(){//这个就是实例方法
        console.log(this.name+"爱好学习");
    }
}

var p1 = new Person("小余")
p1.learn()//小余爱好学习