###1.构造函数 构造函数的名称一般都是首字母大写 挂载在this上面的属性为实例属性，实例属性再每个实例间都是独立的 原型链属性通过prototype添加，他是所有实例共享的 类方法/静态属性只能由构造函数本身访问 当实例属性和原型链上的属性重名时，优先访问实例属性，没有实例属性再访问原型属性 大多数浏览器的 ES5 实现之中，每一个对象都有__proto__属性，指向其的构造函数的prototype属性对象
1<script> 2 // 创建构造函数 3 function Person(name,age){ 4 // 挂载在this上面的都是实例属性 5 this.name = name 6 this.age = age 7 } 8 9 // 创建实例 10 var p1 = new Person("张三",20) 11 var p2 = new Person("李四",18) 12 // 访问实例属性 13 console.log(p1.name,p1.age) //张三 20 14 console.log(p2.name,p2.age) //李四 18 15 // 修改实例属性 16 p1.age = 25 17 p2.age = 23 18 console.log(p1.name,p1.age) //张三 25 19 console.log(p2.name,p2.age) //李四 23 20 21 // 添加原型链属性/方法（所有实例共享） 22 Person.prototype.sayHello = function(){ 23 console.log(`我的名字是${this.name},今年${this.age}岁`) 24 } 25 // 访问原型链方法 26 p1.sayHello() //我的名字是张三,今年25岁 27 p2.sayHello() //我的名字是李四,今年23岁 28 // 类方法/静态属性（只能由构造函数本身访问） 29 Person.title = "这是构造函数的标题" 30 console.log(Person.title) //"这是构造函数的标题" 31 console.log(p1.title) //undefined 32 console.log(p2.title) //undefined 33 34 // 动态创建实例方法（与原型链方法重名） 35 p1.sayHello = function(){ 36 console.log("我是p1的sayHello()") 37 } 38 // 优先从实例属性中读取 39 p1.sayHello() //我是p1的sayHello() 40 // p2没有相关实例属性，所以访问原型链方法 41 p2.sayHello() //我的名字是李四,今年23岁 42 43 // __proto__属性 44 console.log(p2.__proto__) //{sayHello: ƒ, constructor: ƒ} 45</script>
###2.class类 ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 类就是将原先写在构造函数内部的代码，写入到constructor()中 将原先写在prototype上面的属性直接写在类里面 将静态属性直接写在类里面并且在前面添加static关键字 类的数据类型就是函数，类本身就指向构造函数
1<script> 2 // 创建一个类 3 class Person{ 4 // constructor内部的数据是每个实例有独有一份 5 constructor(name,age){ 6 this.name = name 7 this.age = age 8 } 9 // 原型链方法 10 sayHello(){ 11 console.log(`我的名字是${this.name},今年${this.age}岁`) 12 } 13 // 静态方法（只能由类本身访问） 14 static foo(){ 15 console.log("我是类的静态方法") 16 } 17 // 静态属性（只能由类本身访问） 18 static title = "这是类的标题" 19 } 20 // 创建实例 21 var p1 = new Person("张三",20) 22 var p2 = new Person("李四",18) 23 // 访问实例属性 24 console.log(p1.name,p1.age) //张三 20 25 console.log(p2.name,p2.age) //李四 18 26 // 修改实例属性 27 p1.age = 25 28 p2.age = 23 29 console.log(p1.name,p1.age) //张三 25 30 console.log(p2.name,p2.age) //李四 23 31 32 // 访问原型链方法 33 p1.sayHello() //我的名字是张三,今年25岁 34 p2.sayHello() //我的名字是李四,今年23岁 35 // 类方法/静态属性（只能由类本身访问） 36 Person.foo() //"我是类的静态方法" 37 console.log(Person.title) //"这是类的标题" 38 console.log(p1.title) //undefined 39 console.log(p2.title) //undefined 40 41 // 类的本质 42 console.log(typeof Person) //function 43 console.log(p1.sayHello === Person.prototype.sayHello) //true 44</script>
###3.extends 继承 子类通过extends可以继承父类的实例属性和实例方法之外，还可以有自己的实例属性和实例方法 子类继承父类的本质，相当于把子类的原型链指向了父类
1<script> 2 // 创建一个类 3 class Person{ 4 // constructor内部的数据是每个实例有独有一份 5 constructor(name,age){ 6 this.name = name 7 this.age = age 8 } 9 // 原型链方法 10 sayHello(){ 11 console.log(`我的名字是${this.name},今年${this.age}岁`) 12 } 13 // 静态方法（只能由类本身访问） 14 static foo(){ 15 console.log("我是类的静态方法") 16 } 17 // 静态属性（只能由类本身访问） 18 static title = "这是类的标题" 19 } 20 // Student类继承Person 21 class Student extends Person { 22 // name,age,school就是创建时传入的参数 23 constructor(name,age,school){ 24 // super()是父类的构造器,将name和age传递给他 25 super(name,age) 26 // 添加新的实例属性，接收school参数（学生这个类有自己的实例属性） 27 this.school = school 28 } 29 // 添加原型链方法 30 motto(){ 31 console.log("好好学习，天天向上") 32 } 33 // 添加类属性 34 static title = "我是Studnet类的标题" 35 } 36 // 创建实例 37 var stu1 = new Student("小明",16,"蓝翔") 38 var stu2 = new Student("小强",17,"新东方") 39 // 访问实例属性 40 console.log(stu1.name,stu1.age,stu1.school) //小明 16 蓝翔 41 console.log(stu2.name,stu2.age,stu2.school) //小强 17 新东方 42 // 修改实例属性 43 stu1.age = 20 44 stu2.age = 21 45 console.log(stu1.name,stu1.age,stu1.school) //小明 20 蓝翔 46 console.log(stu2.name,stu2.age,stu2.school) //小强 21 新东方 47 48 // 访问原型链方法 49 stu1.sayHello() //我的名字是小明,今年20岁 50 stu2.sayHello() //我的名字是小强,今年21岁 51 stu1.motto() //好好学习，天天向上 52 stu2.motto() //好好学习，天天向上 53 54 // 类方法/静态属性（只能由类本身访问） 55 console.log(Student.title) //"我是Studnet类的标题" 56 console.log(stu1.title) //undefined 57 console.log(stu2.title) //undefined 58 59 // 类的本质 60 console.log(typeof Student) //function 61 console.log(stu1.motto === Student.prototype.motto) //true 62 63 // 子类的原型链指向了父类 64 console.log(stu1) 65 // Student {name: "小明", age: 20, school: "蓝翔"} 66 // age: 20 67 // name: "小明" 68 // school: "蓝翔" 69 // __proto__: Person 70</script>
###4.ES5构造函数的继承 在当前构造函数中调用父级构造函数,使用call()方法修改this指向，并将参数传递给他，使用他间接为当前this添加实例属性 将当前构造函数的prototype指向父级构造函数的匿名实例，以便访问它的原型链方法 如果当前构造函数要添加新的原型方法，可以在prototype对象上接着添加
1<script> 2 // 创建父类构造函数 3 function Person(name,age){ 4 if(name){ 5 this.name = name 6 } 7 if(age){ 8 this.age = age 9 } 10 } 11 Person.prototype.sayHello = function(){ 12 console.log(`我的名字是${this.name},今年${this.age}岁`) 13 } 14 15 // 创建继承Person的构造函数 16 function Student(name,age,school){ 17 // 挂载实例属性 18 this.school = school 19 // 调用Person()并强制绑定this，为实例挂载属性 20 Person.call(this,name,age) 21 } 22 // 绑定原型链为Person的匿名实例 23 Student.prototype = new Person() 24 // 为Student添加新的原型方法 25 Student.prototype.motto = function(){ 26 console.log("好好学习，天天向上") 27 } 28 29 // 创建实例 30 var s1 = new Student("李四",25,"蓝翔") 31 // 访问实例属性 32 console.log(s1.name,s1.age,s1.school) 33 // 访问Person原型上的方法 34 s1.sayHello() //我的名字是李四,今年25岁 35 // 访问Student原型上的方法 36 s1.motto() //好好学习，天天向上 37</script>