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

您所在的位置：网站首页 › react中ref的用法 › JS优雅的使用function实现一个class

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

2023-01-01 02:01| 来源: 网络整理| 查看: 265

正文

使用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的资料请关注编程宝库其它相关文章！

下一节：React项目中className运用及问题解决JS 编程技术

抛出问题className 大家都用过吧，用它在 react 项目中设置样式。它的用法很简单，除了可以设置一个样式外，react 中也可以使用 className 引入多个类样式 ...

【本文地址】

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

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

今日新闻

推荐新闻