当前位置: 首页 > Web前端 > JavaScript

你知道JavaScript类的基本用法吗

时间:2023-03-27 02:12:19 JavaScript

JavaScript语言,传统的生成实例对象的方式是通过构造函数classPoint{//...}typeofPoint//"function"Point===Point.prototype。constructor//true上面的代码表明类的数据类型是函数,当类本身指向构造函数时,直接在类上使用new命令,与构造函数的用法完全一样.类classBar的实例对象{doStuff(){console.log('stuff');}}varb=newBar();b.doStuff()//“stuff”构造函数的原型属性,在上面ES6的“Class”中继续存在。实际上,一个类的所有方法都是在类的原型属性上定义的。classPoint{constructor(){//...}toString(){//...}toValue(){//...}}//等价于Point.prototype={constructor(){},toString(){},toValue(){},};在类的实例上调用方法实际上是在原型上调用方法。该类必须用new调用,否则会报错。这是它与普通构造函数的主要区别之一,普通构造函数不用new就可以执行。与ES5一样,一个类的所有实例共享一个原型对象。varp1=newPoint(2,3);varp2=newPoint(3,2);p1.__proto__===p2.__proto__//true上面代码中,p1和p2都是Point的实例,它们prototypes都是Point.prototype,所以__proto__属性是相等的。这也意味着可以通过实例的__proto__属性将方法添加到“类”。proto不是语言本身的特性。是各大厂商在实现时添加的私有属性。虽然这个私有属性在很多现代浏览器的JS引擎中都提供了,但是仍然不推荐在生产中使用这个属性。避免对环境的依赖。在生产环境中,我们可以通过Object.getPrototypeOf方法获取实例对象的原型,然后为原型添加方法/属性。varp1=newPoint(2,3);varp2=newPoint(3,2);p1.__proto__.printName=function(){return'Oops'};p1.printName()//"Oops"p2.printName()//“糟糕”varp3=newPoint(4,2);p3.printName()//“Oops”上面的代码在p1的原型上添加了一个printName方法,因为p1的原型就是p2的原型,所以p2也可以调用这个方法。而且,新创建的实例p3也可以调用这个方法。这意味着使用实例的__proto__属性重写原型必须非常小心,不推荐这样做,因为这会改变“类”的原始定义并影响所有实例。类表达式和函数一样,类也可以使用表达式形式定义。constMyClass=classMe{getClassName(){returnMe.name;}};上面的代码使用表达式定义了一个类。需要注意的是这个类的名字是MyClass而不是Me。Me只存在于Class的内部代码中,指的是当前类。letinst=newMyClass();inst.getClassName()//MeMe.name//ReferenceError:Meisnotdefined上面的代码表明Me只在Class内部定义。如果不用类内部,Me可以省略,即可以写成下面的形式。constMyClass=class{/.../};使用类表达式,您可以编写一个立即执行的类。letperson=newclass{constructor(name){this.name=name;}sayName(){console.log(this.name);}}('张三');person.sayName();//"张三"在上面的代码中,person是一个立即执行类的实例。不存在变量提升类不存在变量提升(hoist),这与ES5完全不同。ES6不会将类声明提升到代码的顶部。之所以这么规定,是跟下面说的继承有关,必须保证子类是在父类之后定义的。附件下载:http://github.crmeb.net/u/defu