5、JavaScript面向对象

5.1 原型对象

JavaScript、Java、C#… 面向对象，JavaScript有些区别：换一下思维方式

• 类：模板
• 对象：具体的实例

var Student = {
  name:"jiang",
  age:18,
  run:function (){
    console.log(this.name + " is running");
  }
};
var xiao = {
  name: "xiaoming"
};

//原型对象：父类——xiao的原型是Student
xiao.__proto__ = Student;

/**调用
 * Student.run()
 * 结果是：jiang is running
 * xiao.run()
 * 结果是：xiaoming is running
 * */

5.2 class继承

1. 定义一个类，属性和方法

   class Student{
     //构造器
     constructor(name) {
       this.name = name;
     }
     hello(){
       console.log('hello,JavaScript');
     }
   }
   var jiang = new Student("jiangjiang");
   
   /**调用
    * jiang.hello()
    * 结果是：hello,JavaScript
    * jiang.name
    * 结果是：'jiangjiang'
    */
   

2. 继承 —— 本质：查看对象的原型

   class Pupil extends Student{
     constructor(name,age) {
       super(name); // 记得用super调用父类的构造方法
       this.age = age;
     }
     myAge(){
       console.log('I am a pupil.')
     }
   }
   var xiao = new Pupil("xiaoming",10);
   
   /**调用
    * xiao.myAge() 结果是：I am a pupil.
    * xiao.age     结果是：10
    * xiao.name    结果是：'xiaoming'
    * xiao 结果是：Pupil {name: 'xiaoming', age: 10}
    */
   

5.3 原型链

参考：javascript——原型与原型链 - 雅昕 - 博客园 (cnblogs.com)

__ proto__：原型链就是顺着__proto__所在的一条链子，Js中原型链是实现继承的主要方法

• 概念：当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去

• 基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法

• 作用：减少内存消耗，提高代码的复用率

每个构造函数都有一个属性prototype指向一个原型对象，每个原型对象也有一个属性constructor指向函数，通过new 构造函数() 创建出来的对象内部有一个不可见的属性prototype指向构造函数的原型。