Es5与Es6中实例化类的区别

本人学习过程中编写,定有美中不足,如果有错误,请您积极指正;如果有帮助,请不要吝啬您的赞美(点赞),欢迎各位大佬点赞评论。

首先建议没有javascript编程经验的同学,先了解原型与原型链https://www.cnblogs.com/loveyaxin/p/11151586.html

Es5中实例化类
let Animal = function (type){
  this.type = type;
  this.eat = function(){
    console.log('I am eat');
  }
}
let monkey = new Animal('monkey');
console.log(monkey);

然而这种方法有一个弊端,他会将实例化的对象都会添加一条eat属性。在实例化多个对象的时候并不是一个好的方法,于是我们对代码进行改写
在这里插入图片描述

let Animal = function (type){
  this.type = type;
}
A
let monkey = new Animal('monkey');
console.log(monkey);

在这里插入图片描述
这种方法使得eat属性就会添加到实例化对象的_proto_属性之中,及原型链中。实际上并没有给该实例化对象赋予eat属性,而是为他的原型赋予eat属性,而当在该实例化对象中找不到eat属性时,就会顺着原型链去向他的上级查找,直到找到为止。

Es6中实例化类
class Animal{
    constructor (type) {
      this.type = type;
    }

    eat(){
      console.log('I am eat');
    }
}
let monkey = new Animal('monkey');
console.log(monkey);

在这里插入图片描述
es6中只需简单操作便可以达到与es5中同样的效果
注意:
此时我们输出Animal的类型我们会发现是函数类型,并不是class类型,换句话说,class是es6中用原型链生成类的语法糖(语法不一样,最后的本质是一样的)。

console.log(typeof Animal);

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值