全面理解JavaScript中class的实现原理

一、class类概念与语法
ES5之前不存在类的概念,创建对象使用的构造函数,通过new操作符来创建;
为使JS更像面向对象,ES6版本引入class概念,其基本语法:

class Cat{
   
    constructor(name,age){
   
        this.name = name;
        this.age = age;
    }
    Say(){
   
        return '我的名字是' + this.name;
    }
}
var cat1 = new Cat('有鱼',2);
console.log(cat1.Say());//我的名字是有鱼

代码解析:
① constructor是一个构造函数方法,创建对象时自动调用该方法
② constructor是默认存在的,可以省略,程序亦可以调用
③ this指的是实例化对象
④类中声明的方法不能加function关键字
⑤方法之间不要用逗号分隔,否则会报错

二、class类与原型的关系

class类本质上就是一个函数,自身指向的就是构造函数,看代码:

console.log(typeof Cat);// function
console.log(Cat.prototype.constructor ===Cat);//true

class类是构造函数的另一种写法,仍然存在prototype方法

console.log(Cat.prototype);//object

可以通过原型prototype修改类方法和新增方法

Cat.prototype.Say = function(){
   
    return return '我的名字是' + this.name+',我是原型prototype声明同样的Say方法,把原有Say方法覆盖了';
}
cat2 = new Cat('年年',5);
console.log(cat2.Say());//我的名字是年年,我是原型prototype声明同样的Say方法,把原有Say方法覆盖了

Cat.prototype.Go 
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值