JS优雅的使用function实现一个class

 更新时间:2022年12月14日 17:28:09   作者:一只大加号  
这篇文章主要为大家介绍了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
  • 对于new调用,函数内部的this指向构造函数 (new绑定)
  • 直接调用 那么很明显this指向的是全局(默认绑定)

根据这个特点,在构造函数里面判断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() //error
for(let i in m1){
    console.log(i) //name
}

恭喜你认真的看完了,希望你也能学习到一点~

到这里我们就完结撒花啦~~

以上就是JS优雅的使用function实现一个class的详细内容,更多关于JS使用function实现class的资料请关注脚本之家其它相关文章!

相关文章

  • JS中bridge的原理与封装

    JS中bridge的原理与封装

    这篇文章主要介绍了JS中bridge的原理与封装,文章围绕主题的相关资料展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • 微信小程序商城项目之淘宝分类入口(2)

    微信小程序商城项目之淘宝分类入口(2)

    这篇文章主要为大家详细介绍了微信小程序实战商城系列之淘宝分类入口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS获取当前网页大小以及屏幕分辨率等

    JS获取当前网页大小以及屏幕分辨率等

    这篇文章主要介绍了JS获取当前网页大小以及屏幕分辨率等,方法虽简单,但比较实用,需要的朋友可以参考下
    2014-09-09
  • chrome不支持form.submit的解决方案

    chrome不支持form.submit的解决方案

    最近在解决项目中网站浏览器兼容性问题,发现chrome竟然不支持form.submit,经网上搜寻,终于找到了解决方案,有需要的小伙伴参考下。
    2015-04-04
  • 用chart.js添加动态背景图

    用chart.js添加动态背景图

    这篇文章主要为大家详细介绍了用chart.js添加动态背景图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 动态修改DOM 里面的 id 属性的弊端分析

    动态修改DOM 里面的 id 属性的弊端分析

    我不知道是否有什么标准规定不允许修改id属性,或者不建议修改id属性,总之IE对此支持不佳。
    2008-09-09
  • JS中的六种继承方式以及优缺点总结

    JS中的六种继承方式以及优缺点总结

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一,那么如何在JS中实现继承呢?下面这篇文章主要给大家介绍了关于JS中六种继承方式以及优缺点的相关资料,需要的朋友可以参考下
    2021-10-10
  • javascript操作数组详解

    javascript操作数组详解

    这篇文章主要详细介绍了javascript操作数组的方法以及示例,需要的朋友可以参考下
    2014-12-12
  • layer.confirm点击第一个按钮关闭弹出框的方法

    layer.confirm点击第一个按钮关闭弹出框的方法

    今天小编就为大家分享一篇layer.confirm点击第一个按钮关闭弹出框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS实现碰撞检测的方法分析

    JS实现碰撞检测的方法分析

    这篇文章主要介绍了JS实现碰撞检测的方法,结合实例形式分析了javascript碰撞检测的原理与相关操作技巧,需要的朋友可以参考下
    2018-01-01

最新评论