JavaScript如何实现一个类（顶层源码）

supmyre

已于 2023-04-25 18:57:08 修改

阅读量38

点赞数

分类专栏： JavaScript顶层源码文章标签： javascript 前端开发语言

于 2023-04-16 19:42:29 首次发布

本文链接：https://blog.csdn.net/qq_43498949/article/details/130186647

版权

JavaScript顶层源码专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章通过分析JavaScript的类在ES5中的实现方式，探讨了构造器、属性初始化以及方法的声明。同时，提到了TypeScript的类语法，并展示了其编译成ES5后的源码，帮助理解类在不同语法下的底层工作原理。

摘要由CSDN通过智能技术生成

JavaScript如何实现一个类（顶层源码）

本文主要通过es5的源码分析JavaScript如何实现一个类

前置知识

立即执行函数
什么是立即执行函数？JS立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，这种模式本质上就是函数表达式（命名的或者匿名的），在创建后立即执行。

(function t(){
console.log("立即执行")
}())

此函数会在定义时候立即调用
prototype
JavaScript的原型链，prototype表示显示原型，__proto__表示隐式原型
，隐式原型等于显示原型。
在这里插入图片描述

typescript类的源码

class Person {
  public name: string = "noname"
  public age: number = 0
  public phone: string = "11111"
  constructor(name_: string, age_: number, phone_: string) {//无参构造器
    this.name = name_;
    this.age = age_;
    this.phone = phone_;
  }
  public doEat(who: string, address: string): void {
    console.log(`${this.name}和${who}吃饭,在${address}吃饭`);
  }

  public doStep() {

  }
}

let zhangSanPerson = new Person("zhangSan", 23, "134123123");
zhangSanPerson.doEat("李四", "王府井")

console.log(zhangSanPerson)

ts编译后的es5源码

var Person = /** @class */function () {
    function Person(name_, age_, phone_) {
        this.name = "noname"; //赋初值为noname
        this.age = 0;
        this.phone = "11111";
        this.name = name_;
        this.age = age_;
        this.phone = phone_;
    }
    Person.prototype.doEat = function (who, address) {
        console.log(this.name + "\u548C" + who + "\u5403\u996D,\u5728" + address + "\u5403\u996D");
    };
    Person.prototype.doStep = function () {};
    return Person;
}();
var zhangSanPerson = new Person("zhangSan", 23, "134123123");
zhangSanPerson.doEat("李四", "王府井");
console.log(zhangSanPerson);

分析：

js类:class xxx{}
es5类:var xxx= function(){}

js构造器以及赋初值:public name: string = "noname"
  public age: number = 0
  public phone: string = "11111"
  constructor(name_: string, age_: number, phone_: string) {//无参构造器
    this.name = name_;
    this.age = age_;
    this.phone = phone_;
  }
es5:function Person(name_, age_, phone_) {
        this.name = "noname"; //赋初值为noname
        this.age = 0;
        this.phone = "11111";
        this.name = name_;
        this.age = age_;
        this.phone = phone_;
    }

js方法： public doEat(who: string, address: string): void {
    console.log(`${this.name}和${who}吃饭,在${address}吃饭`);
  }

  public doStep() {

  }

es5方法：Person.prototype.doEat = function (who, address) {
        console.log(this.name + "\u548C" + who + "\u5403\u996D,\u5728" + address + "\u5403\u996D");
    };
    Person.prototype.doStep = function () {};