Es6Class类与原型

原型

  • 原型链:每一个实例对象上有一个proto属性,指向构造函数的原型对象,构造函数的原型对 象也是一个对象,也有proto属性,这样一层一层向上找的过程就形成了原型链
  • 构造函数:用new来调用,就是为了创建一个自定义类
  • 实例:是类在实例化之后一个一个具体的对象

在这里插入图片描述

   获取原型的方法
   1.通过对象的__proto__获取
   2.通过构造函数的prototype属性获取到原型
   3.通过类的prototype属性(Es6)

举个栗子

function Person(){
this.name = "小钟";
}
Person.prototype.showMyName =()=>{   
  console.log("我是小钟")
}
let smallClock = new Person();
smallClock.showMyName();        // 我是小钟
Person.prototype是一个对象,叫“原型对象”。这里我们在原型对象Person.prototype上面挂载了
showMyName这个方法。
smallClock是构造函数Person实例化出来的一个对象。smallClock上为什么也有showMyName这个方法呢?
因为实例对象smallClock与原型对象Person.prototype之间存在一个隐式链接。这个隐式链接就
__proto__原型链。smallClock自身是没有showMyName方法的,但它有__proto__原型链,当
smallClock在自身的方法中找不到showMyName时,就会通过它原有的__proto__原型链继续
向上查找它的原型对象Person.prototype,通过原型链,实例化对象smallClock也可以拥有原
型对象Person.prototype上的方法。

再举一个栗子对应第一条通过对象的__proto__获取

let fish={
 name:"我不喜欢吃鱼"
 }
 fish.__proto__.eat=()=>{
 console.log("有鱼刺")
 }
 fish.eat();
//fish.__proto__这个就是它的原型,给他的原型上加一个eat方法,

又一个栗子对应第二条通过构造函数的prototype属性获取到原型
这里简单说一下什么是构造函数,构造函数也是一个函数,比较特殊的是构造函数可以new()出一个新的函数,并在new的过程中初始化该函数。

function Fish(name,age){
	this.name=name;
	this,age=age
}
let fish=new Fish("鳕鱼",10);
Fish.prototype.eat=()=>{
	console.log("鱼刺少,可以吃")
}
fish.eat();

原型对象在实际开发中的用处(让时间以xx年xx月xx日的形式展示出来)

  let  studyTime=new Date();
  Date.prototype.newTime=function(){
      let studyYear=this.getFullYear();
      let studyMonth=this.getMonth()+1;
      let studyDate=this.getDate();
      return `${studyYear}年${studyMonth}月${studyDate}日`
  }
  console.log(studyTime.newTime())   //2022年9月16日

1.类的基本语法

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    Speak(){
        return '我的名字是 ' + this.name+“今年”+this.age;
    }
}
var person1 = new Person('小钟',22);       //person1 是通过类 Person 实例化出来的对象
console.log(person1.Speak());
// new Person和刚才上面提到的构造函数new一个new Fish很像,其实可以这样理解,Es5创建对象用
构造函数,二Es6用Class关键字创建一个类,类里面可以加一些属性和方法,

在这里插入图片描述
2.类新增方法的几种方式

  • 通过原型prototype修改类方法和新增方法
  Person.prototype.Like=()=>{
     return "喜欢跑步、滑板、射箭、拳击"
 }
 console.log(person1.Like())    //喜欢跑步、滑板、射箭、拳击
  • 通过Object.assign方法来为对象动态增加方法
  Object.assign(Person.prototype,{
     Run:function(){
         return "经常晨跑"
     }
 })
 console.log(person1.Run())      //经常晨跑
  • 使用实例对象的__proto__属性新增类的方法
  person1.__proto__.Eat=()=>{
     return "喜欢喝中杯标准糖去冰厚芋泥啵啵奶茶"
 }
 console.log(person1.Eat())     //喜欢喝中杯标准糖去冰厚芋泥啵啵奶茶

3.class类的继承

  class SmallClock extends Person{
     Listen(){
         return "很喜欢听毛不易《平凡的一天》"
     }
 }
 let smallClock1=new SmallClock("小钟",23)
 console.log(smallClock1.Run())      //经常晨跑
 console.log(smallClock1.Listen())   //很喜欢听毛不易《平凡的一天》

与实际开发结合,例如一个系统,有两种用户,普通用户和管理员,普通用户有用户名和密码,可以登录,管理员除了有用户名和密码外还有更大的权限,比如它可以删除用户

    class User{
        constructor(name,password){
            this.name=name;
            this.password=password
        }
        login(){
            console.log("登录成功")
        }
    }
    class Admin extends User{
        deleteUser(){
            console.log("删除某个用户")
        }
    }
    let newPeople=new Admin();
    newPeople.deleteUser();       //删除某个用户
    newPeople.login();                //登录成功

用原型如何实现继承呢?(Es5继承)
由于Es5中没有类,只能定义一个构造函数

function User(name,password){
    this.name=name;
    this.password=password;
    this.login=function(){
        console.log("登录成功")
    }
}
function Admin(){
    this.deletePerson=function(){
        console.log("删除某个用户")
    }
}
Admin.prototype=new User();
let admin=new Admin();
admin.login();   //登录成功

Admin中没有login方法,然后会去它的原型上面找,Admin的原型等于new User(),User中
有login方法,那假设如果User中也没有login()呢,它是否会继续向上找?
来做一个简单的测试,将下面的代码注释掉

   // this.login=function(){
   //     console.log("登录成功")
   // }

报错:admin.login is not a function
没有,再向上一层找,上一层要怎样定义呢?

function User(name,password){
    this.name=name;
    this.password=password;
}
function Admin(){
    this.deletePerson=function(){
        console.log("删除某个用户")
    }
}
Object.prototype.login=()=>{
    console.log("最上层")
}
Admin.prototype=new User();
let admin=new Admin();
admin.login();        //最上层

这就是基于原型链实现的一个在Object,最上层的原型上添加方法

let eat=[1,2,3];
eat.login();       //最上层

此时,所有对象的最上层都是Object.prortotype
注意点
类不存在变量提升(hoist)

new ToDo(); // ReferenceError
class ToDo {}   //使用在前定义在后会报错,所以继承时,子类应定义在父类之后
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值