ES6通过class定义类

class类

  • 在es6之前是通过函数来定义一个类,也就是说构造函数
  • ES6使用class来定义一个类,相当于是使用函数来定义类的语法糖
    $$$$首先来说一下在ES6之前使用函数定义类(构造函数)的用法
  1. 一个函数在没有return之前就输出调用的话,返回的就是undefined
 function  sum(){
   }
  console.log(sum())   //undefined

但是如果是new实例了之后返回的就是一个实例化对象,也就是说p就是一个实例化对象

   function  sum(){
   }
      var p = new sum()
  console.log( typeof p)   //object

2.可以在在构造函数内部去定义对象属性和方法,这样的话就可以去访问到这个对象里面的属性和方法(注意:虽然说内部的方法都一样,调用时也都一样,但是new的实例不同,比较就是false)

   function  sum(){
       this.name="黎明",
       this.age = 12,
       this.getname=function(){
           return this.name
       }
   }
   var p1 = new sum()
   var p = new sum()
   console.log(p1.getname()===p.getname)   //false
  console.log(p)   //sum {name: "黎明", age: 12}
  console.log(p.getname())   //黎明

3.将方法添加到类的原型上,以便于复用,也就是说我们将方法放在类的原型上,就可以实现无论创建多少个new过的对象,这些方法都是共享的,不用再创建一个函数。

   function  sum(){
       this.name="黎明",
       this.age = 12,
       this.getname=function(){
           return this.name
       }
   }
   var p = new sum()
   var p2 = new sum()
    sum.prototype.getname=function(){
        return this.name
    }
     console.log(p.getname())//黎明
console.log(p.getname()===p2.getname())   //true

4.ES5继承

  • 原型链继承:
    原型链继承简单来说就是父类的实例=子类的原型
    //父类
    function sum() {
        this.name = "黎明",
            this.age = 12,
            this.getname = function () {
                return this.name
            }
    }
    //子类
    function child() {
        this.name = "北京"
    }
    //原型链继承
    child.prototype = new sum()
    var o = new child()
    console.log(o.name) //北京
    console.log(o.age) //12
  • 构造函数集成
    由于原型链继承不能传参所以我们就可以用到构造函数继承
    //父类
    function sum(name,age) {
        this.name=name
            this.age = age
            this.getname = function () {
                return this.name
            }
    }
    sum.prototype.getname=function(){
        return this.name
    }
    //子类
    function child(name,age) {
        sum.call(this,name,age)
    }
    //原型链继承
    // child.prototype = new sum()
    var o = new child("王五",20)
    console.log(o.name) //王五
    console.log(o.age) //20
  • 结合继承
    由于原型链继承不能继承父类的原型上的方法所以我们使用结合继承
 //父类
    function sum(name,age) {
        this.name=name
            this.age = age
            // this.getname = function () {
            //     return this.name
            // }
    }
    sum.prototype.getname=function(){
        return this.name
    }
    //子类
    function child(name,age) {
        sum.call(this,name,age)
    }
    //原型链继承
    child.prototype = new sum()
    var o = new child("王五",20)
    console.log(o.name) //王五
    console.log(o.getname()) //王五
    console.log(o.age) //20

$$$$$下面我们来说一下使用ES6来定义一个类
1.通过constructor定义实例化的属性,就不需要写多个原型,比较简洁

class sum{
    constructor(){
        this.name="黎明",
       this.age = 12
    }
    getname(){
           return this.name
       }
}
var p2 = new sum()
var p = new sum()
console.log(p2.getname()===p.getname())   //true
console.log(p2.getname())    //黎明

2.ES6类不仅可以去定义和使用,还可以去继承类

    class sum{
        constructor(){
            this.name="黎明",
           this.age = 12
        }
        getname(){
               return this.name
           }
    }
    var p2 = new sum()
    //子类
    class child extends sum{
        constructor(name,age){
            super(name,age)
        }
    }
    var p = new child("小柒",22)在这里插入图片描述
    console.log(p)
    console.log(p.getname())
    console.log(p.__proto__)
    console.log(p2)
    console.log(child.prototype.__proto__.constructor)

在这里插入图片描述


原型链在这里插入图片描述
(注意:在当前实例化属性中查找有没有,没有则通过__proto__查找父类的原型父类原型有则执行,没有则在通过__proto__再往上查找,查父类的父类的原型以此类推…走到查找到null,即为原型链的最顶端)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值