• 在ES6之前通过构造函数+原型实现面向对象编程
  • ES6 通过 类 实现面向对象编程
  • 创建类
    • 类constructor构造函数
      • 使用类要注意一下几点
    • 类添加方法
    • 类的继承
    • super关键字
      • 子类想向父类里面传递参数可以使用super关键字
      • super调用父类的普通函数
      • 继承中属性或者方法的查找原则(就近原则)
      • 类的三个注意点

在ES6之前通过构造函数+原型实现面向对象编程

构造函数主要有以下四点
1.构造函数有原型对象prototype
2.构造函数原型对象prototype 里面有 constructor 指向构造函数本身
3.构造函数可以通过原型对象添加方法
4.构造函数创建的实例对象有__proto__原型指向 构造函数的原型对象

ES6 通过 类 实现面向对象编程

class Star { } 
console.log(typeof Star); // function
// 说明类的本质其实还是一个函数,我们也可以简单的认为 类就是 构造函数的另外一种写法
console.log(Star.prototype) // 1.类有原型对象
console.log(Star.prototype.constructor) //2.类原型对象prototype 里面有constructor 指向 类本身
Star.prototype.sing = function() {
  console.log(‘冰雨’)
  }
var ldh = new Star()
console.dir(ldh) // 3.类可以通过原型对象添加方法
console.log(ldh.__proto__=== Star.prototype) // true // 4.类创建的实例对象有__proto__原型 指向类的原型对象

所以es6的类,它的绝大部分功能,es5都能实现,class写法只是让对象原型的写法更加清晰更像面向对象编程的语法而已
类其实就是语法糖
语法糖:语法糖就是一种便捷写法,简单理解,有两种方法可以实现同样的功能,但是一种写法更加清晰,方便,那么这个方法就是语法糖

创建类

语法:

class 类名 {
}
创建实例:
var xx = new 类名()

注意:类必须使用 new 实例化对象

类constructor构造函数

constructor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象(我们就可以不用return了),通过new命令生成对象实例时,自动调用该方法,如果没有显示定义,类内部会自动给我们创建一个constructor()

// 1.先创建一个类
class Star {
  constructor(uname) {
       this.uname = uname
      }
   }
  
// 2.利用类创建对象 new
var ldh = new Star(‘刘德华’)
console.log(ldh.uname) // 刘德华

使用类要注意一下几点

1.通过class关键字创建类,类名我们还是习惯性定义首字母大写
2.类里面有个constructor函数,可以接受传递过来参数,同时返回实例对象
3.constructor函数 只要 new 生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
4.生成实例 new 不能省略
5.最后注意语法规范,创建类 类名后面不加小括号,生成实例 类名后面加小括号,构造函数不需要加function

类添加方法

class Person {
      constructor(name, age) {
           this.name = name;
           this.age = age;
}
say () {  // 添加say 方法,不需要写function,多个函数之间不需要添加逗号分割
  console.log(this.name + ‘你好’);
}
}
ldh.say()

类的继承

// 使用extends关键字可以继承父类
class Father {
     constructor() { }
     money() {
      console.log(100);
      }
   }
class Son extends Father { // 子类继承父类
  }
var son = new Son();
son.money(); // 100

super关键字

子类想向父类里面传递参数可以使用super关键字

// super 关键字用于访问和调用对象父类上的函数,可以调用父类的构造函数和普通函数
class Father {
     constructor(x, y) { 
              this.x=x
              this.y=y
            }
     sum() {
      console.log(this.x+this,y);
}
}
class Son extends Father {
     constructor(x, y) {
        // this.x = x;  this y= y // 报错,这里的this指向的是son的constructor的实例,父类里面没有得到,这两个值,
         super(x,y) // 调用了父类中的构造函数
       }
     }
var son = new Son(1, 2);
son.sum(); // 3
// 使用super还得注意
// super必须在子类this之前调用
class Father {
     constructor(x, y) { 
              this.x=x
              this.y=y
            }
     sum() {
      console.log(this.x+this,y);
}
}
class Son extends Father {
     constructor(x, y) {
        super(x,y) // 调用了父类中的构造函数,必须在子类this之前调用
        this.x=x
        this.y=y
}
subttract() { // 定义子类独有的属性
    console.log(this.x - this.y) 
        }
var son = new Son(5, 2);
son.subtract() // 3
son.sum(); // 7

super调用父类的普通函数

class Father {
      say() {
       return '我是爸爸'
       }
class Son extends Father {
        say () {
        reurn super.say() + '的儿子'  // super 调用父类的方法
        }
    }
var  demo  =  new Son()
console.log(demo.say()) // 我是爸爸的儿子

继承中属性或者方法的查找原则(就近原则)

继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果就先执行子类的
如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法

类的三个注意点

1.在ES6中没有变量提升,所以必须先定义类,才能通过类实例化对象
2.类里面的共有的属性和方法一定要加this使用
3.this的指向问题

  • constructor 里面的this 指向的是 实例对象
  • 方法里面的this 指向的是这个方法的调用者

你可能感兴趣的:(js,类,javascript,es6,前端)