文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS怎么使用function实现一个class

2023-07-04 19:19

关注

本文小编为大家详细介绍“JS怎么使用function实现一个class”,内容详细,步骤清晰,细节处理妥当,希望这篇“JS怎么使用function实现一个class”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

正文

使用function来写出一个class的类对于我们来说当然是简单的,但必须注意的是,要做好function实现一个class,那么就要必须实现达到高精准度的模仿,把该实现的细节都实现好,才能更好的对class进行深入的理解

开始写出我们的class

class MyClass{    constructor(name){        this.name = name    }    fun(){        console.log('myName:'+this.name)    }}

这是一个平平无奇的class,接着我们使用function来对其进行一下实现。

function MyClass1(name){    this.name = name}MyClass1.prototype.fun = function(){    console.log('myName:'+this.name)}let m1 = new MyClass1('aaa')m1.fun() //myName:aaa

让我们继续完善一下function的实现,我们先一步一步来

Tip1:class只能通过new调用

class MyClass{    constructor(name){        this.name = name    }    fun(){        console.log('myName:'+this.name)    }}// MyClass('aaa') //TypeError: Class constructor MyClass cannot be invoked without 'new'

对于类的调用,只能通过new来进行实例化,而不能通过直接调用,下面我们在function来实现这个操作

如何判断是通过new调用而不是通过直接调用,这个时候this的熟练度就显得比较重要了,不熟悉也不要急,让我们一起来打印看看

function MyClass1(name){    console.log(this)    this.name = name}let m1 = new MyClass1('aaa') //MyClass1 {}MyClass1('aaa') //window

根据这个特点,在构造函数里面判断this的指向,从而抛出报错,即可实现class的效果

function MyClass1(name){    console.log(this)    if(!(this instanceof MyClass)){ //如果this不是指向MyClass        throw new TypeError('TypeError: Class constructor MyClass cannot be invoked without 'new'')    }    this.name = name}

Tip2:class中的函数不能被枚举

let m = new MyClass('aaa')for(let i in m){    console.log(i) //name}let m1 = new MyClass1('aaa')for(let i in m1){    console.log(i) //name fn}

从上可以看出类中的函数不能被枚举出来,枚举我们就想到了enumerable,也就是Object.defineProperty来对原型上的fn进行设置

'use strict'function MyClass1(name){    this.name = name}Object.defineProperty(MyClass1.prototype,'fn',{    value:function(){        console.log('myName:'+this.name)    },    enumerable:false})

好的,我们离完美又更近了一步。

Tip3:class中的函数不能被new调用

同样是new调用的方式,不能对类中的函数进行new调用

let m = new MyClass('aaa')new m.fun() //TypeError: m.fun is not a constructor

在这里会抛出一个错误,所以在用function实现类的时候也要避免这个问题,function中的函数都是可以通过new来进行调用的,我们来进行修改,有了上面对new的判断经验,很容易来解决这个问题

Object.defineProperty(MyClass1.prototype,'fn',{    value:function(){        //不可通过new调用         console.log(this) //正常调用下的this是指向实例 MyClass1 { name: 'aaa' }        if(!(this instanceof MyClass1){//那么相反 不是正常调用的就是错误的调用            //error        }        console.log('myName:'+this.name)    },    enumerable:false})

同样使用this的判断来看下是不是通过new的调用,正常调用下的this是指向实例 MyClass1,那么相反 不是正常调用的就是错误的调用

最后是一个小小的细节

Tip4:在ES6中使用类语法,代码都是在严格模式下运行

所以对于function的代码,需要在前面加上’user strict‘

'use strict'function MyClass1(name){    this.name = name}Object.defineProperty(MyClass1.prototype,'fn',{    value:function(){        console.log(this)        if(!(this instanceof MyClass1)){            //error            throw TypeError('error')        }        console.log('myName:'+this.name)    },    enumerable:false})let m1 = new MyClass1('aaa')m1.fn()// new m1.fn() //errorfor(let i in m1){    console.log(i) //name}

读到这里,这篇“JS怎么使用function实现一个class”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯